Published
- 9 min read
Why You Should Care About Your Websites Speed
How often has it happened to you that you click on a link or visit a website, and the page takes forever to load?
Isn’t that annoying?
Don’t you feel frustrated and leave the webpage ASAP?
If you answered yes to all of these questions, you understand the considerable role website performance or speed plays to make sure users stay on your website.
You and even Google agree on the importance of faster loading websites which is why it is also a Google Ranking Factor.
In one of its research studies, Google found that page speed is directly related to revenue.
Accordingly, if you choose to improve your website performance, Google will rank you better in its search results leading to more traffic to your website. As a consequence, by providing a better user experience, visitors might stay longer on your webpage and the probability of visitors turning into potential customers increases.
Now wouldn’t you want that?
If you want to speed up your websites, keep reading to find out how to measure your website’s performance and make it better.
The Three Musketeers
Google measures your website’s performance based on three key metrics, called the Core Web Vitals.
Improving these metrics will help make your website faster, thereby getting a better ranking in Google search results, more traffic and eventually more customers.
The Core Web Vitals are:
- Largest Contentful Paint(LCP)
- Cumulative Layout Shift(CLS)
- First Input Delay(FID)
You can use PageSpeed Insights to measure these metrics for your website. It will pull up a report for the Core Web Vitals, which you can analyze.
If you are running your website on a local server, you can use Google Lighthouse to get the metrics.
Sample Page Speed Insights Report. Screenshot by the author.
To understand the performance report, let’s look in detail at what each of these means and how you can use them to improve your website’s speed.
Largest Contentful Paint (LCP)
Imagine you click a link that redirects to another website. The web page is taking a while to load.
You see the website’s title and logo, and the website is still loading.
You are almost about to give up and close the tab, and that’s when the banner images load up.
It’s at this instant when you might think to yourself that the website has almost finished loading, and you might be able to do your tasks.
This time interval between when the user clicks the link or enters the URL to displaying the largest element(image or text) on the visible part of the viewport is called the Largest Contentful Paint or LCP.
The LCP metric aims to quantify when the user thinks that the website has loaded or almost finished loading.
Reducing it will help reduce the anticipation of the user in terms of resolving the question ‘Is it done yet?’
The lesson here is to not beat around the bush too much. The user came to the site to do something and it is your job to allow them to do that ASAP.
How to improve LCP
LCP Time Range. Illustration by the author.
The above image shows the time ranges defined by Google for LCP falling into the bracket of good, needs improvement and poor.
Lower LCP times ensure that the user stays on your website instead of leaving due to longer page load times.
To land to the ‘good’ side of the LCP range, you can address the following.
Lazy loading
The viewport content visible to the user as soon as the user lands on your page is called above-the-fold content, and the part of the page not visible to the user on landing is called below-the-fold content.
Above the fold. Illustration by the author.
To reduce the LCP time, focus on loading the above-the-fold content first.
Add lazy loading for below-the-fold content like videos, images or blocks of text such that these are loaded only when the user starts scrolling.
Defer executing scripts
Adding the defer attribute to the <script> tag tells the browser to download the script file but execute it only when free from processing the webpage HTML.
It allows for faster processing of content that is above-the-fold reducing the LCP time.
Use responsive images
Responsive images allow loading different versions of the same image for different browser sizes.
The browser decides which version of the image to load for which viewport size.
If the user views your webpage on a mobile, the browser will download a smaller version of the images compared to the same website being viewed on a desktop.
Responsive images can aid you in creating faster websites across mobile and tablet devices with lower LCP time.
HTTP2
Instead of creating a new connection every time to download the assets from the same source, HTTP2 allows the browsers to create a single connection to the source and download multiple assets.
HTTP2 reduces browser overhead and the time needed to download assets like HTML templates, fonts, CSS files, scripts etc.
Minimizing the browser overhead can make the resources available quicker, decreasing LCP time.
The only prerequisite for implementing the HTTP2 protocol is a secure connection or encryption.
Caching
Browser cache is a temporary memory storage on the browser, which allows the browser to store webpages so that it doesn’t download the same web pages again if you visit them multiple times. It allows for faster loading of web pages.
You could add response headers like cache-control, expires and etag on the server-side to ensure caching is turned on for your website.
Browser caching won’t benefit the user when visiting the web page first, but subsequent visits will become faster.
Preloading
The way we load CSS is by referencing it in the HTML files.
This CSS file might import other CSS files and maybe some fonts.
The browser parses the HTML content line by line. It will only know about the CSS or fonts to download when it comes across them in the HTML.
What if some unimportant external scripts are being loaded first as per the source order? It might stall our critical resources.
Okay, so how do we get around this problem?
What if we told the browser what the critical resources are beforehand and asked it to download them ASAP instead of waiting for the browser to discover them on its own?
That’s what preloading is.
Adding the preload attribute to your font links or CSS links ensures that the browser starts working on them right away, saving you precious load time.
Cumulative Layout Shift (CLS)
Has it ever happened to you that just when you think the website has finished loading, you go on to click a link or button, and it moves down, so you end up clicking something else altogether, like an ad?
This unexpected movement of content is called a layout shift and is quite frustrating as a user.
Today, many websites load ads in the background and move the displayed content, causing layout shifts.
These shifts spoil the user experience.
Google introduced the Cumulative Layout Shift or CLS to reduce such instances.
Cumulative Layout Shift measures the layout shifts caused in a web page not only when the page first loads but also during its entire lifetime.
The CLS metric is an aggregation of all the layout shifts caused during the lifetime of the webpage. It aims to reduce the user’s frustration post the content is displayed on the web page.
The lesson here is to not continuously change the position of the webpage elements once they have been displayed even if other elements are loading in the background.
How to improve CLS
CLS Score Range. Illustration by the author.
The above image shows the score ranges defined by Google for CLS falling into the bracket of good, needs improvement and poor. The lower the score more pleasant the user experience when browsing the webpage.
Add dimensions to HTML elements
- Let the browser know how much space to reserve for each element to reduce the shifting. Be it images, videos, ads, embeds or iframes, it’s a good idea to add dimensions to them like height and width so that the browser can reserve the space until it downloads them.
- Don’t place ads on the top of the viewport because they cause maximum layout shifts compared to when placed in the middle.
First Input Delay (FID)
Imagine you wish to fill up a form on a web page. You enter the URL, and the page loads.
You click on one of the text fields and you cannot type into it.
You can’t figure out why.
You try to type into other fields, and the same issue exists.
Guess what is going around here?
The browser gave you the impression that it has finished loading the web page when it has just finished loading the HTML of the web page and not the scripts that might be responsible for processing the inputs or recording analytics.
The browser busy loading, compiling and parsing the scripts in the background cannot attend to your request to fill out the input fields.
These extra scripts in today’s times can also include adding marketing-related add-ons or analytics scripts.
Websites in the past used to do this to give the user an impression of faster page loads.
What is the point of the webpage loading faster if the user cannot accomplish their tasks?
That’s why the introduction of this metric.
First Input Delay is the time difference between when the user interacts with the page via a button or a link click and when the browser starts processing the response to those actions.
FID aims to measure the usability or responsiveness of a webpage from a user’s perspective.
The lesson here is to load only those scripts which are essential. If you add too many of them be assured that the webpage performance is going to suffer.
How to improve FID
FID Time Range. Illustration by the author.
Evaluate your script needs
- Adding third-party analytics and ads can add to the time when the browser becomes responsive for user inputs. Add them with caution to avoid bloating.
- Use code-splitting to load all the necessary scripts first.
- Use async or defer for scripts that are not necessary, like those for below-the-fold content or third-party scripts.
- Use Web Workers to load non-essential scripts in the background.
The PageSpeed Insights reports the First Contentful Paint or FCP metric as well. It’s a non-Core Web Vital metric.
I hope this article has given you a good insight into why measuring website speed is essential and what steps you could take to improve it.
If you have any questions, suggestions, comments, feel free to share them in the comments section below.
Till then, Happy Coding!