Products
GG网络技术分享 2025-03-18 16:05 0
页面加载时间始终是 Web 开发人员关心的问题，尤其是当您发现使用自定义图像、动态内容和更多视频来打动访问者的新方法时。
这是因为随着每项新资产的添加，您的网站必须生成额外的 HTTPS 请求才能与访问者的浏览器进行通信。 而这些 HTTPS 请求会逐渐减慢您的网站……方式 哇哇哇 向下。
本指南将介绍 HTTPS 服务器请求是什么，您应该使用哪些工具来跟踪它们，以及您可以在 WordPress 中减少这些请求的方法。 继续阅读，或使用以下链接跳转：
没有什么比用户体验更重要的了。 这就是激发访问者订阅您的博客、购买您的产品或联系以获取有关您的服务的更多信息的原因。
任何会损害这种体验的东西——即使它只是一个需要几秒钟时间才能加载的网页——都会危及你的转化率。
因此，以下是您需要了解的有关 HTTPS 服务器请求及其发生原因的信息：
每次有人访问您的网站时......从头开始。 每次有人访问 一 您的网页（并考虑您的网站上有多少），他们的浏览器向您的网站发出请求：
“嘿，呃，你能把你网站上的所有文件发给我吗？这样我就可以和你的潜在访问者/读者/客户分享这些文件了吗？”
然后，您的网站有责任发送您网站所包含的每个文件。 这包括文本、图像（通常是大多数文件）、视频嵌入、CSS 和 JavaScript 文件，甚至出现在您的评论提要中的 Gravatar 图像。 每个文件接收一个 分离 服务器请求。
处理完所有服务器请求并将文件传输到浏览器后，您的网站就可以加载到访问者的屏幕上。 但是，如果您的 WordPress 网站有数十甚至数百个文件要发送到访问者的浏览器，您认为这对页面加载时间有什么影响？
没什么好的。
随着您的网站越来越受欢迎并同时接收 HTTPS 服务器请求，这种情况会呈指数级增长。 举个例子：如果必须等待超过 3 秒才能加载页面，40% 的人会失去对网站的耐心。 Kissmetrics 还报告说，当访问者与之互动时，页面响应延迟一秒可能会导致高达 7% 的转化成本。
因此，如果您希望这些加载时间保持活力，您需要找到一种方法来减少需要将多少文件传输到浏览器。
那么解决方案不是使用更少的图像或动态内容，或者将您的设计变得如此简单以至于它非常无聊。 而文件的大小和 数量 文件很重要，有办法在 WordPress 中解决这个问题。
谢天谢地，这里没有必要玩猜谜游戏。 这不像您的访问者正在看到死亡的白屏，而您不知道是什么原因造成的。 有许多工具可以帮助您跟踪网站加载时间中延迟时间的来源。
以下是一些更可靠（和免费）的：
如果您想深入了解每个元素和文件在您的 WordPress 网站上执行多长时间，请花点时间在 Chrome 浏览器窗口中打开它。 在那里，导航到名为“开发人员工具”的设置选项卡。
屏幕右侧将打开一个新面板。 单击“网络”选项卡，您将能够从此处查看页面上发生的情况。
您甚至可以更深入地了解各个元素的时间安排，看看是否有特别的一件事阻碍了其他所有事情。
当然，这不是 Google 提供的唯一可帮助您检测 HTTPS 服务器请求问题的工具。 理想情况下，如果您使用的是开发人员工具，您的工具库中也应该有 PageSpeed Insights。
通过该工具运行网站后，您将收到网站移动性能和桌面性能的结果。
这些评估中的每一个都将为您提供 100 分的性能表现，然后将为您提供有关如何优化您的网站以提高性能的提示。
GTmetrix 是另一种页面速度评估工具，可为您提供网站的性能分数。
然而，GTmetrix 处理这个问题的方式比谷歌更全面——也更让人放心。 因此，尽管您可能会看到黄色或红色的分数（这不好），但您可以将鼠标悬停在每个数据点上以查看平均分数和加载时间。 这将使您更真实地了解您的页面的执行情况。
在来自 GTmetrix 的评估中，您将收到有关如何优化页面以提高速度的标准提示。 每个提示旁边都会有一个相应的分数，让您知道您在哪些方面做对了，以及哪些方面有待改进。 如果您想在那些较弱的领域获得更多帮助，只需单击向下箭头，GTmetrix 就会告诉您哪些文件可以使用一些工作。
Pingdom 在工作方式和提供的信息方面与 GTmetrix 非常相似。
这两种工具之间的主要区别可能是它提供结果的速度。 哦，界面看起来更好看。
否则，您将从两个站点收到几乎完全相同的评估——如果您想节省评估站点问题的时间并希望缩小无效的范围，这正是您所需要的。
我也想把 WebPageTest 扔在这里。
虽然该站点有点笨拙，并且结果不像其他一些工具那么容易阅读，但我喜欢用于显示每个文件加载所需时间的条形图。
虽然此页面上可能有大量数据并且没有关于如何解决特定减速问题的提示，但我仍然认为较重元素的可视化是很好的。 您始终可以将其与 Google 的开发者工具结合使用，以缩小您网站上存在问题的元素的范围。
既然您知道如何识别网站上的问题区域，那么让我们谈谈如何将首要问题扼杀在萌芽状态：减少 WordPress 网站的 HTTPS 服务器请求数量。 以下是您现在可以做的 9 件事，以将它们保持在一个更合理的数字：
我并不是说您需要为了减少 HTTPS 服务器请求而开始牺牲图像。 相反，我认为你应该专注于让你的媒体库保持超级干净的形状。 因此，如果您不使用某些图像（即使您希望将来使用它们），请丢弃它们。 他们除了增加额外的重量和您的网站不需要的服务器请求之外什么也没做。
您可能会对在上面的页面速度评估工具中发现的内容感到惊讶。 他们可能会告诉您，不是图像引起了问题，而是社交媒体提要插件或嵌入式视频之类的东西。 如果您的网站上有任何您认为不必要的内容并且导致臃肿，请将其废弃。 这包括您已安装但目前未使用的插件和主题。
你必须做的另一件事是什么？ 获取 WP Smush 插件并自动压缩您网站的图像。 如果您想在您的网站上保留那些精美的高分辨率图像并保持质量不变，那么您需要压缩它们。
使用 CSS，您可以创建所谓的 CSS 图像精灵。 基本上，这个 CSS 文件会将您的所有图像文件合并为一个。 使用 W3 Schools 的本指南创建您自己的指南。
你听说过延迟加载吗？ 如果没有，请看一下 Raelene Morey 的这篇文章。 基本上，这些插件仅在用户向下滚动到页面上的图像时发送服务器请求。 这使您的网站不必向浏览器发送不必要的 HTTPS 服务器请求，以获取访问者甚至从未接近过的图像。
WP Asset Cleanup 插件的工作方式类似于延迟加载插件的工作方式。 但是，该插件不是专注于延迟服务器对未查看图像的请求，而是检测主题中何时存在插件、文件或其他资产，但不在该特定页面上。 然后，它会阻止该资产在该页面上被加载和检测； 因此，减少了必须发送到浏览器的服务器请求的数量。
缓存插件对于 WordPress 网站来说是绝对必要的——特别是如果您依赖访问者一次又一次地返回它。 对于那些回访者，如果没有任何变化，您实际上不需要处理相同的服务器请求，因此缓存插件将消除这样做的需要。
WPMU DEV 的 Hummingbird 插件非常适合这个。 除了管理浏览器缓存之外，它还负责文件压缩、CSS、JavaScript 和 HTML 缩小，还添加了 CDN 以进一步加快速度。 如果您不想使用上述第三方之一来评估您网站的速度状态，您还可以访问性能报告。
WordPress 网站必然会出现大量 CSS 和 JavaScript 文件。 但是，您可以将它们合并到一个单独的文件中，而不是继续将每个文件作为单独的服务器请求发送到访问者的浏览器。
请记住，您合并的 CSS 文件应位于您网站的标题中。 然后您的 JavaScript 文件需要进入页脚。
最常见的例子出现在博客的评论提要中。 您是否知道，如果您保留默认的 WordPress 评论系统，它将自动使用 Gravatar（另一个 Automattic 属性）来获取评论者的照片和简历？ 这些照片然后成为您必须发送到浏览器的额外服务器请求，如果您运行一个流行的博客，这可能会变得混乱。 评论插件将帮助您避免此问题。
哦，开发 WordPress 网站的乐趣。 在 WordPress 中可以做的事情太多了，但是很容易忽视所有这些美丽的主题、酷炫的插件和令人敬畏的图像在浏览器眼中是如何变得过度的，而浏览器只是试图处理它们。 但是，不要害怕：如果您将页面速度监控工具放在附近并遵守上述九个减少服务器请求的提示，您的网站性能应该没问题。
标签：Demand feedback
