SEO技巧1:通过优化減少HTTP Requests达到网站加速

    |     2015年3月17日   |   SEO案例   |     0 条评论   |    1220

网页开启速度是影响使用者感受非常重要的一个因素,也间接的影响了你的网站浏览量、转换率
一个龟速的网站,使用者是没有耐心久留的!又尤其在这个行动装置盛行的时代,越来越多的人是在移动中浏览网页,网站的速度是网站经营者必须做好的一项功课!

先介绍两个网页速度测试工具:

Google PageSpeed
https://developers.google.com/speed/pagespeed/insights/

这是Google提供的网页速度测试工具,不但会计算一个参考分数,更会提供该如何优化的提示说明,而且有中文!

WebPageTest
http://www.webpagetest.org/

这个速度测试工具就较复杂一些,这合对于网站建设有一定认知的使用者,工具除了能够选择远端测试的地区,更提供了非常详细的页面载入时间轴图表

pagespeed-optimization-1

用过了速度测试工具之后,就能够很清楚的知道拖慢网页载入速度的问题出在哪里!
其实影响著页面载入速度的最重要的要素是 HTTP Requests,接著才是档案大小

pagespeed-optimization-2

我们来看看一个网页HTTP Requests很多的实际案例,载入速度为什么会慢吧!

pagespeed-optimization-3-390x1024

例如这个箭头

上述这个范例网站一共有两个优化的重点:
1.减少include file的HTTP Requests
2.将小icon图档合併使用CSS Sprites

pagespeed-optimization-4

第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方式
如果只有需要用到几张的小图也可以使用data URI scheme方式

参考资料:CSS Image Sprites

原本的HTTP Requests共有150个,经过上面的调整之后剩下47个
大幅减低了HTTP Requests数量,页面载入的速度就提升非常多!

回复 取消