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 formedia="(max-width: 600px)"
and big image formedia="(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
- MDN: Link types – preload
Adding
media
attributes allows you make responsive preloading. -
web.dev: Preloading responsive images
Preload images according to the device.
- web.dev: Preload critical assets to improve loading speed
Resource hints, for example,
preconnect
andprefetch
, are executed as the browser sees fit. Thepreload
, on the other hand, is mandatory for the browser. Modern browsers are already pretty good at prioritizing resources, that’s why it’s important to usepreload
sparingly and only preload the most critical resources. -
HTTP/2 vs preload links
HTTP/2 Push is able to push resources that the browser hasn’t sent the request for yet, i.e. before the HTML even started to be sent to the browser.
But it cannot be used for third-party resources or take the browser’s cache and non-global cookie state into account.
Preload links can take care the use cases that HTTP/2 cannot.
-
Preload, Prefetch And Priorities in Chrome
Many use cases that use preload to accelerate website loading.