Debugging a Slow Core Web Vital Score

A Request Metrics customer asked for some help troubleshooting poor scores on their Core Web Vitals, specifically the Largest Contentful Paint. I did a deep dive on their site and recorded my debugging session, so you can see how I went about finding the root cause.

Transcript

0:00 Hey everybody, Todd from Request metrics here. A customer might ask for some help, trouble shooting, some issues with performance on one of their web pages.

0:09 And so I thought I’d show everybody exactly how I go about digging into this issue. Now, this customer says that they have a bad largest contentful paint (LCP), which is one of Google’s core web vitals.

0:19 It’s a measurement of how long it takes until the largest thing renders on the screen, or the most important thing that is on your screen.

0:26 And so it’s an important measure of performance that could impact your page rank results. Here, I’m collecting some data from their website using Request metrics.

0:35 And I’m showing the largest contentful paint by country and by page, and all kinds of various things. And we’re going to use this to drill in and understand what exactly is happening here.

0:46 So let’s dig in and try and understand when it goes bad, why does it go bad? So their primary market is India.

0:53 So we’re going to filter this and only show Indian users. And then so much of performance is about the end user’s device and how they’re connected.

1:03 So let’s take some of that stuff out of the equation. And we’re going to add a couple of filters. We’re going to filter to only show data from fast broadband and broadband connected devices, so that a slow cellular connection or a high latency device doesn’t impact our results here.

1:18 So now that we’ve drilled in, we can now focus on only those people with bad scores. There’s a lot of them.

1:25 There’s over a thousand people who’ve had a bad score. And then here we have it broken down by page. Now they specifically asked me about this one.

1:33 This magazine books WI wealth insight. So let’s let’s look at that. You’re all the individual requests to that page that have had a bad score.

1:44 So let’s just pick one of them. Ooh, this one’s four seconds for first eight seconds for largest. Let’s drill into that one.

1:52 That seems good. So this was a slow connection using Chrome mobile on a broadband device. It took nine seconds to load the page.

2:02 Eight seconds for LCP. So pretty slow. Now this is like this waterfall chart I have right here is like having the Chrome dev tools open of this slow session.

2:14 So we can see exactly what did they experience that caused this thing. First contentful paint was kind of slow. It looks like everything was happening here while blocking assets were loaded.

2:24 This is all of the blocking calls to JavaScript and fonts and CSS files and all of the things that actually stop rendering from happening.

2:33 So things blocking in the head of the page. When the DOM finally did load LCP happened really quick after that and load not much farther after that.

2:42 So it looks like this is our core problem that we need to focus on. So now we break down all the individual scripts and API calls that are happening during this time to try and figure out what exactly is going on.

2:55 Throughout the bat we have Google Tag Manager so they’re using Tag Manager that then they’re bringing in me request metrics and a beacon from Cloud Player Insights.

3:04 So this is three things that are all coming in that I don’t know that any of them necessarily have to come in in a blocking state.

3:12 Request metrics certainly does that could come in asynchronously later. Google Tag Manager and this thing probably could have could defer until after page load and not block.

3:22 Then we have a bunch more that looks like they were loaded by the Tag Manager. So once the Tag Manager’s done it’s bringing in this empty see file, Facebook, Twitter, LinkedIn, Adroll, another Google Tag Manager thing.

3:38 And then another LinkedIn thing looks like there’s two different LinkedIn things happening. So a whole bunch of things coming in synchronously from that Tag Manager happening here and blocking that load event from from happening.

3:52 Now we see a bunch of those scripts making API calls as part of their startup. And one thing that’s really weird here is I see tons of calls to CDN, LinkedIn, or BIO, like a ton of them way more than probably should happen.

4:05 And this just goes on and on and on and you see that slowly Mac like it’s maxing out the number of network calls that this browser can make because we’re just sitting here blocked up until they finish.

4:17 Bring in some more JavaScript things from Facebook, Adroll, Adroll, another post event, Adroll, Adroll, Zoho, Adroll, another call. And then way out here is when we’re finally able to like render.

4:32 So here’s like largest contentful paint out here. So I think it’s all of these different advertising pixels or tracking providers or whatever causing this issue.

4:42 Now if we look at the page itself, let’s see if we can confirm what’s going on. Here’s what that page looks like if I visit it right now.

4:51 As I reload this page, it was visibly kind of low like I noticed it being slow. And so here’s all of these different calls happening.

4:59 Look at how many calls are happening. These are all those things to LinkedIn or BIO, all these calls to token over and over and over again.

5:09 And we look at what’s causing these. Check out what’s in the head tag. Look at all of these redundant calls to the same insight beta and beta, min, JS file, just over and over and over again.

5:21 Now I think I think this is a misconfiguration in their tag manager. I think they’re probably placing the same tag a whole bunch of times or they’re placing it incorrectly.

5:32 I think my recommendation to them is to take a look at their tag manager configuration. Google tag manager itself requests metrics and cloud clear insights.

5:41 They can all be a synchronously loaded. So take them move them from the head of the page, count to the foot of the page and make them a sync if you can.

5:49 And then the configuration coming from tag manager, that should really like defer all of its work until after load. None of these things really need to come in before.

5:59 And I think that’s going to make all of this way snappier. If you’d like to get data like this about your website, you can give it a try out on request metrics.com or send me a note and I’d be happy to dig into something for you.

6:11 Have a great day.