How to Fix Load CSS Asynchronously

The issue “Load CSS Asynchronously” is a common challenge for WordPress websites. Let’s talk about this problem and its solution in detail.

Understanding the Load CSS Asynchronously Issue

Many plugins claim to fix it and some do pretty well. However, if you like to fix things on your own, then here is a simple way to do it without any plugins.

What is “Load CSS Asynchronously”?

Loading CSS asynchronously means fetching style sheets without delaying the webpage display. It enables the page to begin rendering while stylesheets are still loading, reducing the risk of delayed content. However, it may cause a temporary unstyled appearance, known as a flash of unstyled content.

When to “Load CSS Asynchronously”?

A website should consider loading CSS asynchronously when it wants to enhance its performance by optimizing the order in which resources are fetched. Loading CSS asynchronously allows the web page to start rendering before all stylesheets are fully downloaded. This can result in faster page loading times, providing a better user experience, particularly on slower network connections or for pages with large CSS files.

How to Fix this Issue?

In WordPress, you can address the issue of “Load CSS asynchronously” by using a combination of plugins and manual adjustments. Here’s a step-by-step guide:

By using the Autoptimize Plugin

WordPress includes the Autoptimize plugin which is free and perfect to fix this issue. You can follow the below steps to get it working.

1. Install Autoptimize:
   • Go to your WordPress dashboard, like the control center for your website.
   • Click on “Plugins,” then “Add New,” and search for “Autoptimize.”
   • Once you find it, click “Install” and then “Activate.”
2. Find Autoptimize Settings:
   • Now, look for “Settings” on the left-hand side of your WordPress dashboard.
   • Click on “Autoptimize.”
3. Tweak CSS Options:
   • Look for the part that says “CSS Options.”
   • There, you’ll see two checkboxes – one that says “Optimize CSS Code?” and another that says “Inline and Defer CSS?”
   • Make sure both of these are checked.
4. Save Changes:
   • Scroll down to the bottom of the page.
   • Click the button that says “Save Changes and Empty Cache.”
5. Check Your Website:
   • Visit your website and click around to make sure everything looks good.
   • Check if your site is loading faster than before.

By using Manual Steps

You can even fix to load the CSS asynchronously without using a plugin. For this, you need to follow the below steps.

Step 1: Open Your WordPress Dashboard

Log in to your WordPress dashboard. This is where you control and manage your website.

Step 2: Locate the Theme’s Functions File

In the dashboard, find a file named “functions.php.” It’s like a settings file for your website’s design.

1. In your WordPress Dashboard, go to “Appearance” on the left sidebar.
2. Choose “Theme Editor” from the submenu.
3. On the right side, you’ll see a list of theme files. Look for “Theme Functions (functions.php)” and click on it.

Step 3: Add a Code Snippet

Copy and paste the following code into the “functions.php” file. This code helps your website load CSS more efficiently:

function load_css_asynchronously($url) {
    if (strpos($url, '.css') !== false) {
        echo '<link rel="stylesheet" href="' . $url . '" media="print" onload="this.media=\'all\'" />';
    } else {
        echo '<link rel="stylesheet" href="' . $url . '" />';
    }
}

add_filter('style_loader_tag', 'load_css_asynchronously');

Step 4: Save Changes

Save the changes you made to the “functions.php” file. It’s like updating your website’s settings.

Step 5: Check Your Website

Go to your website and navigate around. Ensure everything looks good and that your site is loading faster.

By following these steps, you’ve essentially optimized your website to load CSS in an asynchronous way that speeds up the loading time for your visitors.