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
They won’t teach you this in any course.
WebGL background + Lighthouse (no GPU) = SwiftShader kills your score.
6 lines of JS → 90+.
Full breakdown → sivuo.com/dd/dd46-how-to-fool-pagespeed
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
Related posts
Our own homepage scored 54 on mobile. Here is how we got it to 99.
We build fast sites for clients. Then we ran PageSpeed on our own homepage and got 54 on mobile.
Three things were doing most of the damage:
1) An autoplaying 4K hero film. It was about 21 MB of a 22 MB page.
2) Google Tag Manager. It alone blocked the main thread for around 4 seconds.
3) A booking widget loading its scripts and cookies on every visit.
What we changed:
• The film became a small poster image. The video now starts on the visitor's first interaction.
• Tags load on first interaction or after 5 seconds. No tag was removed.
• The booking widget is gone.
• Images are served as AVIF and WebP in the right size.
Result on the mobile homepage: 54 to 99. Page weight went from about 22 MB to about 0.5 MB. Total Blocking Time went from 4,740 ms to 30 ms.
One caveat: lab scores move. The same page scored between 86 and 99 on the same day, so we report the median of three runs.
Full write-up with every number: https://codevibe.in/case-studies/website-speed-optimization
If your site feels slow, the hero video and the tag manager are the first two places I would look.
codevibe.in
Website Speed Case Study: PageSpeed 54 to 99 | Codevibe
How Codevibe took its own Next.js site from 54 to 99 on mobile PageSpeed and 100 on desktop: 22,563 KiB to 530 KiB, blocking time 4.7 s to 30 ms.
54 to 99 is wild. the cobblers kids have no shoes thing is so real lol
Web demo of an interactive globe powered by WebGL, updated in real-time with live data.
the globe spins so smooth
Cutframe update — same skin, broader adaptation.
I’ve updated Cutframe’s page-adaptation algorithm after testing it on more complex visual backgrounds.
The original adapter derived its palette from DOM and CSS styles. Canvas and WebGL introduced another challenge: the colors visitors actually see aren’t necessarily reflected in those styles.
Cutframe now samples five regions of readable background canvases and clusters their colors to derive a coordinated surface and accent palette, with contrast checks for text and controls. The same approach handles solid colors, multicolor artwork, and animated 3D scenes.
Low-frequency sampling and stability checks help reduce flicker. New palettes transition smoothly from the currently displayed colors, with the color animation stopping once the transition finishes. Developers can inspect the sampled regions, adjust the behavior, or override colors when needed. Unreadable sources use a safe fallback.
The cut-corner frame, controls, and time-lens interaction remain the same. These screenshots show the same skin and video frame across different WebGL backgrounds—the update is to how the player adapts to its surroundings.
I’m open to collaborations in creative web development, interactive experiences, and digital art. Feel free to DM me if you have a project in mind.
