Explain Like I'm Five: Website speed

This post is part of the series Explain Like I'm Five (#eli5), which aims to make tech concepts and terms easy to understand.

In this two minutes read, we'll explain why website speed matters, how to measure it, and how to improve it.

A fast website encourages users to stay long enough to purchase products or consider getting in touch.

To get quantifiable metrics, we use Google Lighthouse. Let's look at the most important metrics:

TTFB (Time to First Byte)

When you type "tinloof.com" on the address bar and hit ENTER, the browser will ask for the page content from tinloof's servers.

The Time to First Byte is the time it takes for tinloof's servers to send the first byte (tiny piece of data) to the browser.

First Contentful Paint (FCP)

Once the browser receives the page content, it starts painting it.

The First Contentful Paint is the time it takes the browser to paint the first chunk of text or image of the website.

Largest Contentful Paint (LCP)

The Largest Contentful Paint is the time it takes the browser to paint the largest visible block of content.

In the case of tinloof.com homepage, the largest visible block of content is the 3D illustration.

Time to Interactive (TTI)

The Time to Interactive is the time it takes for the website to become fully interactive (e.g. you can click on buttons and links).

Perceived website speed

The previous metrics are quite helpful but they only exist to guide us towards our end goal: provide a good user experience.

In fact, there are some tricks we can do that improve this perceived website speed without affecting the metrics.

For example, we progressively load images on our about page:

While loading an image, we first show a blurry version of it.

The HD image then replaces the blurry one once it's ready.

Although the final image takes the same time to load without this trick, progressively loading the image gives users the impression it loads faster.

There isn't a magical forumla that will make any website fast. If there was, we wouldn't be writing this article.

However, we'll share two tips that are quite effective in making any website faster.

Keep it simple

The most effective way to make a website faster is to keep it as simple as possible.

Why? Because a simple website makes the browser process less code.

Set a speed budget

To determine a website speed budget, we ask ourselves: what's an acceptable speed for our site?

It's fine to exceed this budget during the implementation phase because the main focus is to make things work ahead of deadlines.