— Updated by gloomy-corner

Adding preload links with PHP code in WordPress

A preload link is a “ element with preload as value of its rel attribute. It does not load resources, just tell the browser to download and cache the resource with a high priority. Preloading the resources that block rending can improve performance.

A preload link example:

<link rel="preload" href="style.css" as="style">

Faster WordPress rendering … mentions how the author improves website performance by a few server configuration to preload two render-blocking CSS files. But the methods (HTTP2 Push) mentioned in it may not work for you, like you have not enabled HTTP2 even you should have.

Let’s see how to directly add preload links within the “ section for the resources which you want preload earlier for a better performance.

Note

You should only preload the critical resources, like the most render-blocking resources. You can test your page at webpagetest.org to check which are render-blocking resources.

You can put the code in a child theme or in your own plugin. See Create your own plugin for custom for more details.

About preload link

A preload link may have below attributes except rel=preload:

  • href Mandatory. The path of the resource.

  • as Mandatory. The type of the resource.

  • type The MIME type of the resource. It is specially helpful — the browser can use it to find out if it supports that resource, and will only download it if so, ignoring it if not.

  • media It allows you do responsive preloading. Like you can specify narrow images for media="(max-width: 600px)" and big image for media="(min-width: 601px).

  • crossorigin It is needed when preloading resources that are fetched with CORS enabled(e.g. fetch(), XMLHttpRequest or fonts).

    An example:


    Because of various reasons, fonts have to be fetched using anonymous-mode CORS. We must set crossorigin for it even it is not cross-origin here.

Add preload links in WordPress 6.1 or higher

WordPress 6.1 has added support for preload links. You can use wp_preload_resources to add your own preload links.

Below code preload a CSS file from the theme.

function mycustom_add_preload_resources ($preload_resources) {
    $preload_resources[] = array(
        'href' => get_stylesheet_directory_uri() . '/style.css?ver=3.1',
        'as' => 'style',
        'type' => 'text/css',
        'media' => 'all',
    );
    return $preload_resources;
}
add_filter('wp_preload_resources', 'mycustom_add_preload_resources');

Then a preload link like below will occur in the head element of final page HTML:

<link rel="preload"
  href="http://myexmple.com/wp-content/themes/mytheme/style.css?ver=3.1"
  as="style" type="text/css" media="all">

Note the original link which actually load the same CSS file will still occur as before.

<link rel="stylesheet" id="mytheme-style-css"
  href="http://myexmple.com/wp-content/themes/mytheme/style.css?ver=3.1"
  media="all">

Add preload links in WordPress 6.0 or lower

The wp_head action hook allows you to print content which will be present within the “ section.

<?php
function mycustom_add_preload_links () {
    $style_uri = get_stylesheet_directory_uri() . '/style.css?ver=3.1';
    ?>

    <link rel="preload" href="<?php echo $style_uri; ?>" as="style" type="text/css" media="all">

    <?php
}
add_action('wp_head', 'mycustom_add_preload_links', 5);

Check the effect

You can check the loading waterfall in the DevTools of Chrome or test it in webpagetest.org to see whether the resources are loaded earlier.

Another way to accelerate CSS loading is to inline them directly in the “ of the HTML. [Jetpack Boost](Jetpack Boost: WordPress Speed Optimization Plugin) plugin provides this feature. See how to do that with tools by yourself at Extract critical CSS.

Resource