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

Question

我有一个新网站的一部分...让它称之为英雄，在一秒钟内加载。辅助内容动态加载每个帖子的缩略图（有100个），最多需要一分钟才能加载。

我希望将优先级内容（英雄内容）加载到一秒钟之内，然后加载辅助内容 - 只有在主要内容（英雄）完全加载后才会加载。

我使用WP平台，自定义英雄部分和Grid FX插件来调用辅助内容。

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

谢谢！

Answer 1

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

基本上有两个因素可以解决这个问题：首先，服务器有数百个帖子的查询，然后然后浏览器必须获取所有这些缩略图。因此，您可以优化两个独立的事项：

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

1. 使用wp_localize_script()将正确的admin-ajax.php路径传递给您的JS
2. 在你的JS中检测你的英雄元素何时加载，然后发出更多帖子的AJAX请求：这实际上是对一个函数的调用......
3. ...首先会检查您是否拥有相关权限。
4. 假设您拥有权限，那么您将对帖子及其缩略图执行查询，然后将其作为对象返回
5. 如果成功，JS会处理该对象，创建一些元素（例如一些＆lt; 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有效性（图片需要某些作为src属性）和图片的尺寸，但它应该是一个好的开始点。