如何减少HTTP Requests?网页速度最佳化技巧

作者:码迷 阅读:195 点赞:36

如何减少HTTP Requests?网页速度最佳化技巧/

网页打开速度是影响用户感受非常重要的一个因素,也间接的影响了你的网站浏览量、转换率

一个龟速的网站,用户是没有耐心久留的!又尤其在这个手机端盛行的时代,越来越多的人是在移动中浏览网页,网站的速度是网站经营者必须做好的一项功课!

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

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数量,页面加载的性能就提升非常多哦!

本文网址: https://www.mamioo.com/seo-advanced/ovrn7no98m64

本站内容均为「码迷SEO」原创整理,未经授权严禁采集转载,违者必究。