π“π‘πž π–πžπ’π«ππžπ¬π­ 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐅𝐒𝐱 𝐈'𝐯𝐞 π„π―πžπ« π’π‘π’π©π©πžπ Changed one...π“π‘πž π–πžπ’π«ππžπ¬π­ 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐅𝐒𝐱 𝐈'𝐯𝐞 π„π―πžπ« π’π‘π’π©π©πžπ Changed one...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Fazlu's avatar
Fazlu logo
Fazlu .
β€’ Aug 28
π“π‘πž π–πžπ’π«ππžπ¬π­ 𝐏𝐞𝐫𝐟𝐨𝐫𝐦𝐚𝐧𝐜𝐞 𝐅𝐒𝐱 𝐈'𝐯𝐞 π„π―πžπ« π’π‘π’π©π©πžπ
Changed one CSS value from 0 to 0.001 and dropped page load time by 2.7 seconds.
Let me explain. I was working on a webflow project where elements had an animation-hide class set to opacity: 0. The idea was simple: hide elements on load, then animate them in with GSAP.
PageSpeed was reporting LCP at 3.5 seconds. The hero images were loading fast, the fonts were optimized, everything looked right. But the score wouldn't change.
Turns out, Chrome's LCP algorithm skips elements with opacity: 0. It doesn't consider them "painted." So even though my hero card images were fully loaded and ready, Chrome was ignoring them and waiting for a later, smaller element to count as LCP.
The fix: change opacity: 0 to opacity: 0.001.
Visually? Identical. No human eye can see the difference. But Chrome now counts those elements as painted at first render. LCP dropped from 3.5s to 0.8s.
WebflowCSScustomcode
Post image
Tim's avatar
Tim Affram
β€’ Aug 29
Oh wow! that's huge. Didn't know this
Fazlu's avatar
Fazlu logo
Fazlu .
β€’ Aug 29
Glad you find it helpful.
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started