Introduction

WordPress is a popular content management system that allows users to create and manage websites. Optimizing WordPress websites for performance is crucial in improving user experience and search engine rankings. One important aspect is minimizing render-blocking resources. These resources, often linked in the header, can significantly slow down a site’s loading speed. In this article, we’ll delve into using add_filter functions in WordPress, specifically “style_loader_tag” and “script_loader_tag”, to modify header tags for stylesheets and script links.

Understanding Render-Blocking Resources

When you test your site’s performance using tools like Lighthouse, you might encounter warnings related to “render-blocking resources”. These resources, typically CSS and JavaScript files loaded in the header, prevent the page from rendering until they are fully loaded. This delay affects the site’s performance and user experience.

Optimizing with add_filter

Fortunately, WordPress offers a powerful way to modify these tags without altering core files. By using the add_filter function with “style_loader_tag” and “script_loader_tag”, we can customize how these resources are loaded in the header.

Here’s an example of how you can use add_filter for modifying script tags:

// Defer JavaScript Loading
function add_defer_attribute($tag, $handle) {
    // Add handles of the scripts you want to defer
    $scripts_to_defer = ['script1', 'script2'];

    if (in_array($handle, $scripts_to_defer)) {
        return str_replace(' src', ' defer="defer" src', $tag);
    }

    return $tag;
}
// script_loader_tag: This filter allows you to modify the HTML output of JavaScript script links
add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);

In this example, add_defer_attribute function adds the defer attribute to specific scripts defined in the $scripts_to_defer array. This defers the loading of these scripts until after the page has been parsed.

Tip: To determine the handle of a script, add a comment to the end of the <script> tag with the handle value. e.g. return $tag . "\n\n";. Check the source of the webpage or use the developer tools to find the handle value.

Tip: Use the is_admin() function to distinguish between client-facing and admin pages.

Similarly, to modify stylesheet links to remove unnecessary stylesheets, you can use:

// Remove Unnecessary Stylesheets
function remove_unused_styles($tag, $handle) {
    // Add handles of the stylesheets you want to remove
    $styles_to_remove = ['style1', 'style2'];

    if (in_array($handle, $styles_to_remove)) {
        return '';
    }

    return $tag;
}
// style_loader_tag: This filter allows you to modify the HTML output of CSS stylesheet links
add_filter('style_loader_tag', 'remove_unused_styles');

This code snippet illustrates how to remove specific stylesheets by checking their handles defined in the $styles_to_remove array.

Implementing Modifications

To apply these modifications:

Navigate to your WordPress dashboard
Go to “Appearance” and select “Theme File Editor”
Choose the functions.php file from the list of theme files
Insert the provided code snippets at the bottom of the functions.php file
Save the changes

Conclusion

Using add_filter with “style_loader_tag” and “script_loader_tag” in WordPress allows for efficient modification of header tags without directly altering core files. By deferring scripts and removing unnecessary stylesheets, you can address render-blocking resource issues, significantly improving your site’s performance.

Remember, while these methods can enhance performance, exercise caution and always backup your files before making any changes. Optimizing WordPress headers through add_filter is a powerful way to address performance warnings and provide a better user experience without modifying core files.

Test the client-facing webpage and editor separately to ensure that all necessary scripts are loaded.