DTC独立站跳出率优化到50%以内的6实用工具

本文将重点从网站性能角度进行一些科普性的解释说明，并为您推荐一些自检方案和工具。

什么是跳出率、如何计算？

跳出指访问者只查看了单个页面（落地页）就离开了网站，通常以百分比形式呈现，其计算公式如下：

跳出率常被用来衡量用户对网站内容的互动程度。

跳出率高一定不好吗?

根据Ptengine全球20万客户网站数据统计， 大多数网站的跳出率在25%至70%之间。

网站的跳出率高并不一定是用户体验差的表现，也需要结合其他因素综合衡量。如果用户能在落地页中完成计划内的交互动作，那么跳出率高是正常的；博客页面的跳出率也普遍相对更高一些。从行业上看，不同行业对跳出率的容忍度也不同。例如，DTC独立站的跳出率需要优化到50%以内。

网站性能和跳出率

网站性能主要指网站的加载速度。加载速度快的网站能让用户更快地浏览页面内容和完成所需的操作，而加载速度慢则可能导致用户失去耐心，甚至直接关闭网页，从而导致高跳出率的发生。

调研数据显示，用户对网页加载时间的耐心通常只有3秒钟。超过这个时间，用户跳出的可能性就会大大增加。

用户访问网站时，会经历这个过程：用户通过浏览器发送网页请求（输入网站域名）——等待服务器响应并发送网页内容——浏览器下载页面（即index.html文件）、用户看到内容。

浏览器下载的index.html文件通常会包含以下内容：

• 一个指向样式表的<link>标签：用于引用外部CSS文件，定义网页的样式和布局。
• 两个引用JavaScript文件的<script>标签：用于引用外部的JavaScript文件，实现网页的交互和动态功能。
• 一个引用图像的<img>标签：用于插入网页的图片。

当浏览器遇到这些文件引用时，会发出新的HTTP请求来获取它们。最初的网页请求会转变为多个请求，其中包括样式表文件和JavaScript文件的请求，还有图片文件的请求。虽然5个请求看起来可能不算多，但典型网站的请求数量通常会是其10倍甚至更多，特别是复杂的网站可能拥有上百个请求。

随着请求数量的增加，需要下载的数据量也会增加。随着请求及其所携带数据的增加，页面加载所需的时间也会随之增加。加载步骤如下图所示：

使用如下工具对网站性能进行评估

Google PageSpeed Insights

Google PageSpeed Insights是一个工具，它可以分析网站的性能，并提供改进网站性能和用户体验的建议。它会执行两次分析：第一次使用移动用户代理，第二次使用桌面用户代理，以评估在不同设备上的加载情况。

PageSpeed Insights在分析性能时考虑了两个关键因素：

1. 首屏内容：即用户访问网页后立即可见的内容。这包括首屏内的文本、图像和其他资源。通过优化首屏内容的加载速度，可以让用户快速看到网页上最重要的信息，提高用户体验。

2. 整个页面的加载时间：这是指完全加载整个网页所需的时间，包括所有资源（如样式表、JavaScript文件、图像等）的下载和处理时间。通过减少请求次数、优化资源大小和使用缓存等技术手段，可以减少页面加载时间，提高整体的性能和用户体验。

PageSpeed Insights会根据分析结果为您提供相关建议和优化提示，帮助您改善网站性能并提供更好的用户体验。您可以根据这些建议进行适当的调整和优化，以提高网站的加载速度和性能。

使用浏览器评估网站

桌面浏览器都配备了一套开发者工具，这些工具提供了丰富的功能，可以帮助开发人员进行网页开发和性能优化。虽然不同浏览器的开发者工具在细节上可能有所差异，但总体上它们的功能相似，可以相互补充。

在任何浏览器中，打开开发者工具的方法基本相同。以下是一些常见的快捷键操作：

• 在 Windows 系统上：可以使用 F12 键来打开开发者工具。
• 在 Mac 系统上：可以按下 Cmd+Option+I 组合键来打开开发者工具。

此外，也可以通过浏览器菜单或右键菜单中的相应选项来打开开发者工具。

检查网络请求工具

TTFB（首字节时间）的长短取决于请求的每个步骤所花费的时间，包括用户发出请求到响应到达的时间。网络条件、服务器性能以及应用程序后端问题等因素都可能导致TTFB较长。如果开始下载内容的时间越长，用户等待的时间就越长。

要了解请求所花费的时间，可以在浏览器中查看其完成情况。在大多数浏览器中，可以按照类似的步骤找到这些信息。优化TTFB的方法可以包括优化网络连接、提高服务器性能以及优化应用程序后端等措施。

渲染性能检查工具

用户访问网站时，浏览器将解析HTML和CSS，并将其渲染到屏幕。下图显示了这个过程的基本情况

使用Chrome的Performance面板可以记录页面的加载、脚本执行、渲染和绘制活动。乍一看会让人望而生畏，但不用担心，可以慢慢了解并使用它来识别性能问题。

模拟和监控设备

作为网站运营人员，我们通常需要在桌面环境中对网站进行初始测试。然而，为了确保网站在移动设备上有良好的外观和性能，我们还应该使用一些工具进行进一步的测试。

这些工具可以模拟网页在移动设备上的外观，以及在实际物理设备上的外观。其中一个常用的工具是浏览器的设备模拟模式，如Chrome浏览器的开发者工具中的设备模拟功能。通过选择不同的设备类型，可以模拟页面在不同屏幕尺寸和设备上的外观。这有助于检查网站在不同设备上的响应式布局和样式表的表现，并进行必要的修复和优化。（下图是在Chrome中使用设备模拟模式查看Ptengine.com）

弱网环境网页加载体验测试

在Chrome浏览器中，我们可以使用网络节流工具来模拟某些互联网连接，如3G或4G连接。这对于在特定情况下评估网页加载时间非常有价值。

当然也可以通过自定义设置网速来查看网页的加载体验：

网站性能优化点

优化网站性能的目标非常简单：减少传输数据量。这样做可以显著减少网站在任何设备上的加载时间，不仅适用于HTTP/1服务器，也适用于HTTP/2服务器。以下是一些优化技巧，可帮助您实现这一目标：

• 缩小网站资源，包括CSS、JavaScript和HTML本身。使用CSS和JavaScript压缩工具可以减小文件大小并提高下载速度。此外，删除不必要的代码和空格，或者将其合并到单个文件中可以减少额外的HTTP请求。对于HTML本身，删除注释和不必要的标记可以减小页面大小并加快加载速度。
• 优化网站上的图像，在不损害其视觉完整性的前提下降低其大小。这包括使用现代图像格式（如WebP，JPEG2000和AVIF）代替老旧的格式（如JPEG和PNG），并使用压缩图像以减少文件大小。另外，懒加载图片可以仅在需要时才加载图片，减少页面的初始负载时间。

• 在服务器上压缩文本资源，包括HTML、CSS和JavaScript。可以使用Gzip或Brotli等压缩算法，将文本文件的大小减小到原始大小的一半或更少。这可以显著提高页面加载速度，并减少传输数据量。

以上这些优化技巧可以帮助您减少网站传输的数据量，并进一步提高网站的性能。