Reduce Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP) on your Web Pages

Mike 🎩
Mike's Tuesday Tips:
Last week was about identifying Cumulative Layout Shift (CLS) and I mentioned how to identify LCP (Largest Contentful Paint) on your pages. This week, we are going to identify common issues that cause a slow LCP.
LCP is probably the simplest of the Core Web Vitals to deal with.
Having addressed this on a few hundred pages over the past year now, I can tell you that the most common cause of a slow LCP loading time is a slow server response.
If you are on a shared hosting environment, especially ones that have been oversold (and often overhyped) – I'm looking at you Siteground – you can tweak things all you want, but there is only going to be so much speed you can squeeze out of the server.
Want to figure out if your server has been oversold? Take a look at how many domains are hosted on your same server using this tool: https://viewdns.info/reverseip/
There are tons of other tools out there like this. If you really want to investigate, you can run all the sites through something like SEMrush and take a look at their traffic estimates. You may have one or two sites on the same server getting tons of traffic and hogging up a huge amount of resources.
If you really care about pagespeed, one of the best things you can do is get away from shared web hosting.
Before someone comments about how they got good scores with shared hosting on Core Web Vitals, Pagespeed Insights, GTMetrix, or any other speed test you want to mention…. Sure, I believe you. However, think of just how much better your pages would load if you moved to a decent VPS or dedicated hosting solution.
There is an example below for a new client I just started working on. This site is hosted on WPEngine, which is supposed to be one of the better hosts out there. We are getting server response times ranging from 1.5-2.2 seconds. Just fixing that alone without doing any other tweaks, will bring their LCP score in line with Google's standards.
Before we go crucifying WPEngine, there is also a possibility that the problem is on the development side of the site design. There might be some processes being called that have to complete server side before anything loads. With a lot of dynamic content, that can happen sometimes.
A database cleanup may also solve some of that response time.
If you do not want to switch hosts, another solution that may work is to use a content delivery network (CDN). Your mileage and experience may vary with these. For example, I have had some sites I have put on Cloudflare and saw drastic improvements. I have used it for other sites and it has actually slowed them down.
The second big issue causing slow LCP load times is render blocking JavaScript and CSS. A browser will pause parsing HTML when it encounters external stylesheets and synchronous JavaScript tags.
To speed up the loading of your LCP, you want to defer any non-critical JavaScript and CSS files. You should also minify and compress your CSS and JavaScript files.
For any styles that are critical to your LCP and/or above the fold content, you can inline them, which means you place the style elements directly in the <head> of the page.
The next thing I see frequently slowing down LCP times are images and/or videos. Make sure that you optimize and compress your images.
Browsers load full images before adjusting them to the proper size to be viewed. If you are using an image that is 2000 x 1330 pixels, but it is only viewed at 600 x 400 in your page design, the browser is going to load that full 2000 x 1330 sized image. Before you bother with compressing anything, make sure you are using appropriate image sizes. Resize the image and then upload it back to your server.
You can also lower the image quality. Load it up in Photoshop or something like GIMP and change the resolution by adjusting the pixels/inch. Many times you will find that a lower resolution still looks great on your web page, and it will be a much smaller file.
One little trick I sometimes will use if I notice that changing resolutions on an image causes the quality to take a noticeable dip is I will make it a part of the design. I will toss a dark overlay over it and/or make it slightly blurry. I'll do this if the image is being used as the background for a section. It helps the text over it to pop out anyhow.
If you are using WordPress, there are a lot of plugins and options out there for compressing images. There are also options for serving next-gen image options, mainly WebP images. WebP images are not supported in all browsers, so make sure you have JPG or some other format as backups to display.
If you are using a video or slideshow, stop it. They are not a great user experience on mobile devices.
Lastly, use a tool like GTMetrix to investigate the loading order of elements on your page. I hate GTMetrix scores and the fact that they default to desktop loading. GTMetrix is pretty useless for everything other than its waterfall display. There are other tools that have waterfall displays, but I find GTMetrix the easiest to work with.
Take a look at what is loading before your LCP element. Are those things necessary? Is there anything that can be deferred or just eliminated?
I've shaved significant times off of LCP scores just by getting rid of Google Fonts. Google Fonts are great, but they have to load from Google's servers. Then if you use different font weights that's an extra library to load.
Another common one that slows down pages are things like Font Awesome icon libraries. A lot of page builders like Elementor will give you the option to use icons from Font Awesome, Themify, or Ionicons.
The problem is that in order to use just one icon, the entire library is loaded. Use a single image instead. Some builders will let you use your own SVG files as icons like Oxygen and Bricks. I think Elementor just added that option recently too.
The advantage of using your own is that the browser only has to load what you are using and not an entire library of icons.
I see this happen a lot with local business websites. They often like to use one of those phone icons beside their phone number in the header. Sometimes an email icon beside an email address too or the Google Places pin beside an address.
Making it worse, I've seen ones where they used the phone icon from Font Awesome and the email icon from Themify. Now two libraries are loaded instead of just one.
Because it loads in the header, this usually will slow down the LCP time. Use your own icons instead and speed it up.

