The Hunt for Super Green - High-Performance Animations Without the Bloat
I really don’t need to say anything, not when I can let the green rings do the talking.
Yes that’s right, Huement.com, hosted on home-labbed hardware, splashing full screen particle animations + 3d visualizations on the front page, along with blog articles, recent YouTube visuals, links to the archives, even a few paragraph preview + featured image of the most recent story, plus a promo for my recent app TrendForge! All of that, and we still get all green.
Don’t believe me? Checkout the homepage for yourself and tell me you’re not impressed. Then let it sink in, all that content, all that perfectly SEO’d and accessible content, and we STILL have a perfect score.
For anyone thinking this is some sorta 2016 Volkswagen scam where I am gaming the test, you couldn’t. Be more wrong. It’s all legit, and I am going to explain exactly how I got there in this article. So lock in dear reader, and hopefully you’ll walk away with ideas on how to get your site up to speed… OR you could always contact us to do it for you!
OVERVIEW OF THE TOPICS COVERED
Section 1 | WebFonts: loading these wrong can wreck your scores and your user experience. We will go DEEP into how to optimize, what to optimize, and how to get them on the screen.
Section 2 | Asset Bundling. Specifically, Vite.js. Your CSS / JS files, are typically the largest things on the page, and the most prone to locking up the main render thread. Fear not friend, I will show you how to make vite.js work for you, instead of you fighting it.
Section 3 | Page Layout, HTML Tricks & Tips, <head> Tags, <script> Tags
Section 4 | Backend to Frontend Pipeline. Getting the data from the database, (caching it) and handing it off to the front end. No matter how optimized your page is, if the data takes a long time to arrive, no amount of <meta> tags or magnification is going to save you.
SECTION ONE
Slash Large Variable Font Payloads by 86%
Taking a font file from 172KB down to 24KB!
Variable web fonts are touted as the ultimate solution for site typography: a single...