Did you know that the average website visitor takes 3 seconds before deciding to stay or leave a website?
.png)
Let’s use your personal experience as an example. How long are you willing to wait for a website to load? If it is a website recommended by someone and you already know the value you are going to get by waiting, you may do it for longer than 3 seconds. That isn’t the case with random websites. The moment you realize it is slow, with nothing to anticipate, you will leave.
Google recommends an LCP(Largest Contentful Paint) of 2.5 seconds or less when working on core web vitals.
CP generally refers to the elements on a page that require loading. These include photos or images, videos, and text. LCP refers to the biggest piece of content on a page. The more time it takes to fully load your page, the larger the average LCP time it will have.
How do you measure a website’s LCP?
The easiest way to measure a webpage’s LCP is by using tools like Google Page Insights. This tool will give you a breakdown of all the errors on the page and recommendations to improve the load times of the page.
If you are concerned about your website’s rank on search engines, take a look at the LCP time and try to improve it. Google, for instance, recommends pages that load faster(with lower LCP time)
What makes a website have a larger LCP?
- The size of the images – It is important to have high-resolution images on a website. However, it is important to be mindful of the image dimensions and file sizes. Larger images mean slow loading,g which affects the page LCP
- Web Design and code – Have you ever heard developers talking about clean and efficient code? Your website’s source code can affect the load speeds. If the code happens to be disorganized and has lots of unused lines of code, it will slow down the website’s loading.
- Server Speed – The server speed also affects the LCP. Shared hosting, which means shared resources, could slow down your website’s speed if other websites on the server use more resources. At times, this may be out of your control, and that is why it is important to choose the right hosting package at the very beginning or upgrade it when needed.
You may ask: how do you achieve a lower LCP?
Here are a few quick fixes:
- Optimize your website images – Work on the image file sizes and dimensions. Square images work better. For the sizes, use tools like Tinypng. You can also use compression formats like BrotliCalibre or GZIP for static assets, serve images in WebP, and minify CSS and JS files.
- Remove unused code from your website(You might want to hire a professional for this one before you go through what I experienced; you can read the rib-cracking experience here)
- Get a better server from your website host, most preferably a dedicated hosting option.
- Preload assets: Use rel=”preload” for critical assets and rel=”preconnect” for third-party connections. You can also apply lazy-loading for your website.
- Apply browser caching for your website. This helps store some elements locally and reduces the load for subsequent visits.
Achieving an LCP of 2.5 seconds and below takes time. Review your website speed performance with the given tools and apply the suggested improvements slowly.
One best practice that I would recommend is to avoid future reoccurences is optimizing your images before uploading them to the website.
Make sure any cover image, featured, or even product images are properly compressed and optimized before upload.
