People who visit your website don’t want to wait a long time to see your content. If you don’t optimize your code, render-blocking resources like CSS can contribute to visitors’ perception of slower load times.
Fortunately, you can easily generate critical CSS for your website. By installing a plugin like Jetpack Boost, you’ll be able to extract all the necessary CSS for displaying above-the-fold content. This can be key to making your website appear faster and more user-friendly.
In this post, we’ll explain critical CSS and why you should consider generating it for your website. Then, we’ll show you two different ways to do this in WordPress.
What is critical CSS in WordPress?
Once a visitor clicks on a link to your website, their browser has to process a series of tasks to render the content fully. All the steps involved in downloading, processing, and converting the code into pixels make up the Critical Rendering Path.
If a certain CSS file stops your website from rendering, it becomes a render-blocking resource. Even if it isn’t necessary for displaying the page, visitors won’t see the content until this render-blocking CSS is fully processed.
Critical CSS refers to the required CSS code for the above-the-fold web content. Essentially, it’s the bare minimum code the browser needs to display the first section of content to visitors.
The benefits of generating critical CSS
Generating critical CSS for your web pages involves eliminating any render-blocking CSS and enabling the browser to only process what’s necessary.
1. Optimize content delivery
When you optimize CSS delivery for your WordPress website, it can improve the rendering process. To a front-end visitor, it might even seem like your pages are loading more quickly.
When someone lands on your website, the first thing they’ll see is the above-the-fold content. This is everything displayed on the front page without needing to scroll.
By extracting critical CSS, you’re optimizing the CSS files needed to display this initial section. Without it, users may see partial elements that haven’t been fully rendered.
A common misconception is that critical CSS decreases your loading time. Although this isn’t true, the optimization technique can improve perceived performance.
Essentially, users will think your pages are loading faster because the browser can simply display above-the-fold elements more efficiently.
2. Improve Core Web Vitals
Although WordPress critical CSS doesn’t increase or decrease page loading time, it can improve your Core Web Vitals. These metrics analyze a website’s user experience.
Here are the Core Web Vitals:
- Largest Contentful Paint (LCP): A website’s loading performance
- First Input Delay (FID): A website’s interactivity
- Cumulative Layout Shift (CLS): A website’s visual stability
After you scan your website for a Core Web Vitals report, you may see additional metrics like First Contentful Paint (FCP) or Time to First Byte (TTFB). These impact LCP and play an important role in the loading process.
Critical CSS directly impacts FCP. Put simply, FCP measures the time it takes to render the first element on a web page after it starts loading. If your site has a poor FCP score, visitors will often see a blank page for a while.
As a WordPress website owner, you should aim to get FCP under 1.8 seconds, but many elements can negatively impact this score, including:
- A slow server
- Bulky font files
- Large Document Object Model (DOM) size
Since render-blocking CSS contributes to FCP, generating critical CSS can improve this score. During this process, you’ll inline all the CSS needed to render above-the-fold content.
How to test your website for render-blocking CSS
Before generating WordPress critical CSS, you’ll need to know whether it’s necessary for your website. Since large CSS files are considered render-blocking resources, you can scan for them with a speed optimization tool.
To get started, enter your website’s URL into PageSpeed Insights. This Google software will analyze your site’s performance with various speed audits.
At the top of the page, you’ll see your Core Web Vitals assessment. It includes metrics for Largest Contentful Paint, First Input Delay, Cumulative Layout Shift, First Contentful Paint, Interaction to Next Paint, and Time to First Byte.
As you learned earlier, render-blocking CSS is closely tied to the FCP score. Make sure both your mobile and desktop assessment results are 1.8 seconds or less.
If you receive a poor score, you may have bulky, unoptimized CSS files on your website. To verify if this is true, scroll down to Opportunities. This section provides specific suggestions to improve your website’s loading time.
How to generate critical CSS in WordPress
Now that you understand more about WordPress critical CSS and why it’s important, it’s time to generate it! Regardless of your skill level, you can easily learn how to optimize CSS delivery in WordPress by following our beginner-friendly tutorial.
Method 1: Generate critical CSS with a plugin
Although you could generate it yourself, optimizing CSS delivery with a WordPress plugin is often easier. The right tool can automatically defer less important CSS. Plus, you won’t have to edit any code manually.
To start using Jetpack Boost, install and activate it in WordPress. Then, you’ll receive a score based on your website’s current performance.
With the free plugin, you’ll see an option to Optimize CSS loading. Alternatively, you can upgrade to a paid subscription to generate critical CSS automatically. This will help avoid having to regenerate CSS every time you make a change.
Method 2: Manually generate critical CSS
If you don’t want to use a plugin, you can also manually generate critical CSS. It’s important to remember that this method involves editing your site’s code, so it can be a more complicated process for beginners.
Step 1: Back up your website
To get started, you’ll want to create a backup of your WordPress site. If you make a mistake in your site files, you can easily revert to this saved version. This way, you won’t lose any important data.
If you need to manage your backups easily, you can install the Jetpack VaultPress Backup plugin. This tool stores backups off-site and provides one-click restorations, even if your site is completely down.
Here’s how to get started:
Go to Plugins → Add new in your WordPress dashboard. Search for “Jetpack VaultPress Backup” and click Install now → Activate.
Then, you’ll see a new window that will allow you to set up the plugin. Click Set up Jetpack.
Then, connect your site to your WordPress.com account. Once you’re redirected back to your site, click Upgrade now to view several options for Jetpack VaultPress Backup plans.
At a minimum, you’ll need the Backup plan, but Security and Complete provide additional tools for protecting, growing, and speeding up your site.
Your first backup will start automatically, and you can check its progress by going to Jetpack → Backup in your WordPress dashboard.
If any mistakes happen during the next few steps, simply come back to this page and hit Restore to this point. This will revert your site to the older version, eliminating any errors that occurred.
Step 2: Use a critical CSS generator
Once you know that your website is backed up, you can start generating your critical CSS. One of the easiest ways to do this is with a critical CSS generator. This tool will automatically produce your critical CSS, preventing you from having to manually create code.
First, open the CoreWebVitals Critical CSS Generator. Enter the URL for your website or a specific page you want to optimize. Then, hit Generate critical CSS.
Once it’s finished loading, you’ll see the CSS code generated in the text box. Copy this code.
After you save this code, you can inline it on your website!
Step 3: Inline critical CSS
When someone visits your website, their browser will retrieve your site’s files from the server. It will first check the <head> section for necessary content during the parsing process. Then, it’ll continue rendering the <body> content.
To prioritize critical CSS, place it in your files’ <head> section. This is called inlining. When you inline CSS, the browser requests that this stylesheet is retrieved before rendering the rest of the page.
Essentially, inlining CSS will place the code where it needs to be used. So, a visitor’s browser won’t have to parse render-blocking files before displaying the target content.
Once you’ve copied the generated critical CSS, you can inline it in your files. Navigate to your public_html folder via FTP. Then, go to wp-content → themes → your active theme and open the header.php file.
In this header file, locate the <title> tag. Beneath it, add the critical CSS using <style> tags. Finally, select Update File.
Frequently asked questions (FAQs)
So far, we’ve discussed critical CSS and how to generate it. If you still have questions about inlining CSS on your website, we’ll answer them here!
Can generating critical CSS break your site’s appearance?
If done incorrectly, generating critical CSS could negatively impact your site’s appearance and layout. Fortunately, you can reverse any changes by simply restoring a saved backup of your WordPress site. Using Jetpack VaultPress Backup, you can view an activity log and restore old versions of your site with one click.
Plus, you can use a plugin like Jetpack Boost to turn critical CSS on and off whenever necessary. These simple settings were built according to WordPress best practices, so they’re less likely to affect your site on the front end.
What else can I do to optimize my CSS code?
If you want to further optimize CSS on your site, consider minifying it. You’ll remove unnecessary code during CSS minification to reduce the CSS file sizes.
Your CSS code likely has spaces and line breaks to make it easier to read. Since a browser can process code without these extra elements, you can delete them. This reduces the resources and time needed to run the files.
You can also remove unused CSS altogether. By reducing your files to only the necessary code, your website will start loading faster.
What else can I do to improve my page speed?
One of the best ways to speed up your site is by improving your Core Web Vitals. Using a tool like PageSpeed Insights, you can identify unoptimized elements like render-blocking resources.
Additionally, consider implementing lazy loading for images. With this setting in Jetpack Boost, pictures below the fold won’t load until visitors scroll down. This can prevent your website from loading every image simultaneously, delaying the rendering process.
Lastly, a Content Delivery Network (CDN) can significantly speed up your website. Instead of relying on one server, a CDN uses a system of data centers worldwide. An option like Jetpack’s CDN can improve content delivery for images and static files.
Optimize CSS delivery in WordPress
If you’re trying to improve your website’s content delivery, it’s important to eliminate any render-blocking resources. Since unoptimized CSS can delay the rendering process, it’s worth generating critical CSS. Although doing this won’t directly improve loading time, it will enable visitors to see above-the-fold content much faster.
To review, here’s how to generate critical CSS in WordPress:
With Jetpack Boost, you can optimize CSS without editing any code. After downloading and activating the plugin, you’ll be able to generate critical CSS with just one click!