Why is your largest contentful paint performance so bad?
Largest contentful paint measures how fast your website loads. Scoring low on this metric means there are some issues on your website. Most commonly they are:
- Large and unoptimized images
- Slow server
- Render blocking script execution (don't worry this won't be complicated to fix)
- Large JavaScript and CSS files
- Client-side rendering
If you haven't already, check if your website passes the core web vitals test. It only takes less than three seconds.
Let's go over each of them and see how you can fix them.
Optimize Images
Images are by far the largest resource a user has to load when visiting a website.
If you are going to focus on only one thing, focus on optimizing the images on your website.
To optimize images:
- Use modern image formats
- Correctly size your images
- Lazy load images
Use modern image formats
You have probably heard of image formats like JPG and PNG. But the one most optimized image format for websites is WEBP.
WEBP is the recommended image format by Google.
You can reduce image size massively without having any noticeable changes in the quality.
Convert your images to WEBP format using this free online tool.
Correctly size your images
Another major performance hog I see all the time is using too large images.
To figure out if you are using too large images on your website you need to first figure out what is the optimal image size for your website.
Go to your website on your PC or laptop and right click on an image and choose Inspect
.
This opens up an inspector with the image tag highlighted.
Hover you mouse over this highlighted tag and you should see a popup on top of the image on the page with the rendered resolution.
This might look slightly different depending on the operating system and browser you are using.
The first number (in this example 736) is the width of the optimal image resolution you should be using.
Resize the images on your website preserving the aspect ratio so that the image width hits this number.
More often than not, your content management system (CMS) should already be doing this automatically.
If you are not sure if your CMS is optimizing your images, send me a message and I can take a look for free.
Lazy load images
Lazy loading images means that your browser loads images only when they are visible on the browser.
Basically, users don't have to waste time loading images they are not even seeing.
This is a very easy to fix to make.
Add a loading=lazy
attribute to your image tags on your website.
Your image tags should look something like this:
<img loading="lazy" src="https://example.org" />
Responsively load images
This is a step above lazy loading.
Responsively loading images means that the user loads the correct size of the image depending on the device they are viewing it on.
Smart phone -> small image
PC -> large image
Again, your CMS should generate these different sized images automatically but it might require some custom code on the frontend.
Here's the #1 guide to responsive images.