晓风博客

一片荒芜的地方

网站性能优化之加载篇

影响网站加载速度的因素有很多,我希望能通过自己对于网站速度加载优化的一系列总结来加深自己对网站性能优化的思考,同时分享出来希望能对你有一些收获。

当我们在讨论加载的时候,我们讨论的更多的时候加载网站上的资源。那一个普通的网站有哪些所谓的“资源”呢?

关于 JS/CSS 的加载和解析

如我们所知,最先加载的是 HTML 文件,然后根据你在 HTML <head> 标签中所定义的一系列 <link> 或是 <script src> 浏览器会开始加载并解析 JS 文件或是 CSS 文件。当然你的 CSS/JS 文件有可能在 <head> 加载并解析,也有可能会在 <body> 中加载并解析。

在这个过程中我们已经遇到了一些常见的问题,当浏览器加载 JS 文件时浏览器的主线程会被阻塞吗?我们应该在 <head> 标签中加载 JS 还是在 <body> 最底部加载 JS?你是否应该使用 <script async> 或是 <script defer> 来对你的 JS 资源加载做出调整?我没有一个标准答案,随着项目的不同策略也应该是不同的。但如果你还不清楚这些问题那关于浏览器加载优化的第一步则是搞清楚这几个问题:

你真的需要加载全部吗?

想象一下你有一个图片分享网站,很不幸50%的用户只是点进来看一下首屏的内容然后就关掉了网页,剩下30%的用户会滑动屏幕到第二屏,最后20%的用户会滑动到页尾。此时你是否有必要给 100% 的用户都加载所有的图片呢?

带宽就像一根水管,如果你有大量的内容想要给用户,此时你所需要考虑的是哪些内容是用户迫切需要的,哪些内容是用户可能不需要的。举例来说:

水管固定的情况下如何流更多的水?

你可以加大水管的水压,上一台更好的发动机引擎,而这台引擎就是 CDN。

如果你已经有 CDN 了那还能做什么?如之前所说你需要把不用的资源推迟加载,把重要的资源提前加载。其实这也正是你要做的事情 —— 对资源进行优先级划分。

划分优先级的时候可以遵循如下规则:

上面的这四个原则被 Google 称之为 PRPL(Push/Render/PreCache/Lazyload) 原则,如果你英文过关的话 Google 的文章 可能讲的更好。

我如何知道我所做是事情是有用的?

当你设置了图片的 lazyload 在浏览器上之后你一定想知道对你的网站产生了怎样的影响,下一篇文章会继续讲述你如何量化你的网站性能?满分100分的话你能得几分?有哪些重要的指标是我们应该关注的。希望我能坚持写下去,

如果你很耐心地看完了这篇文章并且觉得有收获的话,欢迎留言和分享。期待下次再见。