欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

站点调优日志 网站优化速度日志

shiping1 的头像

站点调优日志[二]:合并css和js文件

继续使用YSlow优化站点,上次YSlow优化后的成绩为82分,继续努力,看看有啥东西还可以再优化的,YSlow中另一项标记为F的项是Make fewer HTTP requests:

Grade F on Make fewer HTTP requests

This page has 9 external Javascript scripts. Try combining them into one.
This page has 16 external stylesheets. Try combining them into one.
This page has 9 external background images. Try combining them with CSS sprites.

可以看到YSlow已经给出了解决方案,就是将多个CSS和JS文件合并成一个,不过手工合并显然不现实,而且更换新主题后还需要重新合并,那有没有一个插件可以直接搞定呢,答案是肯定的,那就是WP Minify。

安装后默认就开启了js和css的合并。

不过有些插件在开启了js合并后会失效,如我博客上的wp to top,WP Minify考虑到了这种情况,毕竟合并js会存在且不可避免变量或函数重名等问题,将插件目录下的wp-to-top.js加入到排除列表即可。

再使用YSlow测试,现在Overall performance score已经变为89了。

站点调优日志[一]:Expires headers

今天用YSlow测了一下博客的页面加载,Overall performance score为76,Grade C,看来还是有很多地方需要优化啊,看了一下Grade F的项,其中一个为:

Grade F on Add Expires headers

There are 26 static components without a far-future expiration date.

先来了解一下这个Expires headers:

Expires  header, 就是过期时间的header报文。这个文件过期时间,其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调 用的背景图片和文章中调用的图片)其实在很长一段时间内我们都不会对它们有什么改变,这类文件可以设置非常长的缓存时间,这样浏览器以后就不需要再从服务 器下载这些文件而直接从缓存中读取,从而大大加速网站的载入速度。

再来看一下Nginx下的配置,编辑nginx.conf文件,找到:

location ~ .*.(js|css)?$
                       {
                               expires      12h;
                       }

expires为半天,看来还不够far-future,反正博客的样式和js一般也不会去动,索性调成20天好了:

location ~ .*.(js|css)?$
                       {
                               expires      20d;
                       }

再测试,Overall performance score已经变成82,Grade变为B了。
来自 http://www.dbconf.net/?tag=yslow

普通分类: