网站性能和健康监控：提示和最佳实践

已发表: 2022-11-01

设置和运行网站或电子商务项目非常棒 - 但是，一旦您的网站启动并运行，您的工作还远未完成。

如果没有适当的健康和性能监控，您的网站将遭受后果 - 这可能远远大于简单的加载速度缓慢。

让我们把注意力转向一个假设的、理想的场景，在这个场景中，世界上所有的网站都在正常运行。 您是否知道，除了提升用户满意度之外，我们还将为更好的环境做出贡献？

表现不佳的网站不仅会影响创建或使用它们的任何人，还会留下更大的碳足迹。

根据网站碳计算器，网站有碳足迹，平均网站页面每次浏览会排放 0.5 克二氧化碳。 这只是中位数。

当查看平均值时，也考虑到高污染网站，这个数字上升到 0.9 克。

除了全球范围内的问题外，一个不健康、性能不佳的网站会花费您的时间、金钱和收入。 网站健康与我们自己的相似：容易忽视，难以改善。

您需要了解构成网站运行状况的主要组件，以进行适当的监控实践以帮助节省处理时间。

随着快速简便的网站建设者的出现，每个人都可以访问制作网站。 您需要做的就是注册、选择一个域、选择您的模板，然后瞧！ 您在几秒钟内就有了一个网站。

然而，许多网站所有者否认网站创建只是第一步的事实。 适当的性能维护和健康监控也至关重要。

在这方面，让我们看一些基本的网站健康和性能指标：它们是什么，如何监控它们，以及如何进行改进。

监控高网站健康评分的方面

核心网络生命力

通过 Core Web Vitals 获得高网站健康评分 图片来自作者，2022 年 10 月

谷歌 PageSpeed 见解

在进行性能测试时，您应该考虑的第一个指标是您的 Core Web Vitals。 这些性能指标显示速度、稳定性和响应能力，帮助您了解网站用户体验的质量。

有几种工具可以跟踪您的核心网络指标，但许多网站所有者倾向于使用一个简单的工具：Google PageSpeed Insights。

在工具中输入您的 URL 后，您将看到一份报告，显示您是否通过了 Core Web Vitals 测试以及您需要关注的任何其他方面。 以下是您将看到的三个关键指标：

最大含量涂料 (LCP)

以2.5 秒或更少的分数为目标。

如果您的分数超过 2.5 秒，这可能表明以下情况：您的服务器滞后、资源加载时间未达到标准、您有大量的渲染阻塞 JavaScript 和 CSS，或者客户端渲染速度很慢。

首次输入延迟 (FID)

争取100 毫秒或更短的分数。

如果您的分数超过该时间，您可能需要减少第三方代码影响、减少 JavaScript 执行时间、最小化主线程工作、保持较小的传输大小以及减少请求计数。

累积版式偏移 (CLS)

以0.1 或更低的分数为目标。

如果您的分数超过此值，您可以通过在视觉和视频内容中包含大小属性来避免随机布局变化（或使用 CSS 纵横比框保留空间）。 避免重叠您的内容，并在动画过渡时注意。

页面速度拦截器

有几个因素会影响您的网站加载速度。 但是，如果您有时间预算并且想首先关注主要罪魁祸首，请密切注意以下因素：

  • 未使用的 JavaScript 和 CSS 代码。
  • 呈现阻塞的 JavaScript 和 CSS 代码。
  • 未缩小的 JavaScript 和 CSS 代码。
  • 大图像文件大小（更多内容见下文）。
  • 重定向链太多。

为了提高 JavaScript 和 CSS 文件的负载，考虑预加载它们。

另一种选择是启用早期提示，它在 HTTP 服务器响应中告诉浏览器应该利用“服务器思考时间”开始下载哪些资源，从而加快页面加载速度。

要测试您的网站：

  1. 导航到 https://pagespeed.web.dev/
  2. 输入您要扫描的页面的 URL。

我建议先选择你的主页。

另一个方便的工具是 WebPageTest.org，它还显示了您的核心 Web Vitals 和其他可以帮助您大幅提高网站性能和健康状况的指标。 而且，它是免费的！

只需将页面 URL 粘贴到网站上显示的搜索框中，它将从默认位置进行完整测试。

您还可以注册为用户并从位置列表中进行选择，以从不同的国家、设备和浏览器测试您的网站。

WebPageTest 将通过由四个关键部分组成的性能摘要向您准确显示您的网站在性能方面的位置，以及可能减慢它的速度：机会和实验、观察到的指标、真实用户测量和个人运行。

观察到的指标 图片来自作者，2022 年 10 月

在 UCRAFT，我们使用了 PageSpeed Insights、Chrome 开发工具、WebPageTest 等工具的组合，以清楚地了解我们在网站性能方面需要做什么——尤其是因为 SaaS 行业是已经很有竞争力了。

设计元素

设计元素 作者截图，2022 年 10 月

当我们考虑网站性能和健康监控时，我们通常将这些留给技术团队来处理。

但是如果我告诉你你是如何设计你的网站的，你选择的元素可以成就或破坏你的表现呢？

没错——是时候让设计团队参与进来了。

图像优化

图片很棒，但如果尺寸不合适，它们可能会减慢您的网站速度。 确保调整图像大小，并避免在它们不会完整显示时上传大文件。

同样，压缩您的图像并尝试不同的文件类型，如 WebP、JPEG 2000 和 JPEG XR，而不是选择较重的 JPEG 或 PNG 文件。

考虑实现本机延迟加载以确保在用户查看图像时加载图像，而不是一次加载所有图像。

几乎所有的浏览器，包括 Chrome、Safari 和 Firefox，都支持 <img> 或 <iframe> 上的 loading=”lazy” 属性，它告诉浏览器在用户滚动靠近它们时加载它们。

确保不要延迟加载首屏图像，因为它会降低页面的 LCP 分数，Google 建议对首屏图像使用 fetchpriority=”high” 属性来提高 LCP。

如果您使用该属性，则无需预加载图像。 您应该在首屏图像上预加载或设置“fetchpriority”属性。

此外，利用“srcset”属性的响应性来根据屏幕尺寸加载适当大小的图像，并避免在小屏幕上加载冗余的大图像。 这将极大地有助于提高 LCP 分数。

字体

对于没有 20/20 视力的用户来说，奢侈的自定义字体通常难以阅读，但它们也会大大降低您的网站速度。

切换外部托管字体以获得更多网络安全字体，并尝试使用 Google 字体——只要它们是通过 Google 的 CDN 托管的。

此外，考虑将可变字体纳入您网站的整体美感，因为此字体规范可以显着减少字体文件的大小。

确保预加载字体。

动画/附加功能

不用说：不要过度使用动画、视频、特殊效果、滑块或其他花哨的元素。

在这里和那里包含一些交互元素很好，但是用太多移动的“东西”使您的网站饱和可能会让用户和您的服务器感到沮丧。

不要使用非合成动画，因为它们会导致页面重新绘制，这会增加主线程的工作量——并且网页在加载时可能会出现视觉上的不稳定。

移动优化的 PWA 解决方案

为什么不走整个适合移动设备的路线，将您的移动网站变成一个渐进式 Web 应用程序 (PWA)？

由于 PWA 是使用服务人员构建的，因此它们以更快的速度加载缓存的内容。 不仅如此，PWA 还类似于原生移动应用程序，这对性能和 UX 非常有用。

其他技术性能指标

正常运行时间

正常运行时间显示您的网站运行状况如何。

如果您的网站经常崩溃或宕机，将会损害您的用户体验、谷歌排名，进而影响您的收入。

如果可能，目标是拥有 99.999% 的正常运行时间并从不同位置测试您的网站。

正常运行时间监控工具：

  • 状态蛋糕。
  • Pingdom。
  • 更好的正常运行时间。
  • 正常运行时间机器人。

数据库性能

如果您检查了基础知识并且您的网站仍然响应缓慢，则可能是由于数据库性能不佳。

您可以通过监视查询的响应时间并查明占用时间最多的数据库查询来检查这一点。

完成后，开始优化！ 您可以使用 Blackfire.io 等工具来帮助您轻松识别瓶颈并根据准确的数据找到解决方案。

Web 服务器的硬件

如果您的磁盘空间塞满了日志文件、图像、视频和数据库条目，您的网站可能会滞后。 确保定期监控您的中央处理器 (CPU) 负载，尤其是在您实施更新或设计更改之后。

New Relic 等工具可以帮助您通过有效的监控和调试来改进整个堆栈。

搜索可见性

上面讨论的许多指标已经对搜索可见性产生了重大影响。

因此，当您通过 Google PageSpeed Insights 运行您的网站页面并对其进行优化时，您也在为您的 SEO 做重要的事情。

您还可以选择网站抓取工具，例如 Semrush 或 Sitechecker.pro、Screaming Frog、DeepCrawl，或任何其他最适合您需求的工具。

网站爬虫有助于发现所有类型的问题，例如：

  • 断开的链接。
  • 破碎的图像。
  • 监控核心网络重要指标。
  • 重定向链。
  • 结构化数据错误。
  • 无索引页面。
  • 缺少标题和元描述。
  • 混合内容。

当涉及到以下几点时，请确保您已准备就绪：

  • XML 站点地图– 确保您的站点地图格式正确，并检查是否有必要进行任何更新并通过 Google Search Console 重新提交您的站点地图。
  • Robots.txt – 确保为您的网页使用 robots.txt 文件（HTML、PDF 或任何其他搜索引擎可以读取的非媒体格式）以更好地管理抓取流量，尤其是当您怀疑您的服务器可能被以下内容淹没时来自 Google 抓取工具的请求。

网站安全和缓存

获取您的 SSL 证书！

一个健康的网站是一个安全的网站。

即使您的网站在完美的时间加载并获得 100/100 的分数，如果它不以 https:// 开头，用户（或搜索引擎）也不会信任您的网站。

SSL 证书本质上是您服务器上的代码，用于建立加密连接，确保用户数据保持安全。

获取 SSL 证书并不是一个特别困难的过程，但手动完成可能会很漫长。

但是，如果您使用的是成熟的托管服务提供商，例如 BlueHost，通常情况下，您的提供商将能够为您的域颁发免费的 SSL。

考虑使用 CDN

内容交付网络 (CDN) 是协同工作以交付快速互联网内容的分布式服务器。

换句话说，CDN 是一种工具，它通过将其内容保存在靠近用户的服务器上来提高您网站的性能，而不管地理位置如何。 这也称为缓存。

如果您的业务遍及全球，CDN 是必须的！ 它将提高您的页面加载速度，降低您的带宽成本，分散您的流量（减少您的网站崩溃的机会），并通过 DDoS 缓解等功能提高安全性。

该行业的顶级参与者包括 Cloudflare、Amazon Cloudfront 和 Google Cloud CDN。 但是，还有许多其他选择，因此请根据您的网站和业务需求进行研究并选择最佳 CDN。

设置 Web 应用程序防火墙

Web 应用程序防火墙 (WAF) 通过过滤掉可疑的 HTTP 流量来保护 Web 应用程序。 它旨在防止应用程序受到以下攻击：

  • 跨站伪造。
  • 跨站点脚本 (XSS)。
  • 文件包含。
  • SQL注入。

以下是最流行和最受信任的 Web 应用程序防火墙列表：

  • Cloudflare WAF。
  • GoDaddy 防火墙。
  • 微软天青。

或者，如果您使用 WordPress，则可以考虑安装插件，例如：

  • 字栅栏。
  • 苏库里。
  • 多合一安全性 (AIOS)。

判决

这是一个包装！ 如您所知，网站性能和健康状况取决于各个方面。

如果您的网站滞后，第一个合乎逻辑的步骤是检查您的 Core Web Vitals 并查看您可以改进的地方。 您还可以查看其他技术指标并对其进行改进。

SEO 对您网站的健康也很重要，因此请检查您的搜索可见性、链接和潜在的负载拦截器，看看您可以改进哪些方面。

并且不要忘记您的 SSL 证书和缓存。

您的网站设计也会影响您的加载速度和性能，特别是如果您或您的设计师喜欢使用重量级的设计元素。

请记住优化您的图像，避免使用大字体，并适度使用动画。

更多资源：

  • 如何使用 Chrome 用户体验报告来提高您的网站性能
  • 增强 Google 展示广告网络性能的 6 个技巧
  • 高级技术 SEO：完整指南

特色图片：JulsIst/Shutterstock