How to decode page speed reports

- Today, every client expects a fast and smooth user experience on their websites. To put it in as deliverables they use "score(s)" from Google PageSpeed Insights, Lighthouse, Pingdom Tools or GTMetrix as baseline indicators.

In this session, we will learn how these scores are calculated and how to understand the reports. You will learn to read beyond the boilerplate recommendations you get from these tools.
This talk will have some technical parts but is aimed to equip everyone with web performance basics not just developers.

By Dhaval Shah

Transcript

1. Decoding Page Speed Reports Ahmedabad WordPress Meetup - February 2020
2. Full Disclaimer: Nothing I show today is “mine”. Everything is “crowdsourced” in bits & pieces from various documentations, research articles, great talks, and personal conversations. There are many smart folks who worked diligently and shared with the world. I am just continuing the sharing.
3. Howdy, I’m Dhaval! I am a digital wrangler who loves WordPress, and web just like you. Whether you hate it, like it, or love it, Share your views/feedback/queries with me on Twitter @dhavalgshah Wears many hats at
4. Why should you take a nap now?
5. well, because Not a “how to resolve” talk This talk is to uncover under the hood stuff of page speed reports. No plugins or one-size-fits-all solutions Well, heading says that all. #WebPerformance is exciting Look beyond WordPress, and learn more about web!
6. “It’s gonna be legen… wait for it… dary!”
8. Performance !== Speed
9. Tools of the trade!
14. Why different scores?
15. Because there are variables..
16. Location • Number of locations • Geographic spread • Load on each test location
17. Test Setup
18. onload vs fullyloaded
19. Throttling Strategy Source: https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md Simulated throttling which Lighthouse uses by default, uses a simulation of a page load, based on the data observed in the initial unthrottled load. However, due to the imperfect nature of predicting alternate execution paths, there is inherent inaccuracy Request-level throttling also referred to as Applied throttling in the Audits panel or devtools throttling in Lighthouse configuration, is how throttling is implemented with Chrome DevTools. Packet-level aka Network Shaping able to make the most accurate network simulation. While this approach can model real network conditions most effectively, it also can introduce more variance than request-level or simulated throttling. WebPageTest uses packet-level throttling.
20. Scoring logic pagespeed insights library vs yslow.org vs lighthouse vs the WebPageTest way
21. Rest of the Infrastructure Network throughput Server hardware Browser engine
22. So, score of 100 can be deceiving
23. Performance is a moving target
24. Focus on user centric metrics!
25. Lighthouse scoring Metric Category Weighting first-contentful-paint 20.00% first-meaningful-paint 6.70% speed-index 26.70% interactive 33.30% first-cpu-idle 13.30% max-potential-fid 0.00%
26. But they are improving... Metric Category Weighting first-contentful-paint 25 largest-contentful-paint 20 speed-index 15 interactive 15 total-blocking-time 25
27. Source: https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 by @addyosmani
29. lets dive in the demo
30. Thank you!