5 effective rules to optimize page load time

1. Static web pages

A so-called "static" page is a web page that has been generated in a file.

To understand how these pages work, let's start by explaining how a classic CMS like Wordpress works for example.

When you change the text of a page of your website:

1. This modified text is saved in a database.
2. This modified text is then loaded from this database to be displayed in your web browser.

For this type of operation, we speak of dynamic pages.

Dynamic pages take a long time to load.

With static pages, the modified text is not loaded from the database but directly from a file with the entire web page. This allows an ultra fast loading!

2. Code coverage

Technique that analyzes the used and unused code for the loading of a page

When we arrive on a web page, it starts to load several files. For example:

• Google font -> the font used
• Google Analytics -> your tracking code to analyze the website traffic
• The style of the website -> your colors, the layout of the website, etc...
• The behavior of the website -> example of behavior: when I click on the "send my request" button, confirm my contact request

All these files are essential to make your website work properly and must be used in an optimized way.

Without going into technical details, a good practice to consider for developers is to use as little code as possible or to rewrite the code natively in "pure Javascript" (without any dependencies).

A phone does not have the same performance as a computer. That's why this optimization is important if you want to have a fluid website on all media.

Below, an example of "code coverage" of the files of a page:

3. Lazy loading

The ability of a website to load the right elements at the right time.

Let's take the example of loading an image when it is visible.

Let's say you have a page with a lot of pictures. If you don't use the lazy loading technique, all your images will load at the beginning and at the same time. This will simply slow down the loading of your page.

The lazy loading can be used for any type of web elements but it is especially used for :

• images
• iframes

How to implement lazy loading for your website?

Your developer has several choices to use this technique:

• The "native" to follow very closely but still does not work perfectly today (for example on iframes and SVG images) and still depends on browser versions. Google details this technique here.
• The "IntersectionObserver" : very efficient but does not work equally with all browsers, see the support.
• An external library: there are hundreds of them but they are not always very well optimized and can have an impact on your "code coverage" (previous technique).

We can see today that there is still no simple and optimized solution. It is therefore necessary to adapt this solution according to the needs of the company.

The image below is loaded with the "IntersectionObserver" technique.

4. Optimize files

When you want to optimize your web pages, the principle is to reduce their weight. Here are some techniques that you can apply to your files:

• GZIP: allows you to compress and reduce the size of any file.
• Minification: allows you to compact the code of CSS and Javascript files.
• Photos in the right format and at the right size.

5. Cache

Avoid reloading an element that has already been loaded before

There are many types of caches on the web. Here are those that interest us the most:

• The browser cache: which allows you to avoid reloading your images, your CSS, your Javascript and even your HTML pages.
• The server cache: which allows you to avoid redoing actions already done before. Static pages are a good alternative not to use it.

The cache is simply set with rules that your developer will define.

An example of a cache rule: I want to cache the "Google Analytics" file for 12 months in the browser to avoid reloading it the next time I visit the website.