网页打开速度是影响用户感受非常重要的一个因素，也间接的影响了你的网站浏览量、转换率
一个龟速的网站，用户是没有耐心久留的！又尤其在这个手机端盛行的时代，越来越多的人是在移动中浏览网页，网站的速度是网站经营者必须做好的一项功课！
先介绍两个网页速度测试工具：
Google PageSpeed
这是Google提供的网页速度测试工具，不但会计算一个参考分数，更会提供该如何优化的提示说明，而且有中文喔！
WebPageTest
这个速度测试工具就较复杂一些哦～适合对于网站建置有一定认知的用户，工具除了能够选择远程测试的地区，更提供了非常详细的页面加载时间轴图表
Google PageSpeed从20分到80分的速度优化技巧
用过了速度测试工具之后，就能够很清楚的知道拖慢网页加载速度的问题出在哪里哦！
其实影响着页面加载速度的最重要的要素是 HTTP Requests，接着才是文档大小
我们来看看一个网页HTTP Requests很多的实际案例，加载速度为什么会慢吧！
下图是某个网站的HTML原代码前段与使用WebPageTest工具产生的图表
我们可以看到HTML Document前半段引用了许多现成Framework，如bootstrap、jQuery UI等
这些组件都会产生HTTP requests，并且是从HTML Document依照前后顺序循序加载的
从上图WebPageTest工具产生的图表，可以看到网页内容被加载的时间点，与每个内容加载了多久，范例当中的网站使用许多Framework，又没有将文档整并，因此一个页面打开时需要载48只js文档与22只css档，光是js与css文档加起来就高达了70个HTTP requests，占据页面打开之后的6秒，这六秒可是黄金时间呀！！
接着下图可以看到6秒之后才开始加载页面的正文本与图片
而这些图档有许多是小小的icon
例如这个箭头
上述这个范例网站一共有两个优化的重点：
1.减少include file的HTTP Requests
2.将小icon图档合并使用CSS Sprites
第1点减少include file的HTTP Requests
分为两个方向
一个是要将页面当中没有用到的js或css文档就不应该加载
应该在HTML中将include的原代码删除
另一个是合并多个分开的js或css档
或是将小型的js或css文档内嵌在页面当中（例如仅有10行的文档）
并且<script>标签移至</body> 前推迟加载
css文档则是在<head>…</head>当中加载
参考数据：移除禁止转译 JavaScript、为 CSS 发送进行最佳化处理
第2点是将多个icon小图标文档合并为一张图档使用CSS Sprites方式
如果只有需要用到几张的小图也可以使用先前 awoo 博客有介绍的data URI scheme方式
参考数据：CSS Image Sprites
原本的HTTP Requests共有150个，经过上面的调整之后剩下47个
大幅减低了HTTP Requests数量，页面加载的性能就提升非常多哦！
评论列表 （0）