Which Javascript ruins your web vitals KPIs? Use Puppeteer to run automated request blocking tests. An experiment!

Search for a more automated method to learn about the effect of single Javascripts on LCP, CLS and Script Duration

The idea

Create a Puppeteer script which blocks every Javascript of a given URL using Puppeteer’s setRequestInterception and runs a performance / web vitals KPI test, which you then compare to having all scripts switched on.

Why Puppeteer

Manually you can use Chrome Dev Tools and block a Javascript request like this

So you block one scripts 👉 check performance / web vitals KPIs 👉 check if basic site functionality is still ok … 👉 repeat with the next script being blocked. This is done with slowed down connection, slowed down CPU and disabled cache of course.

Seems to be a lot of clicking around and waiting for a publishing websites with easily 20+ scripts. In addition you want to test not just your homepage, but maybe articles, sections, AMP and so on. Plus test conditions are not always the same (sometimes you have nice ads / sometimes bad ones) so you may want to test over time.

Let’s see what’s possible with Puppeteer.

What the Puppeteer script does

The CSV output of the Script

Results, interpretation, learnings

After you generated a pivot table with the collected data you will get something like this. The green line is the results with nothing being blocked. So what you are looking for is significantly better numbers compared to that “nothing blocked” line with a script being blocked.

LCP

You are looking for a Javascripts, which improved LCP a lot if you kicked it out. I checked multiple sites and as soon as you can lower LCP by request blocking a script + the script is not loaded async or defer and maybe in addition in the header this is an indictor to investigate if async or some different loading strategy is possible. Candidates here may be the orange Javascripts.

If you have jumps in the data you should investigate (yellow). In the example its not so easy because the much better LCP (with all the assets/… scripts) is caused by the page not being usable anymore / having no images. This can be checked with the screenshots generated by the script. The screenshot shows you that request blocking npm.regenerator-runtime… is a bad idea. You need to investigate further.

CLS

Here too you want to watch out for Javascripts, which improved CLS a lot if being blocked. The yellow ones being blocked for example lowered the numbers from about 1.3 CLS to 0.4 CLS, which is a strong indicator that they cause unwanted layout shifts.

Here too have a quick look at the screenshots. In this case the screenshot of atm.js (compare filename) being blocked looks fine.

Video about the Script and some learnings…

What to do if you found a Javascript which slows down your site (bad LCP)

There is a lot of good information on Google (+ I added some links below) what to do. Strategies would be e.g.

But even async and defer will load the script at some point. If you want to go for real edge cases, it’s also possible to not load it at all. Most third-party scripts add some improvements, tracking, ads or testing to your site. But they are in most cases not necessary for a page to function properly. So they might be candidates to not load at all in case of slow networks…

What to do with bad CSL Scoring

Read this https://web.dev/cls/

Related to ads, embeds, … its good strategy to copy AMPs Layout System approach

… infer sizing of elements before any remote resources, such as JavaScript and data calls, have been completed …

Tests

After getting really weird LCP and CLS numbers first with real websites I wondered if something is wrong with my script.

So I build a little test and created two Javascripts which ruin LCP and CLS. More about the test scripts here:

Open questions

  • How can measurements be positive if I have a script blocked? It’s somehow related to load something async or not… but really hard to predict without checking the code in detail
  • How to test FID with Puppeteer? More KPIs…

Head of #SEO at Blick.ch