Why I Am Writing This

I run a few websites now, and since starting out my performance has been very up and down. I have found it downright annoying at times. Everything seems to work so well for me locally, but then I check my server analytics and I can see that for certain countries my speed has been terrible.

It has always seemed to be either CLS or LCP that has been the issue for me. So I thought I would share my experience and try to help others figure this out, especially if you are going through the same thing. Or maybe you have had trouble with this and have a unique perspective or solution? I would love to hear about it.

According to Search Engine Journal, optimizing these two metrics can significantly improve your site's visibility and user satisfaction. That sounded great in theory, but actually fixing them has been a different story. Let me walk you through what I have learned.

What Are CLS and LCP, Exactly?

Before I get into my own struggles, let me explain what these actually are, because when I first saw these acronyms in Google Search Console, I had no idea what they meant.

Cumulative Layout Shift (CLS) measures how much your page layout jumps around while it loads. You know when you are about to tap a button and the whole page shifts, so you click the wrong thing? That is a CLS problem. It is incredibly frustrating as a user, and it turns out search engines penalise you for it too.

Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element on your page to load. Usually that is a hero image or a large block of text. If your LCP is slow, your visitors are staring at a half-loaded page, and many will just leave.

Both of these fall under Google's Core Web Vitals, which directly affect your search rankings. So even if your content is brilliant, poor CLS and LCP scores can hold you back.

Optimize Your Website for CLS and LCP

🖼️

Set Image Dimensions
Specify width and height for images

📢

Use Ads Responsibly
Avoid unexpected ad resizing

⚡

Preload Important Resources
Ensure critical content loads quickly

🔄

Minimize Dynamic Content
Limit content that changes during loading

📊

Monitor Performance Regularly
Use tools to track CLS and LCP scores

My CLS Nightmare

CLS was the first issue I ran into. My pages looked fine to me, but my scores were terrible. After a lot of digging, I found the main culprits:

Images without dimensions: I was not setting width and height on my images. The browser had no idea how much space to reserve, so everything shifted once the images loaded.
Fonts loading late: My custom fonts were loading after the page rendered, causing all my text to jump as the new font replaced the fallback. This one was subtle but it added up.
Dynamic content: I had some components that injected content after the page loaded, pushing everything below them down.

The fix for most of my CLS issues was surprisingly simple. I started defining explicit dimensions for all images and media. I added font-display swap to my font loading so the fallback renders immediately. And I reserved space with CSS for any content that loads dynamically.

Tools like Google PageSpeed Insights were a huge help here. They show you exactly which elements are causing layout shifts, so you are not guessing.

Then Came the LCP Problem

Just when I thought I had things sorted, my LCP scores started flagging. The frustrating part was that my site loaded fast for me in the UK, but my analytics showed terrible speeds in other countries. That is the thing about LCP - it depends heavily on where your users are and how far they are from your server.

The main issues I found were:

Large unoptimised images: My hero images were way too big. I was uploading full-resolution photos without compressing them.
Server response time: Without a CDN, users far from my server were waiting ages for the first response.
Render-blocking JavaScript: I had scripts loading in the head that were blocking the page from rendering until they finished.

As Backlinko's study shows, sites with good LCP scores have noticeably better engagement and lower bounce rates. Once I started fixing these issues, I could see the difference in my own analytics.

What Actually Helped My LCP

I started compressing all my images and using WebP format where possible. I also moved non-essential scripts to load asynchronously or deferred them entirely. My sites are hosted on Vercel, which handles a lot of the edge network stuff for me, but if you are on traditional hosting, setting up a CDN can make a huge difference for international traffic.

A CDN stores copies of your site in locations around the world, so visitors are served from somewhere closer to them rather than your single origin server. If you are seeing bad speeds in specific regions, that is one of the first things worth looking into.

The Annoying Part - It Is Never Really "Fixed"

Here is what nobody tells you about CLS and LCP. You do not fix them once and move on. Every time I add a new feature, a new image, or change my layout, the scores can shift again. It is an ongoing thing.

I have had weeks where everything is green in Google Search Console, and then I add one new component and suddenly my CLS is flagged again. It is downright annoying, but I have learned to check my Core Web Vitals after every significant change now.

Impact of CLS and LCP on User Experience

0.1 seconds

User Tolerance

32%

Bounce Rate Increase

Conversion Rate Drop

Core Web Vitals

SEO Ranking Importance

A report by The Financial Brand highlights how slow websites can directly lead to revenue loss. That is motivation enough to keep on top of it, even when it feels tedious.

The Tools That Have Helped Me Most

If you are dealing with the same issues, here are the tools I actually use and find helpful:

Google Search Console: This is where I first noticed my problems. It shows your Core Web Vitals scores broken down by page and tells you exactly what needs attention.
PageSpeed Insights: I run every page through this after making changes. It gives specific, actionable recommendations rather than vague advice. Shopify's web performance guide is also a great companion resource.
Web Vitals Extension: This Chrome extension shows your CLS, LCP, and other metrics in real time as you browse your own site. I keep it on constantly during development.

Once you have identified your performance issues, use our Google Search AI ranking tool to check whether your improvements are actually translating into better search visibility. There is no point fixing scores if it is not helping your rankings.

My Advice If You Are Going Through This

If your performance has been as up and down as mine, here is what I would suggest:

Do not panic. CLS and LCP issues are incredibly common. You are not doing everything wrong - these metrics are just sensitive.
Check your analytics by country. Your site might be fast for you but slow for visitors elsewhere. A CDN can solve this quickly.
Fix images first. In my experience, unoptimised images and missing dimensions are the cause of most CLS and LCP problems.
Test after every change. Get into the habit of running PageSpeed Insights whenever you make significant updates.
Be patient. Google Search Console data can take days or weeks to update. Do not assume your fixes are not working just because the dashboard has not changed yet.

I am still learning and still dealing with this. My scores are better than they were, but I would not call them perfect. If you have found solutions that worked for you, I genuinely want to hear about them. You can also try visualising your performance data with our free online chart maker to track improvements over time.

The bottom line is this: CLS and LCP are not going away. They matter for SEO, they matter for user experience, and if you run websites like I do, they will keep you on your toes. But they are fixable, and every improvement you make is worth it.