Badge Webflow Award Winner 2023

5 steps to speed up your website

Published on 
10/11/2021
-
Amended on 
11/4/2023
Reading time: 5 min
Evolution score performance google page speed
Written by
Photo of Thibaut Legrand wearing a black t-shirt Digidop

Thibaut Legrand

Webflow Developer & SEO

Here's how to speed up the loading speed of your site's pages to optimise your natural referencing!

Key points to remember

One of the most important factors in getting good search engine rankings is the loading speed of your site. A site that takes too long to load can be detrimental to theuser experience (UX) and therefore generate a high bounce rate. You can lose more than half your audience if your site takes longer than 3 seconds to load. Google's bots will scrutinise the speed of your site to be able to offer the best service to its users. It is therefore necessary to keep a watchful eye on this performance criterion. So, in this article, we are going to show you how to optimise your site so that it is faster.

Google statistics on the probability of bounce rate in relation to the loading time of a web page
Probability of Bounce Rate by Web Page Loading Time

How to evaluate the current loading speed of your website?

Before optimising the loading time of your site, you should first measure it. For this, nothing very complicated. Indeed, Google offers you a practical tool to carry out a diagnosis of your pages concerning this factor.

You can go to Google PageSpeed Insights to evaluate the loading time of your pages. Once you enter a URL, you will get a score out of 100. This performance score is obtained via the weighted average of several metrics (First Contentful & Largest Contentful Paint, Total Blocking Time, Speed Index, etc.). You can then have a detailed view of the reasons why your site takes a certain amount of time to load and therefore of the points to improve on it.

Another way to measure the speed of your site is to use the SEMRush tool. Indeed, on SEMRush, you can access the speed data of your pages. To access it, you just have to follow the following path:

  • Local SEO
  • Site audit
  • Thematic score
  • Performance

Here you can also see which of your pages are taking a long time to load and the reasons why and where you can improve.

Screenshot of the performance score of Digidop.fr on SEMRush with an analysis of the page load speed

Finally, you can also use the Pingdom tool. Like the previous tools, Pingdom evaluates the speed of your site, but it also gives the possibility to measure it according to different locations in the world. You then get a detailed view of the size of your pages (weight of images, videos, etc.) and the possibilities for improving the speed of your site.

Screenshot of the performance score of Digidop.fr on Pingdom to evaluate the loading time of the site

Evaluating the speed of your pages is an important step in the SEO audit of your site.

5 points to speed up your website

Now let's get to the heart of the matter. We will see through different steps how to manage the optimization of the loading time of your website pages.

1 - Reduce the size of your media files (Images, Videos ...)

The use of media files improves the user experience for your articles, your content and, more generally, for your site. It is therefore important to use images, videos or audio to offer quality and differentiate yourself. However, these files can be very large and it is therefore important to reduce their size to improve the speed of a site.

Reduce the size of your images (compress them)

To begin with, let's take the most commonly used file type on websites: images. There are several formats (jpg, jpeg, png, gif, svg) but they all need to be optimised for the web.

Small Tips: Use the SVG format for your logo so that it can be adapted to any format without losing quality.

Modern technology allows us to have very good quality images. However, most of the time, if an image is of very good quality, it is also large. A large media file will have a strong impact on the loading speed of your site. You should therefore compress your images before publishing them. A very simple manipulation that can be done thanks to the iloveIMG website.

Video tutorial to divide by 10 the weight of the images:

Reduce the size of your videos (compress them)

Like images, another type of media that is widely used on the web is video. Here too, there are many formats (MP4, MOV, AVI, WMV, WEBP, etc.). Several methods exist to reduce the impact of the weight of a video on the speed of your pages:

  • Embed your video from another platform (YouTube, Vimeo)
  • Use a video compression tool (Clideo, Adobe Premier)

L'option recommandée est plutôt d'intégrer les vidéos sur son site via un code <!-- fs-richtext-ignore --><embed>.

Représentation d'une intégration <embed> d'une vidéo YouTube sur le site digidop.fr

If you use other types of media files than images and videos on your website, make sure that the size of these files is not too big.

