Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00
Code Issues Activity

fix: audit incorrectly flagging images as above the fold (#10891) (#11617)

Browse source 
* 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
This commit is contained in:
Abu Bakr 2024-08-05 14:29:20 +03:00 committed by GitHub
parent da86d5459f
commit 196092ae69
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 9 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/shy-bees-look.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix toolbar audit incorrectly flagging images as above the fold.

6
packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/perf.ts
View file

@ -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;