本文以
www.bit1010.com的优化实战为例,打造百度高评分网站。直接切入主题,优化前评分49分,如图:
1. 使用CDN优化JS加载时间
诊断给出的建议是“合并JS”,主要耗时的是jquery.js,jquery.form.js,分别为2秒和1秒 如图:
但实际上我们可以看出,合并着这2个公共文件并不科学,那么要减少这2个文件的加载时间的最好方法就是使用CDN,经测试bootstrap的CDN在各个链路都有很好的速度,以下为优化后的截图,速度有了显著的提升。
使用CDN的另一个好处还能降低网站自身的流量压力,何乐而不为呢?
2. 启用服务器压缩
本站用的是PHP和Nginx。开启PHP的压缩,修改php.ini
zlib.output_compression = On
zlib.output_compression_level = 3
修改完后重启PHP,命令: php-fpm restart
Nginx则修改 nginx.conf, 最简单的就是在http模块里添加一行
gzip on;
修改完后重新加载配置文件,命令: nginx -s reload
3. 检查CSS样式的定义位置
务必将css文件和<style>...</style>定义放到 body标签之前,放到head里。否则页面需要重新渲染,打开速度受到影响。
4. 检查JS脚本的定义位置
在不打乱整体架构的前提下,尽量将JS放在页面最后。虽然放在最后加载时该block的依然block,但从人机感觉上加载快了很多,可以将对整个页面的显示的影响降到最低。
5. 图片大小的定义
在确定的图片大小的情况下,定义图片的widht和height属性,减少页面自动计算图片大小的压力。
经过以上的几项优化,应该可以有比较大的提升了。这是优化后的分数截图,95分:
1.
这里可压缩的数据量实际上非常少,只有33.7k,考虑到如果每次都要压缩,非常麻烦,且实际影响可以忽略,这里的2分果断放弃。
2.
第一处的js为百度的异步统计代码,因为是异步的,且本代码放到的footer里,footer被很多页面引用,如果为了放到页面最后单独拿到每个页面或为此再加一个公共引用文件,得不偿失。
第二处的js是为了计算页面加载时间用的,这里定义的是起始时间,必须放在页面的最上端。
以上2处扣2分,忍了。
3. 还有个1分的扣分项是建议合并js的,由于使用的是外部的cdn上的js,且加载时间已经降到20ms以内了,这个扣分项实际是上分析上的偏颇,直接无视。
- 本文固定链接: http://www.bit1010.com/static/default/44.html
- 转载请注明: Administrator 2015-08-15 02:54:34 于 比特核 - 独立游戏人 发表