How to improve the performance of your website

[tongfkymm44]

Core Web Vitals: What are they? and how do we measure them?
Core Web Vitals are a simple way to measure the optimization of our website. These metrics provide us with a reference on the aspects of the website that we need to improve. They are divided into several sections such as loading speed, image size, the time it takes the browser to render all the code… All the metrics affect our overall score, but for this content we will focus on the three that, for the moment, Google considers the most important:

Largest Contentful Paint (LCP)
LCP measures the time it takes for our website to load the largest block of information on our website. This is usually an image or a block of text. According to Google, a good loading speed should be under 2.5 seconds.

What elements are taken into account when measuring this value? According to the forex leads database lists official Google guide, these are the elements considered to make the calculation:

<img> tags
<image> elements inside <svg>
Videos inserted via the <video> tag
An image applied with the url() function using CSS
Elements containing text
Interaction to Next Paint (INP)
This metric measures the reaction time of our website when the user interacts with it. For example, let's imagine that we have a CTA with a button and, when the user clicks it, the website takes more than half a second to react. In this case, we would have a poor INP. So how do we know what a good INP is?

An INP of less than 200 milliseconds: It means that our website has a good responsiveness.
An INP between 200 and 500 milliseconds: We should improve our response.
An INP greater than 500 milliseconds: It means that our website's response is poor.
To calculate this value, Google analyzes and calculates the INP based on the longest observed interaction.

Grow with us!
Cumulative Layout Shift (CLS)
This metric measures how much the structure of the website changes during loading. These content shifts can be in any direction and directly affect the user experience. Let's take an example: imagine that a user enters our website and sees a CTA with the contact button, but just when they are about to click on it, the header of the website loads and, instead of clicking on the CTA button, they click on the first slide, taking them to a completely different page.

This layout change would probably cause our score to drop significantly, as the block would have been moved considerably from its initial position.


How is Core Web Vital measured?
There are many tools to measure this score, but I would recommend using one of these two, since in addition to being free, you only need to write the URL of your website and they take care of the rest. In addition, both will give you additional information on how to solve the different errors they identify:

Google PageSpeed ​​Insights: This tool is incredibly easy to use. Simply go to the website, paste the URL of the web address you want to analyze, and click “Analyze.”
Google Lighthouse: This open source tool offers you very precise metrics and can be added directly as an extension to your Chrome browser.
Both tools will show us the information in a similar way. This is an example of a page that would need an overhaul:


How can we improve our Core Web Vitals?
As many of you know, there is no secret formula that will make our metrics reach 100 with just one click, but here are a couple of tips to improve the performance of our website:

Optimize your images and export them at optimal resolution.
There are a plethora of free image compression tools online. It is advisable to get into the habit of running your images through these tools before uploading them to your server, as not only will it take up less space on your server, but it will speed up media loading significantly.

In this case, for example, we can see the difference between a compressed image and the same uncompressed one. The result will vary depending on the image, but in this case we have saved 71% by simply passing it through a tool.


It is also very important that when we export an image, we are aware of where we are going to insert it and at what resolution it will be rendered. It is of no use to export an image at 2000 x 2000 pixels and then render it as a 200 x 200 pixel thumbnail.