Let us learn how to Add defer to CSS WordPress. At Bobcares our WordPress support services can give you a detailed overview of the whole process.

Deferring Render-Blocking CSS

One of the causes of slow website loading speed is render blocking CSS. By default, a web browser must wait for all CSS to load before it can begin displaying a webpage.

During this period, the user will see a blank page with no way to engage, giving a negative user experience. Let’s go through how to delay render-blocking CSS loading in WordPress to increase response speed.

In WordPress, it will import each CSS file as follows:

link rel='stylesheet' href='../plugin.css' type='text/css' media='all'

To load this CSS file, change it to this :

link rel='stylesheet' href='../plugin.css' media="print" onload="this.media='all'"

For this method to add defer to CSS WordPress the idea is to switch from media= “all” to media= “print.” This will tell the browser to use this CSS file when printing the document and is thus a non render blocking resource. Finally, utilize the onload event to reset the media to “all.”

There is no need for a polyfill or JavaScript because this works in all major or modern browsers.

Note: The old technique of using rel=”preload” is no longer available in all browsers and requires some JavaScript intervention to operate.

Add defer to CSS wordpress

To add CSS to the head section of a WordPress theme, use the wp enqueue style in function.php. Here’s an example of how the theme imports ionicons.css. to add defer to css WordPress:

wp_enqueue_style('ionicons', get_template_directory_uri() . '/assets/lib/ionicons/css/ionicons' . $min . '.css'); 

The CSS file should then be manually added to header.php.

link rel='stylesheet' id='ionicons-css' href='[path-to-css-file]/ionicons.min.css?ver=5.4.1' media="print" onload="this.media='all'"

Another function example :

The method is to load the stylesheet with media="print which notifies the browser that this file is intended for print viewing rather than normal browsing of the page.

The idea is to utilize JavaScript to notify the browser that when it has finished loading. Change the stylesheet from print to all, which will load it for the usual view.

This will add defer to CSS WordPress. This basically delays CSS loading till the end. In this case, deferring the WordPress Block Library will not be shown. And will reduce the render time by making the following change:

function custom_use_print_block_library( $html, $handle ) {
$handles = array( 'wp-block-library' );
if ( in_array( $handle, $handles ) ) {
$html = str_replace( 'media=\'all\'', 'media=\'print\' onload="this.onload=null;this.media=\'all\'"', $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'custom_use_print_block_library', 10, 2 );Code language: PHP (php)

To be inserted into the theme’s functions.php file.

[Need assistance with similar queries? We are here to help]

Conclusion

To sum up we have now seen how to add defer to CSS wordpress. With the support of our WordPress support service, we have gone through all of the setup procedures.