Reset LCP sizes on soft navigations
The current soft navigation LCP implementation restarts LCP tracking,
but does not reset older LCP values. As a result, only the largest
paints (since the hard navigation) are counted as soft navigation LCP.
That's not what we want. This CL fixes that.
Bug: 1369516
Change-Id: Ib42701699181abebcb4a345ad4cf5235f2d7d777
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3930137
Reviewed-by: Ian Clelland <iclelland@chromium.org>
Commit-Queue: Yoav Weiss <yoavweiss@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1054784}
diff --git a/soft-navigation-heuristics/image-lcp-followed-by-image-softnav-lcp.tentative.html b/soft-navigation-heuristics/image-lcp-followed-by-image-softnav-lcp.tentative.html
new file mode 100644
index 0000000..5865755
--- /dev/null
+++ b/soft-navigation-heuristics/image-lcp-followed-by-image-softnav-lcp.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Detect simple soft navigation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/soft-navigation-helper.js"></script>
+</head>
+<body>
+ <main id=main>
+ <div>
+ <a id=link><img src="/images/ggrr-256x256.png"></a>
+ </div>
+ </main>
+ <script>
+ const link = document.getElementById("link");
+ test_soft_navigation(async json => {
+ // Add the content to the main element
+ const main = document.getElementById("main");
+ main.removeChild(document.getElementsByTagName("div")[0]);
+ const img = new Image();
+ img.src = json["image"];
+ await new Promise(resolve => {
+ img.onload = resolve;
+ });
+ main.appendChild(img);
+ }, link, /*push_state=*/true,
+ /*clicks=*/1, ()=>{},
+ "Test that an image LCP followup by a smaller soft navigation image LCP"
+ + " properly queues an LCP entry");
+ </script>
+</body>
+</html>
+
diff --git a/soft-navigation-heuristics/image-lcp-followed-by-text-softnav-lcp.tentative.html b/soft-navigation-heuristics/image-lcp-followed-by-text-softnav-lcp.tentative.html
new file mode 100644
index 0000000..f4205d9
--- /dev/null
+++ b/soft-navigation-heuristics/image-lcp-followed-by-text-softnav-lcp.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Detect simple soft navigation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/soft-navigation-helper.js"></script>
+</head>
+<body>
+ <main id=main>
+ <div>
+ <a id=link><img src="/images/ggrr-256x256.png"></a>
+ </div>
+ </main>
+ <script>
+ const link = document.getElementById("link");
+ test_soft_navigation(async json => {
+ // Add the content to the main element
+ const main = document.getElementById("main");
+ main.removeChild(document.getElementsByTagName("div")[0]);
+ const div = document.createElement("div");
+ const text = document.createTextNode(json["content"]);
+ div.appendChild(text);
+ main.appendChild(div);
+ }, link, /*push_state=*/true,
+ /*clicks=*/1, ()=>{},
+ "Test that an image LCP followup by a smaller soft navigation text LCP"
+ + " properly queues an LCP entry");
+ </script>
+</body>
+</html>
+
+
diff --git a/soft-navigation-heuristics/resources/soft-navigation-helper.js b/soft-navigation-heuristics/resources/soft-navigation-helper.js
index 28e5c9f..5d95ea9 100644
--- a/soft-navigation-heuristics/resources/soft-navigation-helper.js
+++ b/soft-navigation-heuristics/resources/soft-navigation-helper.js
@@ -24,8 +24,12 @@
validate_paint_entries("first-contentful-paint");
validate_paint_entries("first-paint");
const post_click_lcp = await get_lcp_entries();
- assert_greater_than(post_click_lcp.length, pre_click_lcp.length, "Soft navigation should have triggered at least an LCP entry");
-
+ assert_greater_than(post_click_lcp.length, pre_click_lcp.length,
+ "Soft navigation should have triggered at least an LCP entry");
+ assert_not_equals(post_click_lcp[post_click_lcp.length - 1].size,
+ pre_click_lcp[pre_click_lcp.length - 1].size,
+ "Soft navigation LCP element should not have identical size to the hard "
+ + "navigation LCP element");
}, test_name);
}
diff --git a/soft-navigation-heuristics/text-lcp-followed-by-image-softnav-lcp.tentative.html b/soft-navigation-heuristics/text-lcp-followed-by-image-softnav-lcp.tentative.html
new file mode 100644
index 0000000..e3428f6
--- /dev/null
+++ b/soft-navigation-heuristics/text-lcp-followed-by-image-softnav-lcp.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Detect simple soft navigation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/soft-navigation-helper.js"></script>
+</head>
+<body>
+ <main id=main>
+ <div>
+ <a id=link style="font-size: 4em">Click me!</a>
+ </div>
+ </main>
+ <script>
+ const link = document.getElementById("link");
+ test_soft_navigation(async json => {
+ // Add the content to the main element
+ const main = document.getElementById("main");
+ main.removeChild(document.getElementsByTagName("div")[0]);
+ const img = new Image();
+ img.src = json["image"];
+ await new Promise(resolve => {
+ img.onload = resolve;
+ });
+ main.appendChild(img);
+ }, link, /*push_state=*/true,
+ /*clicks=*/1, ()=>{},
+ "Test that a text LCP followup by a smaller soft navigation image LCP"
+ + " properly queues an LCP entry");
+ </script>
+</body>
+</html>
diff --git a/soft-navigation-heuristics/text-lcp-followed-by-text-softnav-lcp.tentative.html b/soft-navigation-heuristics/text-lcp-followed-by-text-softnav-lcp.tentative.html
new file mode 100644
index 0000000..a00d058
--- /dev/null
+++ b/soft-navigation-heuristics/text-lcp-followed-by-text-softnav-lcp.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Detect simple soft navigation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/soft-navigation-helper.js"></script>
+</head>
+<body>
+ <main id=main>
+ <div>
+ <a id=link style="font-size: 4em">Click me!</a>
+ </div>
+ </main>
+ <script>
+ const link = document.getElementById("link");
+ test_soft_navigation(async json => {
+ // Add the content to the main element
+ const main = document.getElementById("main");
+ main.removeChild(document.getElementsByTagName("div")[0]);
+ const div = document.createElement("div");
+ const text = document.createTextNode(json["content"]);
+ div.appendChild(text);
+ main.appendChild(div);
+ }, link, /*push_state=*/true,
+ /*clicks=*/1, ()=>{},
+ "Test that a text LCP followup by a smaller soft navigation text LCP"
+ + " properly queues an LCP entry");
+ </script>
+</body>
+</html>
+
+
+
