grinner.io is full of motion. Words rotate, cards stack, stickers spin and pictures slide past. It also scores 100 out of 100 on PageSpeed on desktop every time, and between 96 and 100 on phones.
Here are the reports, so you can check them yourself: See the phone report · See the desktop report
This is what actually made the difference, including the things we tried that made it worse.
Where we started
Before we touched any speed settings, the homepage already scored a median of 100 on phone and 100 on desktop. That’s mostly down to Grinner itself. Each effect loads its code only on pages that use it, so a page carries nothing it doesn’t need.
So our job was really not to make things worse. That turned out to be harder than it sounds.
The cache settings that hurt
We first tried a popular bundle of LiteSpeed Cache settings, the kind many guides recommend. It made pages smaller on paper. On phones the median dropped to 95.
Guest Mode
Guest Mode serves first-time visitors a generic cached page, then checks their device. On our site, a new visitor on a phone got the page, then a reload about 0.9 seconds later. Desktop looked fine. We switched Guest Mode off, and every visit is one page load again.
CSS Combine
CSS Combine joins all your stylesheets into one file. For us that meant one 230 KB file, 33 KB compressed, that the browser had to finish before it could paint anything. PageSpeed flagged about a second of waiting because of it. With CSS Combine on, our phone median was 96. With it off, 98. We turned it off.
Load CSS Asynchronously
This one loads styles after the page first appears. We never switched it on here. On another site we tested, it made the page jump about as it loaded, a layout shift of 0.32 on desktop, which is well into the poor range. Grinner doesn’t need it, so it stays off.
Delayed JavaScript
Delaying scripts until a visitor first scrolls or taps can lift a score. It also held back our analytics, so anyone who read without touching the page wasn’t counted. Grinner already loads each effect’s script only where it’s used, so we didn’t need the trick and switched it off.
Fonts, tested properly
Fonts were the most surprising part. We tested three setups on phone.
- All five fonts preloaded. The page painted in the right fonts straight away, but the five files, about 119 KB, competed with the hero picture on a slow connection.
- Only the two hero fonts preloaded. Same median score, 96, and no flash of the wrong font.
- No preloads. Also a median of 96, but on a slow phone the hero heading showed in a fallback font for about 0.65 seconds, then jumped.
We settled on preloading only Clash Display Semibold, the font of our big headings. Later we added Instrument Serif Italic, the font our accent words use, and Clash Display Medium, the font of our buttons. Every font also uses font-display: swap, so text shows straight away in a fallback font and switches to the real one as soon as it arrives. On our Text Rotator page that stopped the heading shifting when the font arrived, taking its layout shift on phones from about 0.06 to 0, and its phone median from 99 to 100.
We also tried a copy of the homepage with no web fonts at all. It scored 98 on phone, not 100. Fonts matter, but on a long page they’re only part of the story.
Why phone scores move between runs
PageSpeed tests phones by pretending to be a slow phone on a slow connection, from Google’s own servers. Small changes in timing on their side add up. We’ve seen the same page score anywhere from 95 to 100 across runs, with nothing changed.
So we never trust a single run. We run each test at least three times and use the middle score. If you test your own site, do the same before you change anything.
Hero Mode
The biggest thing on your first screen decides much of your score. If it starts invisible and fades in, PageSpeed waits for it.
Hero Mode fixes that. The hero is drawn the moment the page paints, so the score never waits for an animation. On desktop and tablet the entrance then plays over the top. Phones get a calm, still first screen. Our homepage hero runs in Hero Mode.
The lighter setup that won
In the end, doing less worked best. This is what runs on grinner.io now.
- LiteSpeed Cache doing page caching and browser caching, with QUIC.cloud serving pages from close to each visitor.
- No CSS or JavaScript minifying, combining or delaying.
- Three font preloads, Clash Display Semibold for the hero heading, Clash Display Medium for the buttons and Instrument Serif Italic for the accent, with font-display: swap on every font.
- Hero Mode on the hero.
- Small SVG illustrations instead of large photos.
- Grinner loading each effect only where it’s used.
With that setup, the homepage has a median of 99 on phone and 100 on desktop, and our feature pages, including the heavy ones with Lottie animations, video and sliders, have a median of 99 on phone and 100 on desktop.
See the phone report · See the desktop report
What depends on you
We’d love to promise you 100. We can’t, and nobody honest can. Your hosting decides how fast the first byte arrives. Your cache setup decides whether visitors get a ready-made page. And your design decides how much there is to load, from fonts and pictures to other plugins’ scripts.
What we can promise is that Grinner won’t be the thing holding you back. Start with a good host, keep your cache simple, test before and after every change, and use the middle of three runs.
