[{"slug":"notes-from-wpt-live-audit-done-by-tim-kadlec","frontmatter":{"content":"\nFirst things first, go and watch [the audit](https://www.twitch.tv/videos/1037048087) recording if you haven't already. It is awesome because you learn how to do an audit practically from an expert.\n\nThis blog post is just a notes that I am making while re-watching that audit. So, it might not be well structured. I would keep on updating it as and when I grasp more details of it.\n\n# **Right Configuration for the test run for the Right audit**\n\n- Choose 4G or fast 3G for both Mobile and Desktop. It is more realistic to the real world where people are using their mobiles on the go.\n- You should run the tests on Mobile and Desktop for a given browser. I explain the reason in the **Chrome Field Performance** section.\n- If there is a lot of JavaScript stuff going on e.g. Frameworks like React, it is useful to **enable v8 Sampling Profiler.**\n\n ![Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.37.59_PM.png](/notion/Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.37.59_PM.png)\n\n# **Analyzing the Report**\n\n## **Stats Table**\n\n- Identify gaps b/w **TTFB**(when the first byte of content was received) and **Start Render** and **FCP**(First Contentful Paint).\n- In an ideal world, we would want **FCP** to be the same as **LCP** but that might not be practically possible always.\n - Even a 1 second gap is not that bad.\n- If there is a big gap b/w **TTFB** and **Start Render** then there are some blocking resources(like blocking Javascript or CSS)\n\n## **Chrome Field Performance**\n\n- This is the [CrUX data](https://developers.google.com/web/tools/chrome-user-experience-report) which is retrieved when the WPT test runs and snapshotted along with the report so that you can refer to that report anytime in future.\n- The data is for the URL you are testing and it is a [28 days rolling average](https://developers.google.com/web/tools/chrome-user-experience-report/api/reference#the-rolling-average) i.e. it always represents last 28 days.\n- It can help in doing a kind of sanity check as to how accurate this test report is in comparison to how google sees it for real users.\n\n **You should run the test on both Mobile and Desktop** for a given browser and choose that report to focus on first where the p75 Chrome Field Report(or CrUX report) value and the WPT test's values for Core Web Vitals are similar. I would focus on the second report in this case*(See the distance b/w the arrow pointing downwards and an arrow pointing upwards)*\n\n ![Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.50.09_PM.png](/notion/Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.50.09_PM.png)\n\n ![Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.51.01_PM.png](/notion/Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.51.01_PM.png)\n\n## **Filmstrip View**\n\n### **Tips**\n\n- Start with 0.1s interval for thumbnail generations.\n- Make Filmstrip sticky so that when you scroll down the waterfall, you always have Filmstrip in view.\n- Choose Thumbnail size huge.\n\n## **Waterfall**\n\n### Check Web Vitals Troubleshooting page\n\nIt would give useful debugging info as follows.\n\n- **LCP**\n - Highlights the LCP element\n - Shows the waterfall till the LCP\n- **CLS**\n - Gives you an interactive element which clearly tells you what moved when you hover over it.\n- **TBT**\n - Gives you a view of all JS resources.\n - A breakdown by '**origin**' of Blocking Time for all domains including the website.\n\n## **Timeline View**\n\n- You can compare waterfall timings and JavaScript activity(blocking or non-blocking) and try to match the JS resource by name causing the blocking time in Timeline view.\n\n# **Useful Tools**\n\n- [Library Detector](https://chrome.google.com/webstore/detail/library-detector/cgaocdmhkmfnkdkbnckgmpopcbpaaejo?hl=en) - It quickly tells you what JS frameworks are being used by the website. You see it directly as a dynamically updating extension icon. So, no additional clicks required.\n\n## Optimization Ideas\n\n### LCP Image\n\n- If the LCP Image is from a different domain than the website, it would cause a new connection to be setup(`DNS` + `TCP` + `SSL`) can be in range of ~500-600ms on low end Mobile Devices. See if you can move images to the same domain and with HTTP2/HTTP3 the existing connection(that was used to fetch the main document) would be used to fetch images\n- If there are multiple images, they should all be on same domain(preferably the website domain itself) due to same reason mentioned above\n- LCP images should be requested from the html itself instead of waiting for some JavaScript to come.\n\n# **Miscellaneous Learnings**\n\n- [Hydration](https://en.wikipedia.org/wiki/Hydration_(web_development)) can be costly.\n- There can be a lot of bad things happening on the page but focus on what you are optimizing first. **Identify the noise and separate it from useful knowledge.**\n- The network with the most Packet loss observed is WiFi. I would have guessed mobile network :D. *A reference is required here.*\n- Network Throttling is at Packet level in WPT. You can learn about various types of throttling [here](https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md). As the throttling is at packet level it is more realistic\n- Web Vitals browser support is very limited right now. So, keep it in mind and do identify which browsers most of the traffic is coming from. Read [https://sylormiller.com/posts/2020/core-web-vitals/#the-browser-problem](https://sylormiller.com/posts/2020/core-web-vitals/#the-browser-problem) for more details. LCP and CLS are Chromium(Chrome, Edge, Opera, Samsung Internet) only right now, though FCP is available in Safari and Firefox as well.\n\n***Note: I would keep on updating this blog post as, when and where it makes sense.***","data":{"category":"Performance-Audit, WebPageTest","creationTs":1622624460000,"date":"June 2, 2021 11:01 AM","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","title":"Notes from WPT Live Audit done by Tim Kadlec"},"isEmpty":false,"excerpt":"","category":["Performance-Audit","WebPageTest"],"creationTs":1622624460000,"date":"June 2, 2021","lastModified":"September 9, 2021 3:10 PM","lastModifiedTs":1631193000000,"published":"Yes","title":"Notes from WPT Live Audit done by Tim Kadlec","updated":"September 9, 2021"},"content":"

First things first, go and watch the audit recording if you haven't already. It is awesome because you learn how to do an audit practically from an expert.

This blog post is just a notes that I am making while re-watching that audit. So, it might not be well structured. I would keep on updating it as and when I grasp more details of it.

Right Configuration for the test run for the Right audit

Choose 4G or fast 3G for both Mobile and Desktop. It is more realistic to the real world where people are using their mobiles on the go.
\n
You should run the tests on Mobile and Desktop for a given browser. I explain the reason in the Chrome Field Performance section.
\n
If there is a lot of JavaScript stuff going on e.g. Frameworks like React, it is useful to enable v8 Sampling Profiler.
\n
$\"Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.37.59_PM.png\"$
\n

Analyzing the Report

Stats Table

Identify gaps b/w TTFB(when the first byte of content was received) and Start Render and FCP(First Contentful Paint).
In an ideal world, we would want FCP to be the same as LCP but that might not be practically possible always.
- Even a 1 second gap is not that bad.
\n
If there is a big gap b/w TTFB and Start Render then there are some blocking resources(like blocking Javascript or CSS)

Chrome Field Performance

This is the CrUX data which is retrieved when the WPT test runs and snapshotted along with the report so that you can refer to that report anytime in future.
\n
The data is for the URL you are testing and it is a 28 days rolling average i.e. it always represents last 28 days.
\n
It can help in doing a kind of sanity check as to how accurate this test report is in comparison to how google sees it for real users.
\n
You should run the test on both Mobile and Desktop for a given browser and choose that report to focus on first where the p75 Chrome Field Report(or CrUX report) value and the WPT test's values for Core Web Vitals are similar. I would focus on the second report in this case*(See the distance b/w the arrow pointing downwards and an arrow pointing upwards)*
\n
$\"Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.50.09_PM.png\"$
\n
$\"Notes%20from%20WPT%20Live%20Audit%20done%20by%20Tim%20Kadlec%206d65fc5d56ae429da5d781621dbafac7/Screenshot_2021-06-02_at_5.51.01_PM.png\"$
\n

Filmstrip View

Tips

Start with 0.1s interval for thumbnail generations.
Make Filmstrip sticky so that when you scroll down the waterfall, you always have Filmstrip in view.
Choose Thumbnail size huge.

Waterfall

Check Web Vitals Troubleshooting page

It would give useful debugging info as follows.

LCP
- Highlights the LCP element
- Shows the waterfall till the LCP
\n
CLS
- Gives you an interactive element which clearly tells you what moved when you hover over it.
\n
TBT
- Gives you a view of all JS resources.
- A breakdown by 'origin' of Blocking Time for all domains including the website.
\n

Timeline View

You can compare waterfall timings and JavaScript activity(blocking or non-blocking) and try to match the JS resource by name causing the blocking time in Timeline view.

Useful Tools

Library Detector - It quickly tells you what JS frameworks are being used by the website. You see it directly as a dynamically updating extension icon. So, no additional clicks required.

Optimization Ideas

LCP Image

If the LCP Image is from a different domain than the website, it would cause a new connection to be setup(DNS + TCP + SSL) can be in range of ~500-600ms on low end Mobile Devices. See if you can move images to the same domain and with HTTP2/HTTP3 the existing connection(that was used to fetch the main document) would be used to fetch images
If there are multiple images, they should all be on same domain(preferably the website domain itself) due to same reason mentioned above
LCP images should be requested from the html itself instead of waiting for some JavaScript to come.

Miscellaneous Learnings

Hydration can be costly.
There can be a lot of bad things happening on the page but focus on what you are optimizing first. Identify the noise and separate it from useful knowledge.
The network with the most Packet loss observed is WiFi. I would have guessed mobile network :D. A reference is required here.
Network Throttling is at Packet level in WPT. You can learn about various types of throttling here. As the throttling is at packet level it is more realistic
Web Vitals browser support is very limited right now. So, keep it in mind and do identify which browsers most of the traffic is coming from. Read https://sylormiller.com/posts/2020/core-web-vitals/#the-browser-problem for more details. LCP and CLS are Chromium(Chrome, Edge, Opera, Samsung Internet) only right now, though FCP is available in Safari and Firefox as well.

Note: I would keep on updating this blog post as, when and where it makes sense.

\n"}]

Category: Performance-Audit