For the purposes of illustration, I’m going to assume you’re using Google Chrome which has an excellent set of developer tools allowing us to play around with website content in real-time. The first thing we need to do this to grab the open sourced code from GitHub. Navigate to the linked website, and click the icon at the top right that says “View Raw” as shown in the screenshot below.
From there, open the “Snippets” section, right-click anywhere inside and select “New”.
Look towards the right and find the “Play” button as shown below. Click it, and a new output console should open up at the bottom filled with CSS styles!
What you see now is the above-the-fold CSS styles that need to be downloaded along with the webpage. We can fetch the remaining CSS from external style sheets at our leisure when the page has already been loaded.
You can test the relevance of the in-line CSS that has been generated by manually removing all of the external CSS files from your page within Google Chrome developer tools itself without needing to change anything on the server. Simply edit the HTML and the display will change in real time. Then insert the critical CSS that the script spat out and you should see your page render correctly – at least as far as the initial screen goes. Sometimes a couple of styles may not be applied in which case it is trivial to notice it and insert them manually.