From 196092ae69eb1249206846ddfc162049b03f42b4 Mon Sep 17 00:00:00 2001 From: Abu Bakr <168574041+abubakriz@users.noreply.github.com> Date: Mon, 5 Aug 2024 14:29:20 +0300 Subject: [PATCH] fix: audit incorrectly flagging images as above the fold (#10891) (#11617) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: audit incorrectly flagging images as above the fold (#10891) Previously used lement.offsetTop to find the y position of the image, which does not work when the element parent has a position: relative property. Instead, this uses lement.getBoundingClientRect().y top get real y position of the image. There's one issue though, which is that getBoundingClientRect returns the position relative to the user's viewport, not the absolute position. So, add window.scrollY to the value to cancel that effect out, and you have the element's absolute position. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY * chore: add changeset --- .changeset/shy-bees-look.md | 5 +++++ .../src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 .changeset/shy-bees-look.md diff --git a/.changeset/shy-bees-look.md b/.changeset/shy-bees-look.md new file mode 100644 index 000000000000..931201f6704a --- /dev/null +++ b/.changeset/shy-bees-look.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix toolbar audit incorrectly flagging images as above the fold. diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts index 1f46d55b3fc0..83e829cb97db 100644 --- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts +++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts @@ -36,7 +36,8 @@ export const perf: AuditRuleWithSelector[] = [ match(element) { const htmlElement = element as HTMLImageElement | HTMLIFrameElement; // Ignore elements that are above the fold, they should be loaded eagerly - if (htmlElement.offsetTop < window.innerHeight) return false; + const elementYPosition = htmlElement.getBoundingClientRect().y + window.scrollY + if (elementYPosition < window.innerHeight) return false; // Ignore elements using `data:` URI, the `loading` attribute doesn't do anything for these if (htmlElement.src.startsWith('data:')) return false; @@ -54,7 +55,8 @@ export const perf: AuditRuleWithSelector[] = [ const htmlElement = element as HTMLImageElement | HTMLIFrameElement; // Ignore elements that are below the fold, they should be loaded lazily - if (htmlElement.offsetTop > window.innerHeight) return false; + const elementYPosition = htmlElement.getBoundingClientRect().y + window.scrollY + if (elementYPosition > window.innerHeight) return false; // Ignore elements using `data:` URI, the `loading` attribute doesn't do anything for these if (htmlElement.src.startsWith('data:')) return false;