Improving the performance of a web page

In this section, we will look at some of the mechanisms available in HTML that allow us to optimize and tweak how resources load on a web page. Controlling the load according to your specific requirements, making sure the right assets load upfront when needed, and loading less urgent resources with lower priority can help us get a rendered web page faster, improving our FCP and LCP scores.

Controlling how assets load

Images can bring a web page to life but, equally, they can bring a web page to a grinding halt while thousands of unoptimized images, amounting to many MB of data, are downloaded over a slow or intermittent connection.

Info

According to the Web Almanac state of the web report for 2022, the median page weight for a mobile website was 2,019 KB, with images contributing 881 of those KB (https://almanac.httparchive.org/en/2022/page-weight#page-weight-by-the-numbers).

When a browser parses an HTML document, it will do so starting from the top of the document and working down to the bottom of the document. When it comes across an img tag with a src attribute, the default behavior for the browser is to immediately create a connection to wherever that image asset is stored and to begin loading that image. When the image is loaded, it will be displayed.

Eager loading

This loading behavior is known as eager loading. In many cases, this is the behavior you want. If the image is the first thing the user will see, you want it to load as quickly as possible. However, there are times when eagerly loading all the images on a web page is not optimal.

Let’s consider the example in the previous exercise, where we created a gallery of images. When the page loads, we see one main image and a row of thumbnails, and there are further thumbnail images that do not appear on screen until we have scrolled further down the page. Each of the thumbnail images can be clicked on to replace the main hero image with a larger version of the thumbnail image.

For a user arriving at the gallery, the most important thing will be to see the hero image, and we should load this as a priority. We don’t want all the images to load with the same priority because some will be below the fold or will not be seen until they have been selected.

Lazy loading

One of the great benefits of modern web technologies is that they provide very simple declarative ways of controlling your web page’s performance. A good example of that is the lazy loading attribute for images. By simply adding the loading="lazy" attribute, we have a mechanism to delay the loading of images while they are out of view.

If we want to stop an image loading until it is onscreen, we simply add the loading="lazy" attribute:

<img
  src="assets/important-image.jpg"
  loading="eager"
  alt=""
/>
<!-- somewhere lower down the page -->
<img
  src="assets/secondary-image.jpg"
  loading="lazy"
  alt=""
/>

Prioritizing loading

To optimize a web page’s performance and the time taken to get to FCP, it is useful to optimize the critical path by loading critical assets as quickly as we can.

We’ve learned how to postpone the loading of an asset until it is needed by the user, but we also have some tools available to help us prioritize how assets are loaded. We can push them to the front of the queue with resource hints and fetch priority hints.

With resource hints, we set a link element with one of three rel attribute values – preload, prefetch, or preconnect. These values have the following effect on resource loading:

• <link rel="preload" is used to preload an external resource that is required for the initial render of the page
• <link rel="prefetch" is used to load content that will rendered on the next page
• <link rel="preconnect" establishes a connection to a server to prepare the connection for loading resources

We can specify the content type being preloaded with the as attribute. We can specify many content types. Some of the more commonly used are image, font, style, script, and fetch. So, for example, if we want to preload a particular image asset, we set the as attribute to "image".

Priority hints give us further control over prioritizing resources by letting us set a hint for the browser to either increase or decrease the priority of a resource.

Priority hints are set using the fetchpriority attribute with one of three possible values: auto, high, or low. We can apply this attribute to resources via img tags or link tags that reference external resources, and we will prompt the browser to prioritize the resource differently.

Improving image performance

When it comes to images, fonts, and other heavy media assets, a lot of our performance issues can come down to the sheer size of the file. It is important for user experience to make sure we have optimized any images on our web page.

Things to consider when working with images on the web are whether we are using the best encoding and format for the image. All photos used to be jpeg and png, and these formats were used for lots of assets, but in recent years we have had a lot of improvements to web image formats – webp, avif, and jpeg xl all provide formats that can greatly reduce the size of an image.

Note

A great tool for trying out different compression techniques and settings for images is Squoosh (https://squoosh.app/).

Layout shift and images

Images can contribute to page load time. They can also contribute to another aspect of web performance – layout shift.

Images can cause layout shifts if the size of the element into which they are loaded is not the same as the size or aspect ratio of the image, and when the image loads it causes a shift in the layout of the page.

The important thing to consider when solving layout shifts with images is to set the dimensions for an image using width and height. This can be combined with the aspect ratio attribute.

Exercise – optimizing the performance of a web page

In this exercise, we will carry on from the previous exercise, where we created and tested the performance of an image gallery.

Here, we will do some work to optimize the performance of the image gallery we created using the techniques we have discussed for lazy loading images and preloading high-priority assets.

Here are the steps for optimizing the performance:

1. First, we will make a copy of the gallery. In the chapter_7 folder that we created in the previous exercise, copy exercise_01.html and save it as exercise_02.html.
2. Our first task will be to lazily load all the images except for the first hero image. This will really help with the FCP metric. We will add the loading="lazy" attribute to each of the hero images (except for the first one) and to each of the thumbnail images. This way, the only image that will load if not onscreen is the first hero image.
3. Next, we’ll hint to the browser which are our highest priority images, and which can be loaded later. Again, we will consider all the thumbnails and all hero images aside from the first hero image as a lower priority. We will set the fetchpriority="low" attribute for each of these images. We will then set the fetchpriority="high" attribute for the first hero image.
4. Finally, to make sure the first hero image loads prior to the first page render, we will add a preload link to the header of the page. Above the style tag in the head of the document, we add the following line of code:

   <link
     rel="preload" as="image"
     href="assets/andrew-ridley-Kt5hRENuotI-unsplash.jpg"
   />

With these easy-to-implement optimizations, we will see some striking improvements to our web page loading experience. Testing in Lighthouse led to some real improvements in the overall performance score and the FCP and LCP scores.

While these scores can vary, you can see the results in the following screenshot with an overall score of 85% and FCP and LCP both showing 0.6 s.

Figure 7.8: The Lighthouse report with a Performance score of 85

In this exercise, we’ve seen some simple ways to improve performance scores that, combined, can really improve the user experience of your web page.