Recently I worked on a project where I was tasked with getting a 100% score on Google PageSpeed Insights. So I worked through Google’s suggestions one by one, until there was only one item left: Loading CSS in a non-blocking way and inlining critical CSS.
The hardest part of that item is determining what CSS is “critical.” Luckily, there are plenty of articles on that subject on the Internet!
However, one question I stumbled on was: “Critical for what?” For the front page? For every page?
Every page of the site in question does not have a common header like many (most?) sites. Instead, the “above the fold” part of almost every page is more or less unique.
I started out by finding the critical CSS for the front page. Then I went through every other page. Soon, basically all CSS ended up in the “critical” category. That was way too much to inline.
In the end, I decidied to only inline the crictal CSS for the front page. After all, the customer only checked the front page in Google PageSpeed Insights, so I got away with it :) I also figured that for this site, most people will visit the front page first. Then, the style sheet will be in their cache anyway for the rest of the pages.
Is that the way to go? Or “should” you inline different CSS for every page (based on what is critical for the page in question)? How do you maintain that?
How do y’all people deal with this? What’s your experience?
