Above the Fold CSS

October 31, 2023

One of the measures that google uses to gauge how fast a website is called 'first contentful paint'. This measures the time between the user requesting a website, and seeing a large amount of content displayed above the fold. Above the fold just means anything on the screen without having to scroll, whether it's on desktop or mobile.

To improve this metric, a key strategy is including all the styles used on the 'above the fold' part of the website inline in the head of the website. Then, once the entire page has finished loading, we fetch the rest of the CSS stylesheet and replace all the inline css.

Without this strategy, each fresh pageload would have to wait until the entire CSS stylesheet is loaded.

Wait, css stylesheet? What is that? Well- that's a file or files that contain rules about how to display the text and images on your website. It tells the site to make links blue, or it tells the browser to display the logo in the center of the screen. It dictates how to handle different screen sizes, and what the site should look like when viewed on a desktop vs. a small phone screen.

Here at Kiva, we generate the css stylesheet for each customer by combining a number of stylesheets and building them all into one- this includes bootstrap css, default css for desktop, default css for mobile, default css for the new shop, various plugins that handle things like modals and popups, and then finally we include company specific styles.

This is an automated build process, so whenever I make a style change, I hit the 'b' for build button, and wait for the computer to run through the above process to generate our new master stylesheet for each company.

Now- how do we figure out the css that we need for just the above the fold part of the website? Luckily there's a few tools out there that will help so I don't have to build something from scratch! The first tool is called Skyscraper, which we can run headless (without using a browser) using another tools called Grunt.js.

Since we run a multi-tenant software product here, we have to go a little further to get it to work for our purposes. On the admin side of our dev environment here, I built a tool that generates a Grunt.js config file that will tell Skyscraper to load the front page, shop page, login page, and about us page for each of our customers, and then generate inline CSS for each of those pages (since they are the most often loaded pages fresh from scratch).

This process takes a little longer, and we need to automate that down a bit more, so using some handy bash scripting, whenever I am ready to commit any stylesheet changes to the code repository and deploy them live, I run a little program I wrote call 'cssup'. This program will start Grunt.js, tell it to use our custom config file, wait for each company's inline styles to be generated, and then it will commit all new changes and styles to our master code repository. Not bad for one little program.

There is one final part that we have to do to make google happy- we have to actually use this code! So how do we do that exactly?

When the front page of your website loads, we lookup the 'above the fold' css for the front page that we have generated and stored. We open this file, include it's content in the website header, and the continue on generating the rest of the HTML that will be sent to the browser to render the front page.

When the page has finished loading, we use some jquery to asynchronously load the entire CSS stylesheet, and when it's finished downloading from the server, we swap it in to the html just like we have been using CSS for years. All done!

This little project has been running since about mid-summer, and I use tools like Chrome's Lighthouse to see how the performance handles for each company.

It's a pretty great update, and one that no one would ever really know about unless you happened to read this article :) Just one of the million things I build and do behind the scenes. That's all, have a great day!