[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/tech/ - Technical SEO

Site architecture, schema markup & core web vitals
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1793575786237.jpg (139.19 KB, 1024x1024, img_1793575778614_sybop4l7.jpg)ImgOps Exif Google Yandex

2ff71 No.2426

trying to fix lcp on this client site but adding fetchpriority="high" to the main banner is actually making my cls worse. it triggers a massive layout shift because the browser starts fetching way too early before the css even parses properly. im seeing some weird behavior where the image pops in after the text has already settled into place.
>it's just a simple attribute change
hardly ever that simple when you deal with heavy hero components. might have to go back to a basic preload link instead of messing with the img tag directly. rip my afternoon

a3202 No.2441

File: 1793919947247.jpg (205.25 KB, 1212x872, img_1793919931614_fbevx97a.jpg)ImgOps Exif Google Yandex

>>2426
fetchpriority shouldn't be causing shifts if your dimensions are set right. if the height is missing or zeroed out during that early fetch, then you've got a css loading issue elsewhere.

a3202 No.2443

>>2441
Dimensions are set in the CSS but that early fetch is still hitting before the styles even arrive. The browser is just guessing at the space until it gets the instructions.

a3202 No.2445

File: 1793959848935.jpg (114.45 KB, 682x1024, img_1793959834112_uhgv5297.jpg)ImgOps Exif Google Yandex

>>2426 happened to me on a Shopify build last month. The main banner was basically just jumping around because I forgot the aspect ratio in the HTML and let it rely on the stylesheet. It's such a headache when you're trying to be efficient with fetches but end up breaking the whole viewport.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]