Add LCP Discovery Delay

ChromeDevTools · Feb 18, 2025 · c696eb8 · c696eb8
1 parent ecb4bd0
commit c696eb8
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
 <li><a href="initiators/index.html">initiators</a></li>
 <li><a href="layout-shift/index.html">layout-shift</a></li>
 <li><a href="lcp-critical-path/index.html">lcp-critical-path</a></li>
+<li><a href="lcp-discovery-delay/index.html">lcp-discovery-delay</a></li>
 <li><a href="lcp-iframes/index.html">lcp-iframes</a></li>
 <li><a href="lcp-image-high-fetchpriority/index.html">lcp-image-high-fetchpriority</a></li>
 <li><a href="lcp-large-image/index.html">lcp-large-image</a></li>

diff --git a/lcp-discovery-delay/app.js b/lcp-discovery-delay/app.js
@@ -0,0 +1,3 @@
+const image = document.createElement('img');
+image.src = 'lcp-image.jpg';
+document.body.appendChild(image);
diff --git a/lcp-discovery-delay/index.html b/lcp-discovery-delay/index.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <title>LCP Discovery Delay</title>
+    <script src="./render-blocking-script.js"></script>
+  </head>
+  <body>
+     <p>In this example the LCP image is discovered late because:</p>
+    <ul>
+      <li>
+        The page has a render blocking script with a sync <code>sleep()</code> call for 1 second.
+      </li>
+      <li>The <code>app.js</code> script is the one that injects the LCP image..</li>
+    </ul>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/lcp-discovery-delay/lcp-image.jpg b/lcp-discovery-delay/lcp-image.jpg
diff --git a/lcp-discovery-delay/render-blocking-script.js b/lcp-discovery-delay/render-blocking-script.js
@@ -0,0 +1,5 @@
+function sleepFor(sleepDuration) {
+  let now = new Date().getTime();
+  while (new Date().getTime() < now + sleepDuration) {}
+}
+sleepFor(1_000);