Optimize WordPress With Critical Path CSS Without Plugins

What is Critical Path CSS

Critical Path CSS is the CSS used to render above-the-fold content. Above-the-fold content is the content that is visible when you load a page, without browsing down.

With the example of the PageSpeed Insights page. The first picture is the above-the-fold content. The latter is the whole page.

Above-the-fold

Full page

How Critical Path CSS Improves Speed

WIth Critical Path CSS, you can drastically improve the speed of your website, because instead of loading the CSS file for your full page. The browser only needs to download the above-the-fold CSS. Then after rendering your page, it downloads the full page CSS.

PageSpeed Insights tells you if it’s beneficial for you to set up Critical Path CSS.

How To Generate Critical Path CSS

Luckily for us, there are several online tools available to generate your Critical Path CSS files. https://www.sitelocity.com/critical-path-css-generator

And my personal favorite is: https://pegasaas.com/critical-path-css-generator/ . Although this one has a daily limit of 5.

After you filled in your URL and pressed the Generate button. The tool starts to analyze and generates your CSS file.


How To Add It To WordPress

Go to your theme editor, find your header.php and paste the code (between <style></style>) in your header (between <head></head>).

In your functions.php add the following script.

function muscle_media($html, $handle, $href, $media) {

if (is_admin())

return $html;

$html = <<<EOT

<link rel=’stylesheet’ id=’$handle’ href=’$href’ type=’text/css’ media=’print’ onload=”this.media=’all'”/>

EOT;

return $html;

}

add_filter( ‘style_loader_tag’, ‘muscle_media’, 10, 4 );

This code makes all your CSS files Deferred. This means that the CSS doesnt load until the full page is finished loading. If you want to learn more about speed optimizing WordPress check out the ebooks on gumroad.