Web 加载速度优化清单,让你的网站快上加快

网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页。时间就是生命,干等着,谁愿意平白无故地 +1s 呀,所以今天来整理下具体如何加快网页。

本文不再更新,原文链接:https://blog.error.work/qd/89.html

HTML

1、压缩 HTML

HTML 代码压缩,将注释、空格和新行从生产文件中删除。

为什么

删除所有不必要的空格、注释和中断行将减少 HTML 的大小,加快网站的页面加载时间,并显著减少用户的下载时间。

2、删除不必要的注释

确保从您的网页中删除注释。

为什么

注释对用户来说是没有用的,应该从生产环境文件中删除。可能需要保留注释的一种情况是:保留远端代码库(keep the origin for a library)。

3、删除不必要的属性

type="text/javascript" or type="text/css" 这样的属性应该被移除。

为什么

类型属性不是必需的,因为 HTML5 把 text/css 和 text/javascript 作为默认值。没用的代码应在网站或应用程序中删除,因为它们会使网页体积增大。

4、在 JavaScript 引用之前引用 CSS 标记

确保在使用 JavaScript 代码之前加载 CSS。

为什么

在引用 JavaScript 之前引用 CSS 可以实现更好地并行下载,从而加快浏览器的渲染速度。

5、最小化 iframe 的数量

仅在没有任何其他技术可行性时才使用 iframe。尽量避免使用 iframe。

6、DNS 预取

一次 DNS 查询时间大概在 60-120ms 之间或者更长,提前解析网页中可能的网络连接域名


CSS

1、压缩:

所有 CSS 文件都需要被压缩,从生产文件中删除注释,空格和空行。

为什么

缩小 CSS 文件后,内容加载速度更快,并且将更少的数据发送到客户端,所以在生产中缩小 CSS 文件是非常重要,这对用户是有益的,就像任何企业想要降低带宽成本和降低资源。

2、Concatenation:

CSS 文件合并(对于 HTTP/2 效果不是很大)。







为什么

如果你还在使用 HTTP/1,那么你就需要合并你的文件。不过在使用 HTTP/2 的情况下不用这样(效果待测试)。

3、非阻塞

CSS 文件需要非阻塞引入,以防止 DOM 花费更多时间才能渲染完成。



为什么

CSS 文件可以阻止页面加载并延迟页面呈现。使用 preload 实际上可以在浏览器开始显示页面内容之前加载 CSS 文件。

4、减小 CSS 类 (class) 的长度

class 的长度会对 HTML 和 CSS 文件产生(轻微)影响。

为什么

甚至性能影响也是有争议的,项目的命名策略会对样式表的可维护性有重大影响。如果使用 BEM,在某些情况下可能会写出比所需要的类名更长的字符。重要的是要明智的选择名字和命名空间。

5、删除不用的 CSS

删除未使用的 CSS 选择器。

为什么

删除未使用的 CSS 选择器可以减小文件的大小,提高资源的加载速度。

JavaScript

1、JS 压缩

所有 JavaScript 文件都要被压缩,生产环境中删除注释、空格和空行(在 HTTP/2 仍然有效果)。

为什么

删除所有不必要的空格、注释和空行将减少 JavaScript 文件的大小,并加快网站的页面加载时间,提升用户体验。

2、非阻塞 JavaScript

使用 defer 属性或使用 async 来异步加载 JavaScript 文件。



                    
                    

你可能感兴趣的:(html)