Jun 12, 2021 · 2 min

Explain Like I'm Five: Website speed

#eli5
#performance
Seif
Seif Ghezala@seifghezala
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.

Why website speed matters

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

How to measure website speed

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.

Tinloof's largest homepage block
Tinloof's largest homepage block

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:

Progressively loading images
Progressively loading images

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.

How to improve website speed

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.

That's when optimizations come into place: we first audit the website speed, identify issues causing the website to be slow, and then do our best to solve them.

If you read the performance section of our illuminem case study, you'll see that although we initially exceeded the speed budget, we were able to optimize illuminem to only take 1.3 seconds to load.


Other articles

How to create scroll animations with just 1 React hook (Part 1)
From our blog
to your inbox.
We care about protecting your data. Here's our Privacy Policy.
newsletter