Eddie Chen


A Front-End Web Developer;

A fakegeek studying at Uestc;

A boy who loves the logic and structure of coding;


Resume

Project List

+

福州金玉堂网站

form 2011 - 2012

福州金玉堂企业网站开发

页面重构, jQuery开发, 基于Ajax的在线聊天子系统, 实时期货价格图表生成(基于Ajax&jsonp)

→ View website

+

diandian.com 数个模板开发

+

中国技术供需在线

form 2011 - 2012

中国技术供需在线-教育部全国高校产学研合作公共服务网络平台

负责一期项目后端开发, 数据库设计

基于PHP, CI框架开发

→ View website

+

电子科技大学校工会新版网站

2011

电子科技大学校工会新版网站

负责后台开发(PHP+CI)以及项目管理

→ View website

+

电子科技大学科技处网站

2010

电子科技大学科技处网站

负责部分页面重构

→ View website

Skill

HTML

80%

CSS & CSS3

70%

Javascript

80%

PHP

60%
*skill scores are based on the test provided by Elance.com.

Blog

这几天网站优化的一些学习记录


1. 静态文件缓存


静态文件缓存在网站性能优化中的效果是最为直接的, 对于大量的图片, CSS, JS等等, 运用缓存后能够直接的减少HTTP请求数量, 对比没有启用缓存的网站, 速度有了质的变化.

以本blog而言, 启用缓存之后可以把二次访问的请求数量降到 1 (不包含三方插件加载时造成的请求, e.g.多说等).

静态文件缓存的实现非常之简单, 以nginx为例. 只需要在静态文件的返回头部加上 Expires 或者 cache-control 即可. 简单配置如下:

#nginx config
server {
    listen          80;
    server_name     static.fakegeek.im;
    root    /home/fakegeek;
    location / {
        index    index.html;
        expires 1d;
    }
    location ~ \.php$ {
        return 403;
    }
    location ~ \.(png|jpg|jpeg|gif) {
        gzip off;
    }
    location ~ \.html$ {
        return 403;
    }
    location /protected/ {
        return 403;
    }         
}

这是针对静态文件服务器的配置, 把网站的静态文件用独立子域名, 能够提高加载时的并行数量(每个域下的同时请求数量是很有限的). 这里把所有请求的expires设置成了1d(因为近期对网站的调整会比较频繁, 暂时设短一点), 并且403了所有其他请求.

要注意的是对于图片文件, 由于图片本身已经压缩过了, 要把gzip关掉. gzip只对于html, js 这类纯文本文件有较好的压缩效果.

应用以上设置之后, 向服务器请求一个js文件的到以下 HEADER.

HTTP/1.1 200 OK
Server: nginx/1.2.5
Date: Sun, 05 May 2013 12:06:24 GMT
Content-Type: application/x-javascript
Last-Modified: Sat, 04 May 2013 07:52:46 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Expires: Mon, 06 May 2013 12:06:24 GMT
Cache-Control: max-age=86400
Content-Encoding: gzip

ps: 手动刷新页面时,无论是否启用缓存, 都会向server重新发送请求, 此时可能看到返回的是304 not modified.

2. 针对SEO的设置


因为SEO知识接触的有限, 目前只做了以下几个方面:

1. 页面关联

网站刚刚起步, 不去想一些很悬的东西, 毕竟太远. 所以从基础的做起, 第一件事情就是关联页面, 针对spider做一些力所能及的优化. 根据google的推荐设置, link-> googlewebmastercentral, 在head中设置相关页面的link, 主要是prev 和 next. 确保爬虫从首页进入, 能爬到任何一个你想要被收录的页面. e.g.

<link rel="canonical" href="http://fakegeek.im/article/page/2" />
<link rel="prev" href="http://fakegeek.im/article/page/1" />
<link rel="next" href="http://fakegeek.im/article/page/3" />

这样就在各个列表页之间建立了关联(不过目前我的博文数量还不足以产生分页…无视) 另一方面, 列表页到各个文章的链接(这个一般不会漏掉), 但是还是提一点, 需要确保链接的有效性, 这个在后面讨论.

还有一点要提的是sitemap, sitemap 对与新建的网站效果非常明显, (什么是sitemap? 传送门 here) 特别是新建初期的网站, 流量少的可怜, sitemap能够很好的帮助spider获取网站结构, 增加收录.

2. 语义化 & microdata

microdata是html5中的一个新特性, 已经的到了google的很好支持. 在此之前, 可以用一些特定的class修饰标签以获取更好的语义(see microstructure). 而microdata 的出现, 使得这种修饰更进了一步, 使用 http://schema.org/ 提供的标记规范, 组合使用itemscope, itemtype, itemprop等属性,为spider提供更友好的html结构.

具体实现google官方文档给的很详细, 传送门 about microdata. 测试方面, google也给出了一个很强大的实用工具, 来校验microdata合法性, 传送门richsnippets.

3. 死链接处理, 404的重要性

对于已经删除的文章(它很可能已经被收录了), 为了减少因此产生死链造成不必要的负面影响, 在访问不存在的页面时, 一定要注意404header的设置,(很多后台程序已经使用友好的 not found界面, 虽然提示了 notfound信息, 但是http响应头却是200.) 返回404 能够告知spider 把该链接从索引库中删除.


Date:

About

This is Eddie Chen, a front-end web developer, a member of Dreamfly Studio of UESTC.
Keep in touch:
haozi[a,t]haozi.name


Powered by Eddie Chen.