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
ππ‘π πππ’π«πππ¬π πππ«ππ¨π«π¦ππ§ππ π
π’π± π'π―π ππ―ππ« ππ‘π’π©π©ππ
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.
Oh wow! that's huge. Didn't know this
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
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic π
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
I've built my whole web portfolio in Webflow over the past 5 years.
It's been a the main driver of switching from a generalist graphic designer to a Webflow specialist.
Currenntly working towards becoming a Certified Partner!
5 years in one tool, respect
No oversized promises. No unnecessary visual noise.
Baseframe is a calm, structured Webflow template for consulting businesses that want to communicate clearly and look credible doing it.
A few details from the build:
β’ 3 homepage layouts
β’ Multiple About and Contact options
β’ CMS case studies and blog
β’ Services, pricing, and FAQ pages
β’ Subtle motion across the site
β’ Fully responsive development
Developed by me in Webflow.
Well done !
A few recent projects that made it out of Figma and into the browser π
The transition from that portrait hero into the stacked device mockups is smooth, curious how much of the three.js layer is custom versus a library like R3F.