Web performance: why it is so important and how to optimize it

If you already have an online store, or if you are thinking of creating one, you have probably already heard about the importance of web performance. This generally corresponds to the speed at which a web page loads. This notion of performance is matched by indicators as the Core Web Vital, and every year or so, new technical terms appear to try to quantify the performance of a website: loading time, and more recently Time to First Byte (TTFB) or First Contentful Paint (FCP), to mention only the main ones.

At first, these terms may seem a bit barbaric, but rest assured, they are not so bad and are good for you and your clients.

Why is performance so important for an online store?

No one is surprised by a page that loads quickly, but a page that loads slowly is all too noticeable, and you will quickly want to leave it before the content is even displayed on the screen. In fact, most visitors will leave a website if the page does not load completely in less than 3 seconds.

In the highly competitive ecommerce sector where speed is king, ensuring good web performance is essential to convert your visitors into customers, both on mobiles and desktops. It is estimated that a 0.1 second improvement in the loading time of your ecommerce site can increase your conversion rate by 8%!

Three reasons to improve the performance of your online store:

• You will significantly improve your customers' experience and naturally increase your conversion rate,
• You will gain capacity to accommodate a maximum number of users simultaneously, and avoid losing valuable customers during busy periods,
• You will gain visibility thanks to the optimal loading speed of your site which will allow you to improve your position in search engine results (SEO).

So when you think about the performance of your online store, think:

1. User experience,
2. Conversion,
3. Visibility

As far as your shop is concerned, it will mainly be a question of increasing its loading speed, whilst respecting the technical requirements of an ecommerce site in 2021. 

Which indicators and how to optimize them?  

We can consider 5 key indicators that directly impact both the performance of your site and the user experience. Among these, Time to First Byte and Speed Index are considered particularly important as they give a good general overview of a websites’ performance. 

1. Time to First Byte (TTFB)

This indicator corresponds to the response time of the server, it is the most important milliseconds in the loading of a page. Some of the major elements that make up the response time are the server configuration (languages, libraries etc. that optimize the loading time and make the website robust) and the execution time of database requests.

Good to know: Google considers it good if it is less than or equal to 200 milliseconds and acceptable up to 500 ms. It is often the only indicator that varies over time, and is often conditioned by traffic.

Quick tip: Use a CDN (Content Delivery Network) which will be particularly useful for your overseas customers.

2. The First Contentful Paint

On the user’s side, it’s the main highlight. A visitor may find himself with a waiting time between the moment he clicks on a link and the moment the page displays an element. This measure mainly corresponds to the time it takes for the browser to load the server response and the display of the first content item by the browser. This first element is not strictly aesthetic, it can be an image as well as a color block.

Good to know: It is qualified as good if it is done in less than 2.5 seconds (TTFB included), so we can estimate that the loading time of the files blocking the rendering must be done in less than 2 seconds.

Tip: Compress your HTML/CSS/JS files and limit files that block the display. 

3. The Largest Contentful Paint (LCP)

The LCP is the second highlight for the user, this measure integrates most of the visible elements. This is when the web page takes shape and gets its final - or almost final -  appearance. This step can be the longest and heaviest depending on the content to be displayed.

Here is an illustration to better understand: 

Good to know: It is considered good if it is achieved in less than 2.5 seconds (like the FCP) and acceptable up to 4 seconds. Many studies show that beyond 3 seconds, bounce rates increases significantly

Tip: Optimize images, generate useful formats (jpeg 2000, jpeg XR webp etc.), provide different sizes of your images in the HTML code and set up the cache (browser and server).

4. The First Input Delay

This indicator is linked to the interactive aspects of a page. Simply put, it is the response time of the browser between an action taken (a clicked link or button for example) and the moment a first interactive element appears. 

Good to know: This indicator measures the user's “frustration time”, i.e., the time a user will wait for the browser to respond if he or she clicks on the first interactive element displayed.

5. Time to Interactive

This indicator is often misinterpreted. It measures the time from the start of the navigation until the page resources are loaded and the main browser thread is idle for at least 5 seconds, i.e. there has been no script execution longer than 50 ms.

Good to know: Your ecommerce site may have good overall performance, a good FID and, despite this, a poor Time to Interactive.

Tip: Defer non essential JavaScripts to loading and delete unnecessary scripts for the page to display in  order to declutter the main thread. This requires you to do a good code segmentation. 

Here is a more representative timeline of the delay between indicators - and the  timeline of a good site (according to Google):

Bonus indicator: Speed Index or SI

This indicator is a bonus because it is very dependent on the FCP and LCP, themselves dependent on the TTFB. This is the result of a calculation based on the speed and progressiveness of the visible parts of the page (floating blocks).

It measures what the user - potentially -  feels while the page loads. Just like FIDit is one of the latest UX indicators that Google uses for SEO.

Conclusion 

Each indicator is impacted by the previous one, which makes them all important. As mentioned at the beginning, the TTFB is particularly important and very fluctuating since it depends on the quality of your hosting and traffic, so a poor TTFB can negatively affect the performance of your site. This indicator is not often given by most performance measurement tools (Page Speed Insights, GtMetrix) because it is a complex and obscure step that is also very technical. Hence the difficulty to access and interpret the information for non-experts. If facing such difficulties, you can reach out to specialized services, such as  PrestaShop Platform offer if you work with a PrestaShop site.

PrestaShop Platform, a service that helps you grow your store:

• A dedicated hosting solution specialized in Prestashop with 3 environments
• An interface with clear technical KPIs
• An interface to manage your environments (dev / pre-production and production)
• Simplified environment migrations
• Strong support for you to have peace of mind