Hi there! I am Gael Metais, a web performance expert and I will try in this article to guide you around accelerating your website. So you have probably bought a website from an agency or even created it yourself. You are proud of its content and you love its shiny design, but damn… it… is… slooooowwww…
[Drawing: somebody waiting in front of his screen]
Let’s see how to measure your website’s speed, decide if it is really slow, detect the faulty components and explore some ways to fix them.
[Table of Contents]
How to measure a website slowness?
First things first, you need to accurately measure the load time of your webpages. It will help you:
- determine how slow the pages really are,
- get a comparison point to check later improvements.
I don’t recommend measuring from your own computer because it is subject to many bias (browser caching, exceptionally good bandwidth compared to users, temporary bandwidth reduction…). You should rather use what we call Synthetic Testing, which means that all tests are performed from a distant server with a stabilized bandwidth.
My favorite tool for Synthetic Testing is WebPageTest (free and open source). Let’s use it. Choose a location that matches your users. Under the advanced settings section, select a DSL connection. And start the test.
While you are waiting for the results, a real browser loads the page and measure everything that is measurable. Then your results page starts with a small sheet similar to this:
WebPageTest provides with a lot of information and can be complex for beginners, but here are probably the most important metrics and a quick explanation:
- Start Render: when the first page elements appear.
- Speed Index: the median appearance time of all elements on the page.
- Document Complete Time: when the browser’s loading indicator stops spinning.
You can repeat the test on some other URLs, because the situation can be very different between pages.
How slow is too slow?
Remember that I told you to launch your test with a DSL simulated connection? Well, the following numbers are only relevant for that WebPageTest connectivity and should not be used in an other context.
|Start Render||< 1s||1 – 2s||2 – 3s||3 – 4s||> 4s|
|Speed Index||< 2s||2 – 4s||4 – 6s||6 – 9s||> 9s|
|< 3s||3 – 5s||5 – 7s||7 – 12s||> 12s|
If you wonder what occult science is behind these numbers, it is just my experience in website auditing. They are just here to give an idea. If you have great ambitions for your website and merciless competitors, you can divide these numbers by two.
Please also note that the Speed Index metric is not always reliable, especially if the tested page contains a carousel, a video or any kind of animations above the fold.
Now, obviously, your website is slow. Otherwise you would not be reading this chapter.
To be clear, there can be hundreds of reasons why a website is slow. Web performance specialists would not be so numerous if the subject was easy. But before paying an expert, you can probably fix some things by yourself even with a light technical knowledge.
Let’s start with a first diagnostic.
Backend Vs Frontend
We will check whether the backend or the frontend is slow.
The backend refers to the server-side system that produces and delivers the HTML code. It is handled by a server technology (Apache, Nginx and others) and a language (PHP, Python, Java…), on which there’s generally a framework (WordPress, Shopify, Laravel…) and a database (MySQL, Oracle, MongoDB…).
Return to our previously used WebPageTest tool and click on the waterfall to zoom it. Now identify the line that refers to the HTML code. It is the first blue line you’ll meet. Here is a couple of examples:
Click on the line and read the Time to First Byte. It is the time taken by the server to analyse the request and build the appropriate HTML response.
This metric will tell you the backend time. The frontend time is all the rest, from zero to the vertical blue line (Document Complete Time). Generally, people get surprised when they discover that backend only represents 2 to 5% of the total loading time. But it’s not always the case.
Here’s comparison table to let you decide whether your backend has a problem or not:
|Start Render||< 0.1s||0.1 – 0.3s||0.3 – 0.6s||0.6 – 1.2s||> 1.2s|
If you conclude that your backend is too slow, check this article: How to fix a slow backend.