How to make my website faster?

You have certainly encountered a website that took ten seconds to load. On the web, users are not forgiving of slowness. The main consequence of a website that takes too long to load is the loss of traffic, along with a negative perception from users, who will find it harder to engage and trust the product, service, or brand being presented to them.

In this article, we will explore the causes of slow loading times and how to improve the performance of your site.

What is Performance?

The term “performance” encompasses several concepts when discussing websites. On one hand, it can refer to loading time, which can be divided into display time and the delay for the site to become fully interactive. It can also be associated with the fluidity of user experience: sites that do not stutter, images that load quickly, etc.

In both cases, the result of a non-optimized site is either the visitor leaving or a drastic decrease in their trust and, consequently, their engagement. Moreover, it’s not just human users who cannot tolerate poor web performance; search engine bots are programmed to evaluate these performances via Web Core Vitals and to rank your website based on the scores obtained. Your SEO ranking can be severely downgraded if the site’s performance is not optimal.

At Ronce Bleue, we pay particular attention to the performance of our websites to ensure our clients achieve good SEO scores and the best possible user experience.

What Causes Long Loading Times?

Several factors can explain why a website takes time to load.

File Size

One of the main causes is the size of the files that the browser must download to display the site. This includes the source code, fonts, and media. If these files are not optimized, loading will take longer for equivalent results.

Libraries and Plugins

A second cause can be the use of additional libraries or plugins that need to connect to a remote server to download the necessary files. Again, files must be loaded, which will take some time, and the connection to the server itself can take crucial seconds.

Server Configuration

We can also mention poor server configuration or simply a server that may not be powerful enough to return requests as quickly as possible.

Optimizing Loading Times

The two main factors influencing loading times are the size of the files that the browser needs to download and the server’s power that must prepare these files before sending them to the user.

Limiting Dependencies

To reduce the size of your packages, an effective technique is to limit the use of third-party libraries. You need to separate libraries that are necessary dependencies for the site’s proper functioning from optional libraries that were selected only for convenience. These libraries are often optimized, but since they must handle all user cases, a significant portion of their codebase will never be used in our project. It is essential to evaluate the relevance of each library and replace the least efficient ones ourselves to only support what is necessary. For example, consider carousel libraries, CSS components, or outdated JavaScript frameworks (jQuery).

Code Splitting

The first technique for optimizing the weight of downloaded files is to only download what is necessary for the page that will be rendered by the browser. This may seem obvious, but it is not always the case. It is common to generate a complete package of our JavaScript code and load it on all pages, even if only a small part will be useful on the current page. For instance, we can divide our JavaScript codebase into components and only call those that will be used by the current page.

Lazy Loading

We can go further and load a resource only when it will be present on the page or required for display. This is known as lazy loading, which is particularly useful for images that represent a significant data load. Thus, we load each image at the moment it will appear on the screen; in reality, we load them 100 to 200 pixels ahead to ensure they are not visible while loading. This technique can also be useful to defer the loading of third-party scripts, such as Google’s reCaptcha, avoiding delays in the initial page display and impacting our Web Core Vitals.

Minification

Once we have loaded only what is necessary, we need to focus on the files themselves. We will try to identify costly functions and optimize them one by one. For instance, we can use asynchronous code to queue multiple API calls (Application Programming Interface). We should also strive to reduce the character count for the names of our functions, variables, and code structure without making our code too unreadable. It is crucial not to fall into over-optimization, which can harm the project, as the code will become harder to understand and maintain. Here, balance is key. We will then compress our files and use scripts to remove all unnecessary characters from our production files. These scripts remove comments, unnecessary spaces, and line breaks, resulting in a single-line, unreadable file. However, this is acceptable this time since it is just a rendering of our codebase and not the code itself.

We will also aim to optimize our media by converting them into web-friendly formats. For images, this includes the WebP or AVIF formats, and for videos, the WebM format. Vector illustrations will be loaded in SVG.

Attention Diversion

If, however, loading times cannot be further reduced—or it is too costly in terms of time or money to reduce them due to the site’s intrinsic features—we can implement a pre-loader: a simple page with animated and charted content. This loader will act as a diversion and inform the user that the site, although inaccessible, is not inactive. This is also an opportunity to be creative and start the user experience from the loader. We can also adapt this technique by offering a pre-loader for large images that may take a few seconds to load.

Preloading

To further optimize loading times, we use page preloading. This involves loading the next page in the background while the visitor is still on the current page. We do not load all pages this way, as that would be over-optimization and could, conversely, slow down or stutter navigation. Instead, we choose which links on the page we want to preload, such as links to the most important pages like a contact form or a product page.

Optimizing Navigation

While loading times are objective performance metrics, the user’s experience when navigating your site is equally important because your brand image is tied to your website, and thus, the trust they place in you depends on the confidence they have in the site.

Media Optimization

One of the biggest impacts we can have on user experience is optimizing media, particularly images. Indeed, the weight of an image, if not optimized, can exceed the weight of the entire site. Therefore, we will ensure that the resolution of images is appropriate for the size at which they will appear on the screen. There is no need to load a full-HD image if it is only visible at 400 x 300 px. We will also generate several versions of the same image in lower resolutions to adapt to layouts on smaller screens. Generally, on smartphones, the image sizes are smaller than those on desktops, so there is no need to load the same image.

Smooth Animations

At Ronce Bleue, we believe that animations are a vector of meaning and user attention. However, a stuttering animation will have a disastrous effect on user perception, so we will strive to optimize them to ensure they are always smooth. We can limit ourselves to animating the transform and opacity properties, which do not cause browser re-paint and thus impact site performance less.

More technically, we will also seek to make maximum use of the browser’s Request Animation Frame (RAF) API to manage animations, but we will ensure that we only execute one RAF that contains all our requests.

Tools exist in the browser’s DevTool to track the frame rate (fps) of the site; if this value drops below 30, we need to be very vigilant, and if it falls below 24, the animations will appear stuttery. It is also important to remember that this value strongly depends on the user’s hardware, which may not have as advanced a setup as web professionals.

Page Transitions

Like the pre-loader, page transitions will create a sort of distraction for the user’s attention, ensuring they are not focused on the time it takes for the next page to load, but rather on what is happening on the screen.

Conclusion

The performance of a site depends on many factors, both objective and subjective, that should not be overlooked for your site to achieve its goals in terms of SEO but also, and most importantly, to ensure that visitors are satisfied and willing to interact with the site.

If your website seems underperforming, it might be time to consider a redesign to meet your goals, whether they involve sales, getting publicity, or renewing your services. Contact us to discuss your project.