2 - Minimize HTML, CSS, JavaScript ... (Make your code lighter)

Behind your site are endless lines of code in several languages (HTML, CSS, Javascript, etc.). + The more pages and content your site contains, the heavier the code. However, it is possible to reduce the size of your code by making it smaller.

By minifying your code, you remove "parasitic" elements such as spaces or line breaks. By removing these elements, you lighten your code without impacting it. Your code will be less easy to read for a human, because it will not be aerated, but a robot will have no problem to decipher it. Thus, the loading time of your pages will be considerably reduced.

Screenshot of a CSS minifier code from CSS Minifier
Example of a CSS minifier code

How to minimize HTML, CSS and Javascript code?

  • On Wordpress : Install the plugin : "Merge + Minify + Refresh" then set the minification options
  • On Webflow: Before publishing or exporting a project, go to the project parameters and then to the "Hosting" tab, you will find in the advanced options, boxes to activate to minimize the HTML, CSS and Javascript code

3 - Reduce the loading time of your pages worldwide thanks to a CDN (Content Delivery Network)

One of the most effective ways to increase the loading speed of your site is to use a CDN (Content Delivery Network).

But what is a CDN?

A CDN allows your site to be distributed locally to servers around the world through a network system. In other words, your content will be stored in different servers around the world so that users can access it more quickly depending on where they are located. This makes it possible to speed up the loading of pages.

Representation of the access to the content of a site that uses a CDN or not
Representation of the distribution of a site that does not use a CDN compared to a site that uses a CDN

If you have an international audience, it may be a good option to consider using a CDN.

To use a CDN, you need to ask your web host.

Webflow 2023 SEO Guide

4 - Take care to choose your hosting offer and a good web host

At this point, you should study the different options that the market offers you. Indeed, the choice of a web host and a type of hosting depends mainly on the budget you have at your disposal. However, some web hosts offer options that are more suited to your needs and sometimes you have to pay a price to get a quality service.

Web hosting is a major but essential expense! Some types of hosting will offer you, for example, a virtual or physical dedicated server (including only your site) rather than shared hosting (including several websites). This is a major advantage for generating more traffic and optimising the speed at which your pages load (especially for e-commerce sites) on the web.

To simplify this point, you have to tell yourself that the price you pay for your hosting is only an investment to get better performance. Performance that will allow you to optimise your site and consequently your natural referencing.

Digidop offers you the possibility to have a fast and secure site thanks to the Webflow creation software which includes the Amazon AWS host.

5 - Other possible "small" optimisations

If you are using the Wordpress CMS for your website, there are additional steps to improve the speed of your web pages compared to Webflow.

Reduce your code loading time with Gzip compression

Install a plugin to activate Gzip compression: This will reduce the loading time of your site's HTML, CSS and Javascript codes.

Reduce the number of resources your site needs to load (caching)

Install a resource caching plugin: This will reduce the number of resources that need to be loaded on the site pages.

Think about the speed of your site on mobile

Use a responsive template for your site: loading time is as important or more important to Google on mobile as on computer.

⚠️ Beware of adapting your website images to mobile!

Layout the code of your site

Prioritise the elements of the code to display the most important content at the top of the page (especially for the loading of the home page which can be slow). Thanks to this technical manipulation, your site will display the elements that must be seen first by Internet users.

⚠️ Warning: using too many plugins can slow down the speed of the site

To avoid this inconvenience of Wordpress (having a multitude of plugins to be confused about), we recommend you to use the nocode platform Webflow. Thanks to Webflow, you can build sites without limits and without a line of code. With its CMS and its completely modular interface, you will be able to create a very fast and SEO optimised website.

That's it! You now know how to improve the loading time of your pages. A fast-loading web page leads to a better conversion rate. Your audience and the search engines will thank you greatly. Now that this part is done, all you have to do is to set up an SEO strategy to position yourself on queries and keywords to reach the top positions with your site.

Otherwise, our web agency nocode can also simplify your life thanks to its expertise in natural referencing to boost your online visibility 🚀

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop