加速网站速度的35条建议

这是我参与更文挑战的第25天,活动详情查看: 更文挑战

起源

继上次学习Httpwatch与DynaTrace Ajax工具之后,继续查找能帮助提升网站速度的建议或方法。

仍然是在书籍《精通软件性能测试与LoadRunner实战》中,其中提到了35条实用建议,另外提到了Yahoo Developer上的详细文档,方向覆盖Content,服务,Cookie,CSS,JavaScript,图片,移动端。

我们一一探讨与思量!

Content

最小化Http请求数目

这是优化过程中非常重要的一点,尤其是针对首次访问网站的用户,此时浏览器中无相关缓存,所有资源均需从网络加载。每次建立连接,都是需要耗费时间和网络资源。而且Http 1.0/1.1协议下,浏览器对每个域名同时只能建立6个连接,其他连接则需要排队与阻塞。页面显示的大部分时间都用于下载页面中的组件:图像、样式表、脚本、Flash 等,减少组件的数量反过来会减少呈现页面所需的 HTTP 请求数量,这是加快页面速度的关键。

相关的技术包括:

组合文件(通过将所有脚本组合到一个脚本中来减少 HTTP 请求数量的方法);

CSS Sprites(减少图像请求数量的首选方法,您的背景图像组合成单个图像,并使用 CSSbackground-imagebackground-position属性来显示所需的图像片段)、

图像映射(将多个图像组合成一个图像,不推荐使用)

减少DNS解析时间

It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname.

一次DNS解析大约需要20-120毫秒。

DNS解析时间与网站资源上的域名数量有关,通过降低网站资源的域名数量,可以减少DNS解析时间。但另一方面,降低网站资源数量也会降低页面上并发下载的数量。建议将网站组件拆分为2~4个域名下

避免重定向

重定向是通过HTTP状态码301,302实现的。

重定向会降低用户体验。重定向时,嵌入重定向的HTML文档下载完,才可能开始真正的页面下载。

一个非常常见的重定向是,URL尾部的\被遗漏。如http://xxxx/file,当其获取响应为301时,会重定向至http://xxxx/file/

缓存Ajax

即缓存从后台服务器请求的数据。通过在Response中设置和添加Expires或Cache-Control。

延迟加载组件

这一点很好理解。熟悉<img>的知道,它有一个属性为loading,当设置为loading="lazy"时,只有当图片在视窗中出现时,图片才会实际加载,而不在视窗体内,图片实际不会加载。

预加载组件

通过预加载组件,你可以利用浏览器闲置的时间,请求你将来需要的组件(如图片、样式和脚本)。这样,当用户访问下一个页面时,你可以在缓存中已经有了大部分的组件,你的页面将为用户加载得更快。现在手机浏览器分页时,普遍有预加载下一页的功能。

减少DOM元素的数量

DOM元素多会使得在JavaScript中的DOM访问速度更慢。例如,当你想添加一个事件处理程序时,如果你在页面上循环浏览500或5000个DOM元素,就会有不同的效果。

在浏览器console中输入document.getElementsByTagName('*').length可以查看页面dom数量。

建议:检查类似页面的dom数量。

文中提到雅虎主页DOM数量小于700。

拆分组件到多个域名

拆分可以更大程度的实现并行下载。在“DNS解析”中我们有过介绍,确保使用的域名不超过2-4个。

最小化iframes的数量

<iframe>的优点包括:有助于处理缓慢的第三方内容,如广告;是一个安全的沙盒;可以并行的下载脚本;

<iframe>的缺点是:即使空白成本也很高;阻碍页面运行;非语义。

避免404错误

执行一个HTTP请求而得到一个无用响应浪费资源。