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
- collect some performance / web vitals KPIs. I selected Largest Contentful Paint https://web.dev/lcp/, Cumulative Layout Shift https://web.dev/cls/ and ScriptDuration https://chromedevtools.github.io/devtools-protocol/tot/Performance/#method-getMetrics
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.
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.
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…
There is a lot of good information on Google (+ I added some links below) what to do. Strategies would be e.g.
- async, defer (check: https://addyosmani.com/blog/script-priorities/)
- change the load priority
- split it and load load just the parts needed
- get it from a CDN
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
Looking for feedback to improve it…
After getting really weird LCP and CLS numbers first with real websites I wondered if something is wrong with my script.
- 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…