如何诊断和修复加载缓慢的网站

目录

如何测试您网站的加载速度

测试您的桌面网站

测试您的移动网站

如何保持您的网站快速加载

媒体

编码

特性和功能

第三方内容

CMS管理系统

托管

结束语

---

您可以做些什么来确保您网站最重要的页面始终尽可能快地加载？定期进行速度测试并保持网站的良好性能维护将大有帮助。

您或您的客户可能已经注意到页面的加载速度不如您网站上应有的速度。或者，更糟糕的是，访问者或客户向您抱怨页面速度问题。

那么，在诊断问题方面，您从哪里开始呢？

首先运行性能扫描。有各种工具可以帮助您找到问题的根源。但不要止步于此。网站不会只是放慢速度一次，修复然后以最佳速度运行。它们需要持续的测试和维护。

在这篇文章中，我们将看看这些速度测试工具的作用，以及如何使用它们来解决即时的页面加载问题。然后，我们将分解您可以采取的不同措施，以保持您的网站以最高速度运行。

如何测试您网站的加载速度

您可以使用许多免费工具来分析网站的性能。我们将使用 GTmetrix 来测试桌面网站的速度，并使用 PageSpeed Insights 来测试移动版网站的速度。

测试您的桌面网站

如果您想诊断桌面网站的问题，GTmetrix是一个不错的选择。以下是您将在效果报告中看到的内容：

摘要告诉并显示网页的加载速度。它还为您提供基于Lighthouse的性能分数。

这些选项卡可显示有关页面性能的更多详细信息。

性能提供了加载指标的细分，例如首次内容绘制、交互时间和速度指数。

结构提供了有关如何提高速度的提示。它侧重于以下方面：

• 图像格式和大小
• 渲染阻塞资源
• 未使用的CSS和JavaScript
• 第三方代码
• 大型查询

如果您的网页现在加载缓慢，那么这就是您开始的地方。检查标记为有影响的项目（低、中或高），并进行建议的维修。

瀑布流显示页面必须处理的每个HTTP请求的明细、请求的大小以及检索每个请求所需的时间。一旦紧急项目被修复，这个列表就是你接下来应该做的事情，因为它会指出页面中可以从更大优化中受益的区域。

除了显示哪些资产的加载时间最长之外，此选项卡还将显示是否有不必要的资产或脚本会减慢速度。如果您希望减少HTTP请求的数量，它也会派上用场。如果您有重要的特性或功能，这些特性或功能很好，但并不重要，您可能需要完全删除它们。

测试您的移动网站

现在，在桌面上为用户提供一个快速的网站非常重要。但是，如果您完全担心加载缓慢的页面如何影响您的SEO（确实如此），您还需要使用PageSpeed Insights运行速度测试。

PageSpeed Insights将移动体验放在首位。因此，虽然您可以使用此工具在桌面上分析和解决问题，但您应该密切关注移动速度结果，因为您不会在GTmetrix或其他速度测试工具（如Pingdom）中找到它们。

以下是移动页面速度分析的样子：

除了分析桌面和移动速度外，此工具还可以解决辅助功能、搜索优化、响应能力等问题（所有页面体验更新的一部分）。

PageSpeed Insights的速度分析类似于您在GTmetrix的摘要、性能和结构选项卡下找到的内容。

不仅数据类型相似，建议也相似。我在桌面网站上收到的许多反馈都与移动网站重叠。但是，它并不完全相同，因此使用这两种工具非常重要，这样您才能提高所有设备的性能。

与GTmetrix相比，这份报告中唯一缺少的是瀑布。但是，如果您向上滚动到您站点的延时图像并单击查看树状图，您将找到以下来自Lighthouse的视觉和表格分析：

此页面向您展示页面上的JavaScript捆绑包的情况。可视化效果很有帮助，因为它可以帮助您快速确定哪些资源消耗的资源最多。

此报告还显示哪些脚本具有未使用的字节。未使用的字节是有问题的，因为它们会消耗服务器资源，而这些资源可以被页面上的其他资产使用，从而使页面的加载时间比加载时间更长。发生这种情况是因为那里有旧的和未使用的代码。当不需要加载的代码在页面首次出现时实际可见且处于活动状态的组件之前加载时，也会发生这种情况。

如何保持您的网站快速加载

您可以在GTmetrix和PageSpeed Insights中找到的建议列表对于解决您目前遇到的速度问题非常有用。除了定期测试您的网站速度并实施建议的修复程序外，您还应该将性能维护养成例行习惯。

如果您正在寻找保持网站快速加载的方法，可以使用以下清单来锁定常见的性能干扰因素并修复它们：

媒体

• 尽可能将图像保存为WebP和AVIF等下一代格式。
• 调整网站上指定空间的图像大小。
• 压缩图像。
• 实现延迟加载。
• 将多个视频上传到一个页面时，请将它们托管在YouTube或Vimeo上。
• 从服务器中删除未使用的媒体文件。
• 使用系统字体与将它们上传到服务器。

编码

• 使用gzip压缩。
• 缩小所有文件。
• 先加载样式表，然后再加载其他所有内容。
• 删除未使用的CSS和JavaScript。
• 删除阻塞渲染的CSS和JavaScript。
• 实现JavaScript文件的异步加载。

特性和功能

• 首先创建一个最小可行产品。
• 使用移动优先的心态设计网站。
• 将每个页面上的HTTP请求数限制为30个。
• 禁用无休止滚动。
• 尽量减少Cookie。
• 避免实现重定向。
• 当流量变慢或消失到原始页面时，删除页面重定向。
• 避免使用过多的页面过渡、动画和交互。

第三方内容

• 限制连接到站点的外部元素和API的数量。
• 如果显示外部广告，请限制每个页面上的展示数量。
• 或者，将广告发布为带有链接的图片。
• 使用彼此兼容的第三方集成。
• 删除未使用或不必要的插件或扩展。
• 用可比且更快的解决方案替换缓慢的扩展。

CMS管理系统

• 实现网站缓存。
• 使用“过期”标头，以便浏览器知道何时放弃缓存的内容。
• 保持内容管理系统软件的更新。
• 保持所有第三方主题和扩展程序的更新。
• 每年清理几次数据库。

托管

• 使用为您的网站类型和预期流量构建的虚拟主机。
• 随着流量的增长扩展服务器容量。
• 为高流量时段（如节假日）准备服务器。
• 实现服务器端缓存。
• 保持PHP更新。
• 将CDN用于高流量的全球网站。
• 设置实时性能监控。

结束语

没有人愿意等待超过几秒钟才能加载网页，尤其是当它是网站的主页时。与其等待访问者抱怨，或者更糟糕的是，由于网站加载缓慢而导致跳出率飙升，不如将性能放在首位。

每隔几个月安排一次速度测试和维修，以确保您解决最关键的问题。然后，每年至少一次，使用上面的清单进行审核。即使您的网站在PageSpeed Insights的GTmetrix上获得了及格分数，您也总能找到让最重要的页面加载速度更快的方法。

https://www.telerik.com/blogs/how-diagnose-repair-slow-loading-website