reduce cumulative layout shift cls and largest contentful paint lcp on your web pages
🔗🏹

65 👍🏽13 💟79 filtered from 46 💬🗨

Kroon » Mike
Thank U very much for this info! I really like the "server" sell out site 😉 I do not like GTmatrix either.. One thing is that it only check from a server on the other side of the atlantic sea 🙂 I work with companys with sites in europe and they are so focus to have the 100% green sign on their sites.. I ask them do U think your site is slow? No… So why bother with the GTm scoooooooore!?!
Galvin
Does minimising or compressing CSS, javascript and HTML on the site affect anything on the front end?

Mike ✍️🎩
It does. The impact of of compressing CSS and javascript on LCP times is going to be dependent on how much CSS and javascript is loading before or as part of the LCP element.
Galvin
I understand, which is a good thing. But does it affect anything bad on the front end of the site?
Mike ✍️🎩 » Galvin
I can't think of anything offhand. Try it and test it. It's nothing that cannot be reversed.
Kurt » Galvin
Minification can potentially break a script, but that is what testing is for. It's possible that gzip compression (or any kind of file manipulation) could corrupt a file. I've been a tech for many years and minification and compression are industry standard practices. Do it.

Felix
Thanks for the information. How much you usually charge to improve this score for your clients? I know the price will vary a lot, but just an estimate. Thanks

Mike ✍️🎩
I don't charge for it and I think anyone who is actively marketing a service to improve Core Web Vitals scores is kind of a douche.
💟1
Felix » Mike
I mean improve website speed in general
Mike ✍️🎩 » Felix
I don't charge for that either. If I'm in charge of a website for a client, it's just part of the job.

Prosky
It's funny…Siteground and WPEngine are my 2 go-to's when it comes to fast hosting. I guess maybe times they are a changing…

Mike ✍️🎩
WPEngine is solid. That one turned out to be an issue with the site. It had been hacked.
Prosky » Mike
Good…with as much as they charge, comparatively speaking, they have no excuse for overloaded shared hosting. For that matter neither does Siteground, and their free CDN is, well…a free Content Delivery Network (CDN)..
Mike ✍️🎩 » Prosky
Siteground's pricing is just terrible. It basically triples after year 1. NOBODY should be paying $200+ a year for shared hosting.

Luke
I was told recaptcha is slowing my site down, would you recommend removing it or leaving it up to block spam?

Mike ✍️🎩
I do not put much emphasis on speed. If you get a lot of spam without it and feel your site is fast enough as is, I would leave it.

Jay
I may be a little confused here on topics but can someone explain to me why my server response time would be slow according to Google Search Console (GSC) but Time to first byte (TTFB) is super fast according to my host, Kinsta?

Mike ✍️🎩
GSC is real world data. People connecting from different locations, different devices, different internet speeds.
It will be different than "lab" data which is what sites like GTMetrix or Lighthouse are using.

Jason » Mike
I use WPEngine on a shared hosting plan. (My own local pest control business)
I am talking with them about upgrading my hosting – what would you recommend? Virtual Private Server (VPS)? Dedicated server?

Mike ✍️🎩
Probably a VPS would be fine. Dedicated is really for a high volume or really resource intensive site (like something with a lot of videos). You might even be okay just staying with their shared plan depending how it is performing.

Jason
How can I remove Google fonts?

Mike ✍️🎩
Just don't use them and there will be no reason for them to load.
Jason » Mike
When I run audits on it (page speed insights and others) it tells me they are preloading, and that I should remove unused fonts…not sure how to remove them.
Mike ✍️🎩 » Jason
They generally only load if you are using them in your design somewhere, unless you are using some sort of page builder or plugin that is loading them for some reason.

📰👈

These may satisfy you:
» What’s your position on user signals as a Rranking Factor this year?
» 7 SEO Steps for Website Rehabilitation after Google Updates

RELATED POSTs

Leave a Reply

Your email address will not be published.