Playing with the Speculation Rules API in the Console

主要内容

1. 引言：
   • 文章讨论了如何通过 Speculation Rules API 改善网页加载速度，使页面看起来几乎是立即加载的。Speculation Rules API 是一种将某些资源预先加载到浏览器中的工具，旨在显著提升网页性能。
2. Speculation Rules API 概述：
   • 该 API 允许浏览器提前获取资源并渲染即将访问的页面，从而使页面加载看起来是即时的。
   • 其工作机制像是将一个页面隐藏在 iframe 中预加载，然后当需要时再切换，但实际上并不使用 iframe，而是由浏览器内部管理。
   • Speculation Rules API 尚未成为标准，但已经可以在各种 Chromium 浏览器中使用，占据了全球浏览器市场的 70% 以上。
3. 与过去的“pre”前缀混淆的可能性：
   • 过去已经有许多以“pre”为前缀的技术，如 preload、prefetch、preconnect 等，这些仍然会继续存在并发挥作用。
4. 尝试 Speculation Rules API 的步骤：

   • 将 Speculation Rules API 应用到 WordPress 博客，过程包括：

     1. 加载一个网页，如 https://phpied.com。

     2. 打开浏览器控制台，为三个链接添加类名 prerenderosa：

        document.querySelectorAll('.entry a[rel=bookmark]')
            .slice(0, 3)
            .forEach(e => e.classList.add('prerenderosa'));
        
        

     3. 设置 speculation rules 的 JavaScript 对象：

        const pre = {
          "prerender": [{
            "source": "document", // 可选
            "where": {
              "and": [
                { "selector_matches": ".prerenderosa" },
              ]
            },
            "eagerness": "immediate", // 迫不及待
          }]
        };
        
        

     4. 将 speculation rules 添加到页面：

        const spec = document.createElement('script');
        spec.type = "speculationrules";
        spec.append(JSON.stringify(pre));
        document.body.append(spec);
        
        

     • 在满足一些条件后，点击这三个链接会立即显示页面。
5. 调试和预加载检查：
   • 使用 DevTools 中的 “Speculative loads” 功能来检查预加载结果。
   • 确保禁用广告拦截插件的预取禁用设置，否则会影响预加载效果。
6. 不同 'eagerness' 级别：
   • Immediate：立即预加载页面。
   • Moderate：鼠标悬停 200 ms 以上后才开始预加载。
   • Conservative：点击链接时预加载。
7. 关注点和解决方案：
   • 文章关注于分析预加载但未访问到的页面的问题、性能测量问题以及预加载事件通知问题，为这些问题提出了相应的解决方案。
   • 提到 Google Analytics 已经支持相关功能。
8. 下一步：
   • 可以采取客户端使用 Speculation Rules API 或者由服务器生成相应的规则嵌入 HTML 中，通过 HTTP 头指向一个 JSON 文件包含所有规则。

总结

文章详细介绍了如何在浏览器控制台中使用 Speculation Rules API 提前加载页面，从而提高网页响应速度。这种方法不仅能有效提升用户体验，还提供了一系列调试和配置选项，帮助开发者更好地掌控预加载过程。新的 API 具备广泛的应用前景，非常值得探索和测试。