Optimizing CSS

Based on my last post “Google Core Web Vitals 2020” i’ll review and optimize my CSS declarations, as Lighthouse complains already: “Eliminate render-blocking resources”. So here we go:

Step 1) analyze existing css-file and remove unused stuff
Who needs comments anyway 😉

Step 2) separate CSS files
The next thing came into my mind, was trying to separate css for different responsive modes like pc, mobile and tablet and accessing these with CSS3-media queries.
However, according to this post this doesn’t save any bandwith, as
browsers will download all the stylesheets regardless (see also: stackoverflow). But google states:

“Another approach to eliminating render-blocking styles is to split up those styles into different files, organized by media query. Then add a media attribute to each stylesheet link. When loading a page, the browser only blocks the first paint to retrieve the stylesheets that match the user’s device (see Render-Blocking CSS).”

(source). That means, all CSS files a loaded, thus it doesn’t save any bandwidth, but only the needed CSS stays render-blocking, the rest is loaded afterwards. So i’ll strip down my CSS:

From here:
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

i’ll go to there:
<link rel="stylesheet" href="css/all-style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/portrait.css" type="text/css" media="orientation:portrait" />
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="only screen and ( max-width: 640px)" />

The first stylesheet declaration includes styles, which apply to all kinds of devices and matches in all conditions. This definition stays render-blocking and will be loaded in any case. The next declarations

“have a dynamic media query, which is evaluated when the page is loaded. Depending on the orientation of the device while the page is loading, portrait.css may or may not be render blocking.”

(developers.google.com)

see: developers.google.com

Step 3) eliminate render-blocking resources
Use the Chrome DevTools Sources – Coverage tab (top show, open command menu and start typing “Coverage”, see: developers.google.com) to identify which code is “required for the first paint” (marked as green). Google says “Consider automating the process of extracting and inlining “Above the Fold” CSS using the Critical tool.” It can be found here: github This would actually result in putting nearly all my CSS inline…. No thanks, i’ll pass – perhaps looking at this later. (see: web.dev)

Step 4) minify CSS
see: https://web.dev/minify-css/
using https://cssminifier.com/ i’ll end up with something like:
<link rel="stylesheet" href="css/all-style-min.css" type="text/css" media="all" />

That’s it. One step towards a 90-100 Lighthouse score.
Some more links:
https://web.dev/optimize-lcp/
https://web.dev/defer-non-critical-css/

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.