how do you tell if resources are being preloaded in browser developer console

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?

Solution

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.

You may want to check whether preloading actually works in your browser. Here's a simple test to do so:

<!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.