前端优化，让你的网页在浏览器里显示的更快

update 12-10-2009, a good .htaccess code

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType text/css A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType application/javascript A2592000
ExpiresByType text/javascript A2592000
ExpiresByType text/html A600
</IfModule>
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css|html|htm)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$">
Header unset Last-Modified
</FilesMatch>
FileETag none

昨天Steve的讲座涉及了一个我从没考虑的领域，在没法优化后台服务器的时候，如何合理的放置网页的元件让她们在浏览器里显示得更加快。这里，我就根据他的建议，把我对这博客的更新的过程记录一下。如果想了解更多的信息，可以看他的主页，那里有不少他做的讲座的视频和讲稿，还可以看到他在斯坦福开的课的视频……再进一步就是去读他的两本书了《High Performance Web Sites: Essential Knowledge for Front-End Engineers》《Even Faster Web Sites: Performance Best Practices for Web Developers》。

优化的过程，实际上就是根据Yslow这个Firebug的插件的提示“升级”的过程（Yslow可用于不同大小的站点，我选择了“Small Site or Blog”这个选项）。为什么要优化？功利的讲，是让你的页面在搜索引擎里表现更好；但更重要的是，省下这1-2秒的时间，能让你的读者更加舒畅地浏览你的站点。

我做了一下的几步：

1. 把所有的CSS文件放在一起；并避免使用@import的方式倒入CSS文件，因为这种方法强制浏览器在import的时候只能运行一个线程，而一般情况是两个线程一起上的。
   对于我来说，我新建了一个styleall.css文件，把所有在"screen"情况下使用的CSS全部复制粘贴进去。使用Yslow中的“All CSS”的工具，很容易就收集到了所有的CSS的信息——三个插件、Google和theme里用的。最终，从9个不同的CSS文件，我缩到了2个，一个给"screen"用，一个给"print"用。在修改了theme调用的CSS的方法后，我到每个插件的设置页面，禁止调用相应的CSS。如果插件不允许修改的话，我就修改插件的源代码，搜索“.css”，然后删掉。
2. 把所用的javascript合到一起，然后尽可能的放在页面的末尾，因为js的下载强制性的是单线程，放在页面的尾部，给读者印象是页面已经完全下载好了，而实际上有些功能的js还在下载中。
   对于我，因为所有的js都不没有使用document.write，可以放心大胆的合并并放到页面的尾部。我使用Yslow中的“All JS Minified”工具，操作很快：所有插件使用的合并到一个min.js在插件的根目录；所有主题使用的合并在theme的根目录；我没有合并来自Google的javascript到前面的两个汇总文件中，因为根据我的理解，Google会根据浏览器的不同把不同的js推送出来。

   <script type='text/javascript' src='http://en.dogeno.us/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
   <script type='text/javascript' src='http://en.dogeno.us/wp-includes/js/jquery/jquery.form.js?ver=2.02'></script>

   理论上我要把上面quene的部分改成直接连接到文件的模式，因为“don't use querystring – breaks proxy caching”；但这步涉及修改wordpress的核心代码了，没敢。合并js之后，记得到相应的地方禁止原来的javascript的调用，然后把调用合成js的代码放在footer.php或类似的地方，比如我的

   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Min.js"></script>
   <script type="text/javascript" src="http://en.dogeno.us/wp-content/plugins/Min.js"></script>

3. 使用sprites工具，合并背景图片，使用CSS的方法调用。
   对于我，直接跳过，因为站点没用多少背景图片；而且这步的修改很烦，“pain in the a#%!”。
4. 使用Yslow中的“All Smush.It”工具，压缩图片。
   这里的操作很简单，直接下载在Smush.it上生成的文件，下载替换即可。
5. 在博客或者网页服务器的根目录下修改.htaccess文件，实现图片的cache以及gzip传送。

   # Add a far future Expires header
   <FilesMatch "\.(png|gif|jpg|js|css|ico)$">
   ExpiresActive On
   ExpiresDefault "access plus 10 years"
   Header set ETag ""
   </FilesMatch>
   # Compress html, XML, css and js
   <IfModule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript
    application/javascript
   </IfModule>

   对于Bluehost的服务器来说，貌似deflate是不开的，我就没招了。

6. 预先下载大的背景文件。
   我没有做这一步，因为没有大的背景文件。Steve的本意是“big sprite.png blocks parallel downloads; if only we could load it above style.css preload it!”，也就是利用两个线程下载的优势，在空挡把大文件先下载下来。

上面的操作，让这个站点Yslow评分从F升到了B，花费时间2个小时；貌似显示快了，你觉得呢？

Previous: #wordcamp San Francisco 2009 recap
Next: A nice sidebar in gmail for tracking packages