diff options
| -rw-r--r-- | .changeset/shy-bees-look.md | 5 | ||||
| -rw-r--r-- | packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts | 6 |
2 files changed, 9 insertions, 2 deletions
diff --git a/.changeset/shy-bees-look.md b/.changeset/shy-bees-look.md new file mode 100644 index 000000000..931201f67 --- /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 1f46d55b3..83e829cb9 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; |