DIY和其他教程：教程：什么是Ajax预加载？

NewsPaper

Ajax预加载是我们的主题使用的一种技术，用于改善在我们的块上使用Ajax过滤器的网站的用户体验。处于活动状态时，主题将在用户单击初始页面加载时单击这些过滤器之前预加载这些过滤器的内容。响应式使用并与完整页面缓存插件配对，它可以节省对admin-ajax.php的大量请求。

不使用Ajax过滤器自动加载：

优点：

初始页面生成速度更快。在缓存插件缓存页面后，此优势就丢失了，因为该插件将提供静态HTML;
页面尺寸更小。在我们的测量中，当通过.gzip压缩时，一个典型的页面会小20-70kb。（通常，所有服务器都应该提供.gzip内容）

缺点：

我们的块使用WordPress提供的Ajax操作端点管理Ajax。在每次请求时，此端点都会加载完整的WordPress核心以及我们的区块未使用的wp-admin核心；
admin-ajax端点通常不会被第三方插件缓存，大多数CDN避免缓存它，因为wp-admin也使用它。

使用Ajax过滤器自动加载：

优点：

在缓存插件渲染并缓存初始页面后，点击过滤器的所有其他用户都不会访问服务器。所有内容都已经在用户的浏览器中，所有代码都在那里运行。
它不应该降低移动设备上内容的渲染速度。每个子类别的块内容都存储在JavaScript中；
它提供了更好的用户体验，尤其是在大型菜单上

缺点：

初始页面加载要慢得多。例如，如果它被用于几乎所有的块上，它可以产生40%的较慢加载速度，但一旦页面被完整的页面缓存插件缓存，加载时间将与任何其他静态HTML页面一样。
页面大小更大

我在哪里可以找到它？

预加载选项适用于所有具有Ajax过滤器的块和所有具有子类别过滤器的大型菜单。它有以下选项：

no preloading-每次点击过滤器时，主题都会发出Ajax请求。发出请求后，主题将使用浏览器缓存来存储结果，并且在页面重新加载之前不会对同一资源发出额外请求。
optimized preloading-主题尝试自动加载第一个过滤器
preload all-主题将尝试加载所有过滤器

在每个支持Ajax过滤器的块上：

: 支持ajax块; ajax_preload1.1.png (337.3 KiB) 查看 1048 次

作为大型菜单/浮动大型菜单的全局设置：

: 支持ajax的大型菜单; preload_mega_menu1.1.png (401.29 KiB) 查看 1048 次

: 浮动大型菜单; sticky_preload1.1.png (445.75 KiB) 查看 1048 次

信息