我如何用 1KB JavaScript 加速 WordPress

飞页

它是如何运作的？

WordPress插件

演示？

标题很吸引眼球吧？😉

该脚本于 4 个月前发布，目前已被 4000 个 WordPress 网站使用。

<script src="flying-pages.min.js"></script>

<script>
  window.FPConfig = {
    delay: 0,
    ignoreKeywords: [],
    maxRPS: 3,
    hoverDelay: 50,
  };
</script>
<script defer src="flying-pages.min.js"></script>

<script src="flying-pages.min.js"></script>
<script>
  flyingPages({
      delay: 0,
      ignoreKeywords: [],
      maxRPS: 3,
      hoverDelay: 50
  });
</script>

它是如何运作的？

Flying Pages 会注入一段很小的 JavaScript 代码（1KB gzip 压缩后），该代码会等待浏览器空闲，检测视口中的链接（鼠标悬停时也会检测），并预取这些链接，这样浏览器在浏览页面时就不必等待。

预取操作是通过 prefetch 标签完成的：

<link rel="prefetch" href="URL_TO_PAGE">

• 预取视口中的页面– 使用“交叉观察器”检测视口（当前查看区域）内的链接，并告诉浏览器使用“预取”功能预取这些链接。

• 鼠标悬停时预取页面– 当鼠标悬停在链接上时，如果尚未使用上述“视口”进行预取，则 Flying Pages 将立即预取它们（类似于 Instant.page）。

• 限制每秒预取次数——如果您的页面链接过多，同时预取所有链接会导致服务器崩溃或降低网站访问速度。Flying Pages 使用内置队列限制每秒预取次数（默认 3 次/秒）。

• 如果服务器繁忙，则停止预取– 如果服务器开始响应缓慢或返回错误，则停止预取以减少服务器负载。

• 了解用户的网络连接和偏好设置——检查用户是否使用较慢的网络连接（例如 2G）或启用了数据节省模式。在这种情况下，Flying Pages 将不会预取任何内容。

WordPress插件

预加载指向登出页面、购物车页面等的链接可能会导致问题。因此，我们需要排除此类链接以及其他一些选项，例如：

• 设置每秒最大请求数
• 延迟开始预取
• 鼠标悬停延迟
• 已登录管理员禁用

Flying Pages WordPress 插件带有一个设置面板，可以配置所有这些设置：

演示？

欢迎访问我的博客WP Speed Matters