Prioritize the images |
To start we need to group the images into 3 categories:
1. **Critical images** — these images will always load
2. **Must-have images** — these images should always load
3. **Non-critical images** — it’d be nice if these images loaded
*Of course—the images themselves may just fail to load because of slow Internet—there’s nothing we can do to mitigate that.*
For this exercise, we’ll say the first 2 images are critical, the next 2 are must-have, and the rest are non-critical images.
Let’s adjust our HTML to group the images into our three categories.
|
html |
index.html |
⋮
</head>
<body>
<div class="grid">
{% for img in site.data.images limit:2 %}
<div class="critical-img unit xs-1 m-1-2">
<div class="embed embed-16by9">
<img class="embed-item" src="images/{{img}}" alt="">
</div>
</div>
{% endfor %}
{% for img in site.data.images offset:2 limit:2 %}
<div class="non-critical-img unit xs-1 m-1-2">
<div class="embed embed-16by9">
<img class="embed-item" data-src="images/{{img}}" alt="" hidden>
<noscript>
<img class="embed-item" src="images/{{img}}" alt="">
</noscript>
</div>
</div>
{% endfor %}
{% for img in site.data.images offset:4 %}
<div class="non-critical-img unit xs-1 m-1-2" hidden>
<div class="embed embed-16by9">
<img class="embed-item" data-src="images/{{img}}" alt="">
</div>
</div>
{% endfor %}
</div>
</body>
</html>
|
|
|
| num |
text |
6 |
In this loop we’re limiting the output to the first two images.
These are the “critical” images—they will always be shown.
|
|
| num |
text |
7 |
There’s a new class here, `.critical-img`, to help us remember the importance of this image.
|
|
| num |
text |
13 |
This is a duplicate of the previous loop with a few small modifications:
- It has `offset:2`, meaning it will start at the item with the index of 2, aka the 3rd item.
- It has `limit:2`, again, here we only want to spit two images out—these are our “must-have” images.
|
|
| num |
text |
14 |
There’s new class here, `.non-critical-img`, to denote these as being “non critical” images—we’ll be using this in JavaScript later.
|
|
| num |
text |
16 |
Notice how the `src="…"` attribute doesn’t exist any more, now it’s `data-src="…"`, this is to prevent the image from downloading. It can’t download unless it has an `src="…"` attribute.
It also has the `hidden` attribute so that it doesn’t accidentally get shown.
|
|
| num |
text |
17-19 |
The `<noscript>` tag is here to force the image to be visible if JavaScript isn’t available.
Inside the `<noscript>` tag is a standard `<img src="…">` tag that will only get triggered if JavaScript is disabled in the browser.
|
|
| num |
text |
23 |
We’ll start outputting the images with the fifth one.
|
|
| num |
text |
24 |
Here we have a `hidden` attribute so this whole grid unit isn’t shown until the JavaScript executes.
|
|
| num |
text |
26 |
Again we’re using the `data-src="…"` attribute to prevent these images from loading.
|
|
|
In the code above we have three loops, each has a specific purpose and ties to the our image categories:
1. The images in the first loop will always show.
2. The images in the second loop will show with or without JavaScript, essentially they will also *always* show.
3. The images in the third loop will only show when the JavaScript is triggered.
**Why bother having the second loop at all if they’re always going to show?** To help the page load faster. Most (almost all) browsers have JavaScript enabled, so these images can be triggered later with JavaScript. The page will load super quick, showing only the images in the first loop, then the JavaScript will kick in and start downloading the rest—but our user will already have a nice, complete page.
|