需要帮助加快网站加载速度

Question

我有一个新站点的一部分...我们称它为英雄，加载时间不到一秒钟。次要内容动态加载每个 post（有 100 个）的缩略图，加载最多需要一分钟。

我希望按原样在一秒钟内加载优先内容（英雄内容），但是然后，并且只有在那时，加载次要内容 - 仅在主要内容（英雄）完全加载之后。

我正在使用 WP 平台、自定义英雄部分和 Grid FX 插件来调用次要内容。

非常感谢任何有助于加快此网站加载速度的帮助！

谢谢！

Answer 1

如果已经有一个插件可以为您处理此问题，我不会感到惊讶，但这听起来与我在网站上遇到的情况非常相似，我最终想出了以下解决方案。

基本上有两个因素导致速度变慢：首先，服务器查询数百个帖子，然后浏览器必须获取所有这些缩略图.因此，您可以优化两件事：

第 1 步：查询 首先 - 正如@EdCottrell 指出的那样 - 您可以批量加载这些图像，或者您可以使用 AJAX 通过 admin-ajax.php 请求更多帖子；这将 return 一个 JSON 对象，然后您可以使用该对象创建一堆具有图像 URL 数据属性的元素（然后将在第 2 步中使用）。执行此操作所需的步骤非常长，并且由于我们在这里涵盖两个不同的主题，因此将您指向 this article 可能会更简洁，其中涵盖了非常详细的内容。简而言之，您将是：

使用 wp_localize_script() 将 admin-ajax.php 的正确路径传递给您的 JS
在你的 JS 中检测你的 hero 元素何时加载，然后发出 AJAX 请求更多帖子：这实际上是对函数的调用...
...首先检查您是否有相关权限。
假设您有权限，那么您将对帖子及其缩略图执行查询，然后return将其作为对象
如果成功，JS 然后处理对象，创建一些元素（例如一些 <div>s）来加载图像。

第 2 步：加载图像 您可以在元素实际在视图中 时加载它们，而不是简单地一次加载所有图像 - 这可能会很慢。您可以使用相当轻量级的 unveil.js 插件来做到这一点。假设您在步骤 1 中添加了 data-thumbnail-src 的数据属性，它看起来像：

$('.post-preview').one('unveil', function() {
    var src = $(this).attr('data-thumbnail-src'); // Get the src from the data-attribute
    $(this).attr('src', src); // Adding the src causes the image to load
}

请注意，为简洁起见，以上内容遗漏了一些问题，例如 HTML 有效性（图像需要 something 作为 src 属性）和图像尺寸, 但它应该是一个很好的起点。

需要帮助加快网站加载速度

Need help having site load faster

wordpress

plugins