Our Detailed Guide to How to Improve Page Speed. Proven Tactics

How often do you leave a page before it loads? According to Google, as many as 53% of mobile users decide to leave a site if it takes more than three seconds to load. What causes a page to load slowly, and how to deal with it? In our article, we'll discuss these issues in detail.

What is page load speed, and what affects it?

Web page load speed is the time between clicking on a given link and the moment when the given page loads (or starts responding to our interaction). This issue is very important in terms of UX (User Experience) – after all, none of us wants to wait for a slow website to load.

It's also worth noting that nowadays, the page load speed on mobile devices is as important, sometimes even more important, than on desktop computers and laptops. It's a good idea to start thinking about this aspect already during the application design process. When styling our website, the mobile-first approach (creating mobile versions of applications first) will usually cut a dozen or so percent of the file size, which in the long run can make a visible difference.

Number and size of additional files

The vast majority of websites that you can see on the Internet often use various images or scripts to, e.g., reflect what they want to present, improve the user experience or encourage them to take some action.

The days of web pages with long walls of text are long gone, but this change has resulted in a much larger amount of data that the browser needs to handle. We can check at any time what exactly our browser downloads after entering any page. To do this, just open the Network tab in the developer tools (we recommend using the Ctrl+Shift+I keyboard shortcut for this). The page should then be refreshed, and the entire list of downloaded files can be seen.

An example from the https://youtube.com website.

Fonts

Although they seem inconspicuous because it's just the style and typeface of letters, fonts may contribute to the total website load time. This issue concerns mainly the designers, although some responsibility also rests on the shoulders of developers because we need to answer a few questions here:

• Does our website need so many different fonts?
• Do the fonts that we've uploaded to the server contain only the styles we use?
• Do we use font substitution to limit Cumulative Layout Shift (CLS)?
• Do we send fonts in the most optimal format?

Invisible elements

There's more happening on a website than just what we can see at a given moment. Some websites may be richly covered with various elements that, although currently invisible, may put an additional load on our browser.

Suppose we want to visit a really long page. The longer the site, the more stuff it contains, which means more data to download. The browser will download the entire page and everything that has been prepared for it to be available "for starters", even though what we can see is only a fraction of the whole.

Sub-optimal code

If you've ever encountered a situation where it seemed that the page had already loaded, but you couldn't interact with it, e.g., by clicking or scrolling, the culprit could be an inefficient code.

Most often, the effect we want to achieve on the website can be written in a thousand different ways. However, not every of these will make the code execute with the result we expect.

The script that tracks the page scrolling by the user usually doesn't have to execute every time, but only when the visitor has stopped scrolling the page. However, sending a dozen or several dozen requests to the API per second is definitely not a good solution.

How to do a website speed test?

In order to check the page load speed, as well as its overall performance, you can use a tool that's built into the browsers from the Chromium family (e.g., Chrome, Brave). To do this, we run the developer tools again, more specifically, the Lighthouse tab. With this tool, we can audit the page we're on. Of course, we can also do this with other browsers using the PageSpeed Insights tools.

An example of a page audit performed with PageSpeed Insights.

After the carried-out inspection, we'll receive a package of data on various issues related to page loading and more. The tool provides various statistics and graphs. The big advantage of using this application is the fact that, in addition to the problems found, we also get an explanation of why a given thing is unfavorable and how to fix it.

It would be a good idea to run such a test for both the mobile and desktop versions because the results may differ significantly. This is due to the fact that different versions of scripts or styles may be sent to different devices. For mobile devices, other aspects are being taken into account more and others less, depending on the adopted standards.

It's also worth noting that by improving the factors from the Core Web Vitals section, we'll improve both the user experience on the website and the aspects related to SEO. Google (or other search engines) will be more likely to display such a site on the first pages of search results.

Additional help in the struggle with optimizing the operation of our website is the Performance tab in the developer tools. Using it, we can record the operation of the page and then analyze why this page took a given amount of time to load and what caused it. We'll be provided with the exact hierarchy of code requests, together with screenshots of the page during recording it. We'll also check there the animations displayed on the page, potential memory leaks, or, e.g., the use of the graphics card load.

How to improve page load speed?

