diff --git a/src/js/utils.js b/src/js/utils.js
index efbd86bb..3befd892 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -77,6 +77,12 @@ export const drawMetricSummary = (options, client, value, isMedian=true, change=
  * @param {Function} callback
  */
 export function callOnceWhenVisible(element, callback) {
+  // If the document is prerendering, don't wait until the charts are visible.
+  if (document.prerendering) {
+    callback();
+    return;
+  }
+
   new IntersectionObserver((entries, observer) => {
     if (!entries[0].isIntersecting) {
       return;
diff --git a/templates/base.html b/templates/base.html
index 956b0b7a..ba6c42aa 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -35,6 +35,16 @@
     {% block scripts %}
     <script defer src="{{ get_versioned_filename('/static/js/web-vitals.js') }}" nonce="{{ csp_nonce() }}"></script>
     <script defer src="{{ get_versioned_filename('/static/js/send-web-vitals.js') }}" nonce="{{ csp_nonce() }}"></script>
+    <script type="speculationrules" nonce="{{ csp_nonce() }}">
+    {
+      "prerender": [{
+        "urls": [
+          "/reports/state-of-the-web",
+          "/reports/page-weight",
+          "/reports/loading-speed"
+        ]
+      }
+    </script>
     {% endblock %}
   </body>
 </html>