Menu
I am using <link rel="preload" ...> technique to make the resources load faster, but I'm not seeing a measurable effect on page load times. I'm not sure if this is because the resources are not actually being preloaded, or for some other reason.
If I'm using Firefox to debug, how do I determine in the Firefox Developer Console whether a resource was preloaded?
544
Preloading Web fonts # The crossorigin attribute indicates whether the resource should be fetched with a CORS request as the font may come from a different domain. Without this attribute, the preloaded font is ignored by the browser.
Preloading your CSS (and other external resources) helps the page load quicker.
<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It's helpful when you need that resource a few seconds after loading the page, and you want to speed it up. The browser doesn't do anything with the resource after downloading it.
Preload is an early fetch instruction to the browser to request a resource needed for a page (key scripts, Web Fonts, hero images). Prefetch serves a slightly different use case — a future navigation by the user (e.g between views or pages) where fetched resources and requests need to persist across navigations.
Preloading resources only has a measurable effect if the <link rel="preload" ...> and the actual request of the resource are "far apart" from each other. E.g. if you want to preload a CSS style sheet but have the <link rel="stylesheet" ...> right after the <link rel="preload" ...>, you probably won't see any difference. It may be different when there is a resource within that stylesheet that you want to preload.
Furthermore, you need to ensure that the syntax of the preload is correct. For the preload to work, you have to specify two more attributes besides rel, href to define the source to preload and as to specify the type of resource.
See the description of <link> and the one for how to preload content on MDN for more info on that.
To check whether preloading has any influence on performance, you should have a look at times and the order of the resources being loaded within the DevTools Network Monitor.
Having said that, preloading actually does not work in Firefox yet (as of version 68). According to bug 1222633 it's implemented since Firefox 56, but there are some things like preloading resources marked with no-cache header which still need to be implemented. Checking the advanced options in about:config there is a preference network.preload, which controls preloading but is set to false by default. Also, the aforementioned MDN pages mention that this feature was disabled due to some issues.
Here's a simple test for whether preloading works in your browser:
<!DOCTYPE html>
<html>
<head>
<link rel="preload" href="image.jpg" as="image" type="image/jpeg"/>
<script>
for (var i=0; i < 10000000000; i++) {
var x = i;
}
window.addEventListener("DOMContentLoaded",
e => document.body.style.backgroundImage = 'url(image.jpg)'
);
</script>
</head>
<body>
</body>
</html>
If preloading is supported, the request for the image should be made before the JavaScript gets executed, i.e. you should see the request for the image immediately after the one for the HTML document is done.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
