Why is browser loading CSS/JS/img assets in unexpected order (not the - Enhance your coding expertise with Sarah on @onlycoders.net

2 years ago

#43853

Sarah

Why is browser loading CSS/JS/img assets in unexpected order (not the order of HTML source)?

My understanding

So my understanding is, if you have a website with the following source:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
    <script src="script-head.js"></script>
</head>

<body>
    <img width="400" src="image.jpg" />
    <script src="script-closing.js"></script>
</body>

</html>

...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):

style.css
script-head.js
image.jpg
script-closing.js

I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.

All makes sense to me. So far so good.

The confusion

But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.

If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/

It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).

I'm not sure why this is happening.

<!doctype html>
<html lang="en">
    <head>
        ....
        <link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
        ....
    </head>
    <body class="theme-index">
        ....
        <img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
        ....
        <script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
        ....
    </body>
</html>

My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.

How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.

html

browser

shopify

assets

core-web-vitals

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs