现在，Page Speed（页面速度）的意义不凡。

自从Google扭转Googlebot's的算法以高度反对疾速，适宜挪动设施的网站以来，领有疾速网站变得越来越重要。如果这还不够好，用户通常会花更少的工夫，转化率也会更低，你的网站体验越慢，用户的转化率就越低。

什么是Page Speed

Page Speed是将内容齐全加载到网页上所破费的工夫。

对于任何给定的用户来说，页面迟缓的起因可能有很多，你的用户可能正在火车上，通过信号弱的隧道，或者他们的互联网速度很慢。

通过遵循最佳实际，咱们至多能够通过确保咱们曾经做了最好的工作来缓解问题。

当初你晓得它是什么了，上面我就来教你如何进步页面速度。

留神：这些是按难度程序列出的。在某个时候，你将须要开发人员来帮忙优化你的网站。

1.应用CDN

CDN是内容传输网络的缩写。应用CDN能够让你无效地拜访寰球数百台小服务器，这些服务器为你提供网站的正本，大大减少了你的网站获取工夫。如果你没有应用CDN，你的网站的每一个申请（包含图片、CSS和JavaScript）都会被迟缓地传送到你的服务器上。

依据HTTPArchive中的4.68亿个申请，48%的申请不是来自CDN。那是超过2.24亿的申请，如果他们花几分钟的工夫给本人的网站增加一个CDN，速度可能会超过50%。

肯定要查看你的CDN配置是否正确——在你的CDN中缓存失落意味着CDN必须向你的源服务器申请资源，这就违反了应用CDN的初衷！所以，你的CDN必须要有一个正确的配置。

2.启用GZIP压缩

在一些CDN上，GZIP压缩只是一个标有 "启用压缩 "的复选框。这大略会缩小一半的文件大小，你的用户须要下载文件能力应用你的网站，你的用户会因而而喜爱你。

3.应用较小的图像

这意味着既要升高分辨率（例如，摄像头的输入从4000x3000像素缩小到网络的1000x750），又要通过压缩文件来减小尺寸。

如果你的网站应用WordPress，则有一些插件会在你上传图片时主动为你执行此操作。

在撰写博客文章时，我集体应用TinyJPG压缩图像。

4.缩小页面收回的申请数

指标是缩小加载页面顶部局部所需的申请数量。

这里有两种思维形式，你能够：

  • 通过删除花哨的动画或不能改善网站体验的图像，缩小整个页面上的申请数量。
  • 或者，你能够通过应用提早加载来推延优先级不高的加载内容。

5.尽可能防止重定向

重定向会大大降低网站速度。应用响应式CSS并从一个域为你的网站提供服务，而不是为移动用户提供非凡的子域。

有些重定向是不可避免的，比方 www-> 根域 或 根域 ->www，但你的大部分流量不应该经验重定向来查看你的网站。

6.缩小到第一个字节的工夫

到第一个字节的工夫是指你的浏览器在收回资源申请后，从服务器接管到第一个字节的数据所破费的工夫。

有两个局部：

  • 在服务器上破费的工夫
  • 发送数据所破费的工夫

你能够通过优化你的服务器端渲染、数据库查问、API调用、负载平衡、你的应用程序的理论代码以及服务器的负载自身（特地是如果你应用的是便宜的虚拟主机——这将影响你的网站的性能），来改善你在服务器上破费的工夫。

你能够应用CDN大大减少发送数据所破费的工夫。

7.缩小并删除阻止渲染的JavaScript

内部脚本（特地是那些用于营销的内部脚本）往往会写得很差，会阻止你的页面加载，直到它运行结束。

你能够通过将内部脚本标记为异步来缩小这种影响：

<script async src="https://example.com/external.js"></script>

你还能够提早加载市场营销脚本，直到用户开始滚动为止：

window.addEventListener(  'scroll',  () =>    setTimeout(() => {      // 在此插入营销片段    }, 1000),  { once: true });

8.放大CSS和JS

Minifying是指应用工具来删除空格、换行符和缩短变量名。通常状况下，这将作为构建过程的一部分主动实现。

要放大JavaScript，请查看UglifyJS。

要放大CSS，请查看cssnano。

9.删除未应用的CSS

自Chrome 59（2017年4月公布）以来，在Chrome DevTools中能够看到未应用的JS和CSS。

要看这个，关上DevTools，显示控制台抽屉（就是点击Esc时呈现的那个烦人的货色），点击左下角的三个小点，关上 "Coverage"，就能够看到。

点击带有从新加载图标的按钮将刷新页面，并审核CSS和JS的应用状况。

在Google Chrome浏览器中审核初始页面时，外观如下所示：

10.定期跟踪网站速度

在你的网站速度变慢的霎时，修复网站速度问题就会容易得多。除此之外，如果你把查看网站速度作为一种习惯，那么修复网站速度慢的问题就会变成一件小得多的事件。

有收费的工具能够监督你网站的速度，其中最受欢迎的两个是WebPageTest和Google Lighthouse。这些工具的毛病是你须要记住在进行更改之前和之后都必须运行它们。

PerfBeacon是一项服务（由本文的作者创立），该服务定期运行Google Lighthouse，并让你随时跟踪网站的速度。

起源：https://dev.to/rozenmd，作者：Max Rozen，翻译：公众号《前端全栈开发者》