There many drag and drop website builders available on the internet to create website without technical skills. However, you have to learn some technical aspect of SEO in order to keep your site on top of search engine results pages. Critical CSS is one such technical topic for optimizing your content delivery in turns directly affecting the speed. WordPress ecosystem make this more complicated for normal users who use multiple plugins on their site. In this article, let us explore how to create critical CSS for WordPress site to improve the Google PageSpeed score.
Understanding the Basics
Before discussing about critical CSS, it is necessary to understand some terminologies like above-the-fold and content delivery optimization. In addition, you also need to understand the basic method of using external stylesheets on WordPress.
Above The Fold Content
When you open a website in desktop or mobile, the visible portion you see on the screen is above-the-fold content area. This is a traditional newspaper terminology where you can see above-the-fold content on the top of first page. Generally, people used to fold the newspaper and above the fold area offers important content. Similarly, the top visible portion of the webpage that loads first should offer most valuable content to the user. Hence, you should focus on optimizing the visible top section to load with blazing speed.
Content Delivery Optimization
Many speed tools like Google PageSpeed Insights measures how the website delivers above-the-fold content. You can see this as a measurement of First Contentful Paint (FCP). If they detect a blocking, you will see a warning to remove the blocking element. One of the popular suggestions you will see in Google PageSpeed Insights tool is to eliminate render-blocking resources. If you click on that suggestion, Google will show you optimizing delivery of critical CSS/JS and defer all non-critical CSS/JS.
Fixing render-blocking JavaScript (jQuery) is quite easy since themes/plugins by default load the scripts at the footer section. jQuery is the only problem, which may be required for many sites to load above-the-fold content. Since, WordPress also uses jQuery, you can ignore this error if it is only due to jQuery. Otherwise, use plugins like WP Rocket to combine and deliver all scripts if that does not break your site’s layout.
However, the problem is for generating critical CSS and loading it first. In this article, we will explain how to deal with CSS optimization to improve page speed score.
Related: Proper WP Rocket plugin settings to speed up your site.
Loading CSS in Websites
There are multiple ways to insert CSS in your webpage. You can do this as inline, internal or external ways. The most popular and recommended way is to link external stylesheets in the header section of a webpage. As the content in the header section loads first with the webpage, it drastically affects the above-the-fold content loading and hence the page speed.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 4 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Link Your Stylesheet URL Here">
</head>
<body>
Add Your Content Here
<script src="Add Your Script URL Here"></script>
</body>
</html>Loading CSS in WordPress
WordPress uses style.css as an external file for delivering theme’s styles. This is a mandatory file (in addition to functions.php) for running a WordPress website. In addition, each plugin on your site may add additional CSS filed. Open your website in Chrome browser and view the source code (make sure you have no caching plugins installed or disabled caching for the page).
You can see WordPress links all external stylesheets under header section of the page. This can cause multiple problems from the optimization perspective:
- Some themes use heavy CSS styles with few MB size. You do not need all these styles to be loaded when a user opens a webpage in desktop or mobile.
- There are different post types like products that may use completely different styles. In this case, you do not need the other CSS for initial (above-the-fold) loading.
Each page on your site needs a minimum CSS to load above-the-fold content. This minimum CSS needed for the page loading is called critical CSS in technical term. In all the above cases, Google PageSpeed Insights and other tools will show you a warning to optimize CSS delivery.
Remember, removing unused CSS and scripts are also related to using too much CSS / scripts on the page. However, this is quite different from critical CSS optimization. You may not even use some plugins on a specific page. For example, you do not need the CSS of contact form plugin on all pages of the site. In this case, CSS/JS files from contact form files are unnecessary on a regular blog post and you will see remove unused CSS/JS warning. Check out our article on how to disable unused CSS/JS in WordPress and optimize WooCommerce pages for admin AJAX calls.
How to Generate Critical CSS in WordPress?
Now that you know how important the critical CSS to improve the page loading speed. There are two ways to generate critical CSS for your site.
- Generate critical CSS manually and insert on your site
- Use WP Rocket plugin to optimize content delivery
We will explain both the process in details and you can choose the best one that works for your site.
Related: Will WP Rocket works with SiteGround hosting?
Manual Critical CSS Generation
There are many third-party tools available on the internet to generate critical CSS manually. However, this makes sense when all pages on your sites are similar and do not have custom content on above-the-fold area. You can try other free critical CSS generation services like Sitelocity.
- Go to Sitelocity website and enter your page’s URL.
- Click on “Generate Critical Path CSS” button.
- You can get the minified critical CSS for your page.
Now that you have generated critical CSS and the next task is to insert it on the header section of your site. In theory, you can insert the styles in your header.php file between <head> and </head> tags. There are plugins to help inserting styles in the header section without modifying template files. Autoptimize is one of the plugins we can recommend for this purpose. If you are already using Autoptimize for caching purpose, you can also use the same plugin for inserting critical CSS.
You can insert critical CSS under “CSS Options” of the Autoptimize plugin. First enable “Inline and Defer CSS” checkbox and paste the critical CSS in the textbox that appears.
As you can see, Autoptimize plugin can also automatically inline above-the-fold CSS while deferring other styles. However, this will quickly increase the cache size to 100% and you have no option in the plugin to auto purge the cache. In addition, it will break the site in most cases. You can go for Autoptimize CriticalCSS Power-Up add-on that will help you in better way. In order to use this add-on, you have to get the API from Criticalcss.com for $10 per month.
Why Manual Critical CSS Generation Will Not Work?
Though the above manual insertion process looks easy, it is not an easy task. Following are some of the reasons why your critical CSS will not work.
- You may have different content like pages, blog posts, products, etc. Each content type on your site needs different critical CSS to load above the fold content. Using plugin or manual insertion will load the critical CSS on all pages and break some content.
- You have to generate critical CSS each time when you update theme, plugin and WordPress core. Otherwise using old critical CSS will break your site’s layout. This is kind of impossible task for normal users to continuously update critical CSS for every single update on the site. With auto update options available, you have to be very careful before updating plugin/theme/core on your installation.
- You may need separate critical CSS for mobile and desktop devices.
With all these problems, the only option left is to use some plugin that will take care these and generate critical CSS dynamically and automatically.
Create Critical CSS for WordPress with WP Rocket
Fortunately, you have a caching plugin that exactly does this critical CSS generation in WordPress. WP Rocket is one of the most popular caching plugins for WordPress due to its simplified settings. Again, critical CSS generation is one of the beauties of the plugin that any normal user can get the benefit without breaking the site.
- First you have to purchase WP Rocket premium plugin.
- After installing and activating WP Rocket, go to “Settings > WP Rocket” and navigate to “File Optimization” section.
- Scroll down and enable “Optimize CSS Delivery” checkbox and select “Load CSS Asynchronously” button.
- Save your changes to start critical CSS generation process.
This will allow the plugin to auto generate critical CSS for each post type on your WordPress site. It includes front page. Home page, page, post and any other custom post type you use on your site. If needed, you can add fallback critical CSS that you manually generate using third-party tool. Generally, you can leave this fallback critical CSS box as blank. You can also enable separate mobile caching under “Cache” section.
Note that WP Rocket is a premium plugin with single site license available for $49. In our opinion, it is worth to purchase this plugin as it offers end-to-end caching solution for speed optimization. The plugin comes with one-year support and updates. After that, it will continue to work and you can use the critical CSS and other features without renewal. You can renew with 30% discount in order to get support and get any additional features. This is much better option compared to $10 per month for criticalcss API to use with Autoptimize.
Regenerate Critical CSS
When you update theme/plugin/WordPress core or add custom post types on your site, it is necessary to regenerate critical CSS. Otherwise, WP Rocket will use old critical CSS and break your site’s layout. Therefore, make sure to regenerate critical CSS without forgetting.
- Click on the “WP Rocket” menu on the top bar and select “Regenerate Critical CSS” option.
- Alternatively, you can go to the plugin’s dashboard and click on “Regenerate Critical CSS” button.
Custom Critical CSS for Specific Page
As mentioned, you may have a home page or another page created with a page builder plugin. This page will have a complete different critical CSS compared to all other blog posts on your site. In this case, you have to create separate critical CSS and load conditionally only on that page. WP Rocket can help you to achieve this with few clicks.
- Go to the page / post editor of the page you want to generate separate critical CSS.
- On the sidebar document panel, find “WP Rocket Options” panel. If you do not find, click on the three dots button on top right corner and select “Preferences”. On the pop-up, you can enable required document panels available on your site.
- Select “Optimize CSS Delivery” checkbox and click on “Generate Specific CPCSS” button.
- This will generate specific critical CSS for that page and the plugin will load this critical CSS when users visit the page.
Related: Review of WP Rocket caching plugin.
Testing Critical CSS
After implementing the manual method or using WP Rocket plugin, you can test the page by viewing the page source. Make sure to logout of your admin panel or enable caching for logged in users in the plugin. As you can see in the below screenshot, WP Rocket adds critical CSS in the header.
You can also check the pages in Google PageSpeed Insights tool. If everything goes fine, you will see eliminate render-blocking resources and other CSS errors under passed results. This indicates you have implemented critical CSS correctly on the site.
Final Words
We hope this article would have highlighted the importance of critical CSS in WordPress site. You can use the manual option when you have a smaller site that contains few pages. However, for a running blog that has large number of posts and different post types, you can try WP Rocket plugin. Though it cost you some money, you can get a complete caching solution for your site.
Leave a Reply
Your email is safe with us.