如何提高网站的加载速度

@ 为什么要注意网站的加载速度

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

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)坏的原因有：

(1)重JavaScriptt 执行；

(2)JavaScript的执行时间；

(3)第三方代码阻碍主线程执行等。

图片来源：谷歌开发工具

@ 如何提高网站的加载速度

(一)优化LCP

1.提高服务器响应速度(优化首字节时间)

(1)优化服务器，使服务器在浏览器请求时能够立即提供静态页面。

(2)使用CDN将用户分布在附近 CDN，近距离服务器网络可以加快网络速度。

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

(4)尽快建立第三方连接，第三方域的服务器请求也会影响 LCP，使用rel=“”preconnect“告诉浏览器你的页面计划尽快建立连接。

2.JavaScriptt减少阻塞渲染和 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.JavaScripttt减少单页数量；

b.JavaScripttt分割长任务；

3.减少javaScript的执行时间

a.JavaScripttt推迟加载未使用的JavaScript；

b.JavaScript精简未使用。

Chrome 开发人员工具中的代码覆盖选项卡可以告诉你有多少未使用的页面 JavaScript。

图片来源：谷歌开发工具

4.使用wed worker

Web worker可以让 JavaScript 在后台线程上运行。将非用户界面操作移动到单独的工作线程上，以减少主线程的阻塞时间。

5.最小化主线程工作

当网站忙于主线程时，可能无法快速响应用户的互动，导致用户体验不佳。

a.优化第三方JavaScriptipttpt；

b.避免布局大、复杂；

c.缩小CSS，推迟非关键字CSS；

d.拆分减少 JavaScript 负载；

e.删除未使用的代码。

(3)优化网站加载速度的重要方法

1.优化图片

(1)使用正确的图片格式， PNG、JPEG 或 WebP，webp更好；

(2)使用适当大小的图像，使用imagemin压缩图像，或使用其他图像压缩插件进行压缩；

(3)用视频代替GIF。如果网页上有GIF，尽量转换成视频，GIF动图可能占流量的很大比例；

(4)使用响应图片浏览不同的设备；

(5)使用CDN图片，减少图片文件的传输；

(6)延迟加载屏幕外图像，使用lazysizesese codelab 屏幕外图像延迟加载。

2.优化视频

(1)延迟加载视频，页面上的视频，尤其是屏幕外的视频，可以延迟加载，从而提高页面的加载速度；

(2)使用YouTubee等视频外部托管平台、Vimeo或Wistia，节省空间，加快加载速度。

3.优化 CSS

(1)非关键CSS延迟加载；

(2)缩小CSS；

(3)删除未使用的 CSS；

(4)提取关键CSS。

使用 Chrome DevTools Coverage中的Coverage 选项卡识别非关键 CSS 和 JS。绿色(关键)，红色(非关键)。

图片来源：Chrome DevTools

4.优化 JavaScript

(1)延迟加载大型JavaScript文件，以确保您的其他内容能够立即加载；

(2)通过代码拆分减少 JavaScript JavaScriptt负载，长任务加载速度较长；

(3)删除未使用的代码；

使用 Chrome DevTools Coverage中的Coverage 选项卡识别哪些代码是关键，哪些代码是未使用的。点击查看细分代码。

图片来源：Chrome Devtols图片来源：Chrome DevTools

(4)使用现代码加速页面加载。

5.预加载重要资源

(1)使用内容交付网络；

(2)关键资源的预加载；

(3)提前建立网络链接。

6.优化第三方资源

(1)减少各种插件、聊天工具等不必要的第三方代码；

(2)阻止第三方JavaScriptt；

(3)第三方JavaScript必须高速加载。

7.优化网站字体

使用不同浏览器和设备的系统字体，以减少字体的下载时间。

8.避免多页重定向，重定向会减慢页面加载速度

使用screamingfroggggg.co.uk检查我们的重定向页面，查看哪些页面的重定向是必要的（包含，反向链接，显示点击），不必要的可以直接删除，减少额外的重定向 HTTP 请求。

9.使用 Facade 第三方资源(外观)延迟加载

不要直接添加第三方嵌入 HTML 可采用视频嵌入、社交按钮小部件和聊天小部件 facade 模式，延迟加载这些第三方元素，提高页面的加载速度。

10.使用浏览器缓存

使用浏览器缓存。当用户第一次浏览您的网站时，网站的数据将缓存在浏览器临时存储中。当用户再次访问时，浏览器可以在不发送另一个服务器的情况下加载页面 HTTP 请求。

禁止未经授权转载！！

@ 为什么要注意网站的加载速度 网页加载时间长，严重影响跳出率 Google报告指出： 假如网页加载时间从 1 秒增加到 3 第二，跳出率会提高 32％ 假如网页加载时间从 1 秒增加到 6 几秒钟，跳出率就会上升 106％