Inlining Critical CSS: Do We Need to Panic?

 

One of the latest “must haves” for website optimisation is inline html for critical css, i.e. content above the fold, or what the user sees first. But is it entirely necessary for everyone?


 

 

Roughly translated, this means that, in order to minimise the load time for above the fold content, enabling quick rendering and therefore a better UX, this particular html is treated differently (inlining). This allows the ‘non-critical’ content to load at its usual, slower, speed, tucked away neatly below the fold.

You’d be forgiven for thinking this is an urgent requirement if you head to Google PageSpeed Insights and test your url: Google is very keen on websites adopting this method and will highlight as a “should fix” item the fact that your content renders at the same time, instead of favouring your “critical” (above the fold) content. 

So, should we all rush out and get our development teams onto this asap? 

In a lot of cases, no. At the very least, this should be considered before making the assumption that it’s necessary because Google recommends it.

Unless you’re working with a high-grossing e-commerce site where one additional call to your server can equate to large quantities of money, the improvement seen from adding this feature is often minimal. Disadvantages to using this method include:

  • Inlining CSS is time consuming to implement and can create messy, inconsistent code.
  • It also adds to the overall weight of the HTML because the same styles need to be called multiple times, rather than loading them once.
  • Any inline styles can’t be cached as an external CSS stylesheet can be.

In a nutshell - before deciding that, because Google says so, you need to spend time and money optimising your website using this method, talk to your digital partner for their honest opinion (and failing that, talk to us!). While inlining may be really worth your while in some cases, it definitely pays to get a second opinion before you invest.