We already know what affects the page load and how to check it. Now, the most important issue is how to implement this newly acquired knowledge and improve our website performance. Who is responsible for the loading speed though? Developers, content marketers, or maybe the person dealing with the hosting server and implementations? It turns out that everyone can contribute to the faster loading of a given website.

Image optimization

Unoptimized graphics may significantly put a load on our browser with their weight. Particular attention should be paid to the places where users can upload their own images. Most often, the images we add to a web page are no bigger than approx. 500x500px (not counting those used for creating original designs), so you need to make sure that the actual size of a graphic element doesn't exceed the size displayed in the browser.

When using Drupal, the Responsive Image module will be perfect for this, as it allows us to prepare a properly scaled image, depending on the width of our device's display, in combination with a powerful browser mechanism – a picture tag. Within it, we can freely set the size of the image to be downloaded from the server to the user's browser, depending on several factors:

• display width,
• pixel density (Apple devices and newer phones provide a higher density than regular monitors),
• support for various image file formats.

In addition, we can also "slim down" our photos using compression. Various tools have been developed for this purpose, such as Image Compressor. Such compression will allow cutting the size down by several dozen kilobytes, and sometimes even more.

The key aspect when optimizing the graphic elements is also their file format. Although .jpg and .png have served us well for years, in the case of browsers, it's worth considering using newer, more optimal solutions. Images in the .webp or .avif format can take up to 10x less space than their older counterparts. However, they must be properly implemented. Incorrect implementation of this solution, in addition to additional costs, may translate into the opposite effect than intended.

Resources optimization

Other files that are usually sent together with a web page are those defining the style and behavior of the site (CSS and JS files, respectively). As with graphic elements, we can make some optimizations here.

First of all, these files should be minimized, i.e. put under the process of removing unnecessary characters from them (such as spaces, line breaks, or developers' comments). These don't interfere with the operation of these files but increase their size.

Next, using bundlers or other tools, we can combine a dozen or several dozen small files into a single larger one. This procedure will reduce the number of queries sent to the server, which will also positively affect the page load speed.

Source: Webpack

CDN

Content Delivery Network is a solution that allows us to put our files on different servers in different parts of the world so that every person from anywhere in the world has the files provided via the fastest connection currently available to them.

Currently, the use of CDN isn't as efficient as it used to be a few years ago because the files downloaded from it could be cached in the browser's memory, even if they were downloaded from other websites. However, this method's been discontinued due to user security and privacy concerns.

Despite this, the use of this solution will help us serve our files faster, especially when we have users all over the globe.

Lazy load

The lazy loading of images, which is already supported natively in the latest browsers, also saves several dozen milliseconds when a page loads. It's a process that allows for loading only those resources that are necessary for the user at a given moment. Each subsequent file is loaded on demand when the browser deems that it is already required.

A simple example of the usefulness of this mechanism can be a few pictures at the bottom of some website. When loading a page, we don't need to download them right away because when the page is ready, we'll only see its upper part. Only when we scroll it down, the browser will start to calculate whether the content at the bottom of the page should already be downloaded.

We've described the operation of this mechanism in more detail on the example of the Lazy-load module in Drupal.

Prefetching

Prefetching is a mechanism that allows us to start loading a page before we even click on it. This method works in two ways:

• starting loading the page when hovering over the link,
• when the page loads, the script scans the entire website for all available links and then loads the pages from those links.

In both cases, we won’t experience any negative consequences of downloading additional data (from other pages) because this data will be downloaded in the background when the browser's load isn't too big.

Therefore, we have another method that can save us tens of milliseconds. However, this technique will usually work only in the case of internal linking on our website, where we have all the links to our other pages.

How to increase page load speed? Summary

Focusing on website load speed optimization will bring a number of benefits. Potential customers won’t get irritated with long loading times, we'll improve UX, and by improving SEO, we may gain new visitors.

Using the available tools, even a non-technical person can easily audit any page and based on its results, take steps to speed up the loading time of their website.

When optimizing, we strongly recommend starting with the methods listed above, as well as using the advice that Lighthouse will provide. Our web development team will also be happy to support you and help to resolve even the most complicated page-loading issues.