优化网站加载时间（GTmetrix）

news/2024/5/10 14:18:59/文章来源:https://blog.csdn.net/u012117710/article/details/78843640

首先，看下页面加载时间轴

1.URL重定向时间（Redirect duration）

包括：

Redirect from a non-www to www (eg. example.com to www.example.com)
Redirect to a secure URL (eg. http:// to https://)
Redirect to set cookies
Redirect to a mobile version of the site

说明：一个网站可能会执行多个重定向链，这个时间为总时间；如果没有重定向，则为0。在Waterfall Chart中， Redirect duration consists of the time from the beginning of the test until just before we start the request of the final HTML page (when we receive the first 200 OK response).

优化：During this time, the browser screen is blank! Ensure that this duration is kept to short by minimizing your redirects.（即通过减少重定向）

2.连接时间（Connection duration）

包括：Technically speaking, this duration is a combination of the blocked time, DNS time, connect time and sending time of the request (rather than just connect time). （即阻塞时间+DNS时间+连接时间+发送请求时间）

说明：In the Waterfall Chart, Connection duration consists of everything up to and including the "Sending" time in the final HTML page request (the first 200 OK response).（即第一个200OK的发送时间）

优化：一般时间很短，无优化！

3.后端持续时间（Backend duration）

包括：后端处理数据的时间

说明：In the Waterfall Chart, Backend duration consists of purple waiting time in the page request.（后端响应时间）

优化：后端代码优化（重中之重）

推荐：Why is my page slow?

4.接收到第一个字节的时间（Time to First Byte (TTFB)）

包括：Redirect duration+Connection duration+Backend duration（顾名思义，前三个时间的加和）

说明：In the Waterfall Chart, it is calculated at the start of the test until just before receiving on the page request and represented by the orange line.（即从开始测试到页面接收到响应的时间）

优化：优化应用程序代码，实施缓存机制，微调Web服务器配置或升级服务器硬件。

5.DOM交互时间点（DOM interactive time）（不重要）

说明：与下面的DOM内容加载时间点非常接近，没有标记

6.DOM内容加载时间点（DOM content loaded time）

说明：如果没有阻止JS执行样式并且没有解析器阻止JS，它将于上面的DOM interactive time 相同

许多JavaScript框架使用这个时间点作为开始执行他们的代码的起点。

优化：由于这个时间经常被js用作起点，并且这个时间的延迟代表着延迟渲染，故确保样式、js的加载顺序和js延迟是非常重要的

推荐： style and script order is optimizedand that parsing of JavaScript is deferred.

7.第一次渲染时间点（First paint time）

说明：在这一时间点前，浏览器将只显示一个空白页面

8.第一个内容被渲染完时间点（First contentful paint time）

说明：当任何内容被渲染时，可以是文本，图像或画布渲染。目的是为了更好的体现用户的体验，因为它会在实际的内容被加载到页面上时进行标记，而不仅仅是任何改变 - 但是通常可能与First Paint相同。所以这个指标是让你了解你的用户什么时候收到消费信息（文本，视觉等） - 对于性能评估来说，比背景改变或者应用风格更有用。如果浏览器没有执行渲染（即HTML结果为空白页），则渲染时间可能会丢失。