网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页。时间就是生命,干等着,谁愿意平白无故地 +1s 呀,所以今天来整理下具体如何加快网页。
本文不再更新,原文链接:https://blog.error.work/qd/89.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 之间或者更长,提前解析网页中可能的网络连接域名
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 选择器可以减小文件的大小,提高资源的加载速度。
1、JS 压缩:
所有 JavaScript 文件都要被压缩,生产环境中删除注释、空格和空行(在 HTTP/2 仍然有效果)。
为什么:
删除所有不必要的空格、注释和空行将减少 JavaScript 文件的大小,并加快网站的页面加载时间,提升用户体验。
2、非阻塞 JavaScript:
使用 defer 属性或使用 async 来异步加载 JavaScript 文件。