一、为什么要重视网站加载速度

网页加载时间较长会严重影响跳出率

Google的报告指出：

如果网页加载时间从 1 秒增加到 3 秒，跳出率就会提高 32％

如果网页加载时间从 1 秒增加到 6 秒，跳出率就会上升 106％

二、如何检测网站的加载速度

1.PageSpeed Insights

在这里可以查看到移动端和桌面端的加载速度，还有优化建议，按照优化建议对相应的页面，进行优化。

图片来源：pagespeed insights

这里的分值可以看到你的网站的加载速度评分：红色表示差，橙色表示中等，绿色表示良好。

图片来源：1.PageSpeed Insights

往下会有优化建议，按照这里的优化建议提示，对可优化的网址页面进行优化。

图片来源：1.PageSpeed Insights

2.gtmetrix.com

在这里可以看到我们网站桌面端的加载速度，并且给出一些优化建议。红色表示差，橙色表示中等，绿色表示良好。

图片来源：gtmetrix.com

三、网站加载速度缓慢的原因

在GSC的核心网页指标里面可以看到我们桌面端和移动端页面加载的一些问题:

1.FCP问题（首次内容绘制-用户从页面开始加载到看到页面第一个内容元素的时间）;

2.LCP问题（最大内容渲染-用户打开网站看到页面最大元素所需要的时间）

3.FID问题（首次输入延迟-用户第一次与网页互动，浏览器的响应时间）

4.CLS问题（累计布局偏移-网页元素发生的意外偏移）等。

图片来源：google帮助中心

图片来源：GSC

在网站加载速度的评分中，LCP和TBT(FID)的权重最高，我们可以重点关注这两个指标。

图片来源：Google帮助中心

导致LCP不佳的原因有：

（1）缓慢的服务器响应速度；（2）JavaScript 和 CSS加大渲染时间；（3）缓慢的资源加载速度；（4）客户端渲染缓慢等。

导致TBT(FID)不佳的原因有：

图片来源：google开发工具（1）繁重的JavaScript 执行；（2）javaScript的执行时长；（3）第三方代码阻碍主线程执行等。

四、如何提高网站加载速度

（一）优化LCP

1.提升服务器响应速度（优化首字节时间）

（1）优化的服务器，使得服务器可以在浏览器请求时立即提供静态页面。

（2）使用CDN，将用户分布到附近的 CDN，近距离的服务器网络可以加快网络速度。

（3）浏览器缓存，使用浏览器缓存可以减少首字节时间，优先使用缓存提供 HTML 页面。

（4）尽早建立第三方连接，第三方域的服务器请求也会影响 LCP，使用rel="preconnect"来告知浏览器你的页面打算尽快建立连接。

2.减少阻塞渲染的JavaScript 和 CSS

（1）减少 CSS 阻塞时间，削减 CSS；延迟加载非关键 CSS；

（2）减少 JavaScript 阻塞时间，削减和压缩 JavaScript 文件；延迟加载未使用的 JavaScript；

（3）最大限度减少未使用的 polyfill。

3.提高资源加载速度

（1）优化和压缩图像

a.首先考虑不使用图像。如果图像与内容无关，则将其删除；b.压缩图像到一定尺寸（使用 Imagemin）；c.将图像转换为更新的格式（JPEG 2000、JPEG XR 或 WebP）；d.使用响应式图像，自适应桌面和移动端图像；e.考虑使用图像 CDN内容分发网络。

（2）预加载重要资源。使用来更加及时地获取该资源。

（3）压缩文本文件。 Gzip 和 Brotli 对HTML、CSS、JavaScript进行压缩。

（4）自适应服务。根据网络连接的具体情况，展示不同界面内容。

（5）使用 Service Worker 缓存内容。

4.提升客户端渲染

如果你搭建的是客户端渲染网站，那么要注意优化提升客户端渲染时长。

a.减少 JavaScript阻塞时长；b.使用服务端渲染；c.使用预渲染；

（二）优化FID（TBT）

FID的优化指导就是改善总阻塞时长（TBT）

1.减少第三方代码的影响

a.按需加载第三方代码；b.减少非必要的第三方代码、脚本；

2.减少页面的javaScript

a.减少单个页面的JavaScript 数量；b.分割长任务的JavaScript；

3.减少javaScript的执行时长

a.延迟加载未使用的JavaScript；

Chrome 开发者工具中的代码覆盖率选项卡能够告诉你网页上有多少未在使用的 JavaScript。