我如何让我的网站加载速度提高 18%

15 分钟可以节省 15% 或更多的性能

性能问题常常被拖到项目末期才解决，而此时实施起来往往困难重重。尤其是在 Web 开发领域，由于平台数量和网络连接数量众多，性能始终是需要考虑的因素。最近，我深入研究了我的网站性能，将首次内容绘制 (FCP)时间提高了 3.6 秒。我想分享一下我使用的一些工具，以及在这个过程中发现的最佳实践。

最佳实践

以下是一些常见问题的简短列表，修复这些问题后，可以帮助您提高网站加载过程中涉及的几个指标：

推迟屏幕外图像

为了在关键加载时间节省带宽，您可以推迟屏幕外的图像的加载。

以下一代格式提供图像

PNG 和 JPG 并非 Web 上的最佳图像格式。然而，JPEG 2000、JPEG XR 和 WebP 图像格式相比旧版图像格式，拥有更佳的压缩率和质量特性。

提供正确的图像尺寸

虽然可以使用 html 和 css 裁剪图片，但从长远来看效率低下。正确的做法是提供页面所需的正确尺寸和分辨率的图片。

注意依赖关系，如果可能的话推迟

通过<script src=””>标签加载依赖项可能会带来许多潜在的性能问题。有时很难确切地理解该行代码的具体内容以及它对时间的影响。请使用调试工具来测量负载，如果未使用，则将其移除。您还可以使用 defer 和 async 标签来抵消一些问题。

工具

以下是对开发和测试有用的工具列表：

• Lighthouse Measure将网页性能分解成易于理解的指标。它还提供了大量的常见问题修复参考。
• S harp npm 包和ImageMagick CLI 工具可用于将图像裁剪为正确的尺寸和纵横比。
• Webp Convertor是一款 Mac 工具，可让您将 JPG/PNG 转换为 Webp
• Visual Studio Code是跨平台代码编辑器，如果您进行任何 Web 开发，它是必不可少的。
• 内置的网站开发工具必不可少。无论您使用的是 Chrome、Safari、Firefox 等浏览器，熟悉它们内置的开发工具来衡量网站的性能都是一个好主意。
• Google PageSpeed Insights是一项分析网页内容并生成建议以加快网页加载速度的服务。缩短页面加载时间可以降低跳出率并提高转化率。

分析结果

Lighthouse 能够很好地将结果分解成易于理解的方式，但结果是否符合您的预期则取决于您自己。大多数浏览器内置的工具足够详细，可以让您很好地了解页面的运行情况。性能数据总会有一定程度的解读，但务必牢记您的网站提供的内容类型。在我看来，首次内容绘制时间和可交互时间是页面加载时最重要的因素，但在某些情况下，这可能并非首要考虑因素。

因此，请行动起来，让您的网站性能更佳！