Lighthouse custom audits - London Web Performance 2019
3 likes•6,055 views
The document discusses using Google Lighthouse to create custom audits for web performance metrics. It provides examples of defining metrics like time to hero image, adding custom gathers and audits, and generating reports. Creating custom Lighthouse audits allows measuring important metrics outside the default categories and correlating them with business metrics. The document also discusses tools for custom metrics, Lighthouse variability, and automating measurements with Lighthouse CI.
![@LoukilAymen
3rd example - Fonts size [without a gatherer]
size-audit.js](https://image.slidesharecdn.com/lighthousecustomaudits-ldnwebperformance-191113151712/85/Lighthouse-custom-audits-London-Web-Performance-2019-38-320.jpg)
![@LoukilAymen
3rd example - Fonts size [without a gatherer]](https://image.slidesharecdn.com/lighthousecustomaudits-ldnwebperformance-191113151712/85/Lighthouse-custom-audits-London-Web-Performance-2019-39-320.jpg)
Lighthouse custom audits - London Web Performance 2019
- 1. @LoukilAymen Google Lighthouse Custom Audits For Web Performance @LDNWebPerf
- 2. @LoukilAymen Hello i’m Aymen Loukil International SEO Consultant 15 years on the web / Entrepreneur Speaker at many events I make websites faster.. Ex-developer (And i love devs) https://www.aymen-loukil.com @LoukilAymen
- 3. @LoukilAymen
- 5. @LoukilAymen Product Hero Image Time To Hero Image
- 6. @LoukilAymen Hero paragraph / heading Time To Hero Heading / Paragraph
- 7. @LoukilAymen When video starts to play First Video Second
- 8. @LoukilAymen Business hero element Time To First User Story ?
- 9. @LoukilAymen So you mean we could measure these with Lighthouse ?
- 10. @LoukilAymen Hidden gem in Lighthouse repo https://github.com/GoogleChrome/lighthouse
- 11. @LoukilAymen Lighthouse became my super tool !
- 12. @LoukilAymen Extend Lighthouse default categories !
- 14. @LoukilAymen Audit requirements gatherer.js audit.js custom-config.js
- 15. @LoukilAymen Custom audit requirements 1- Define the metric(s) to test 2- Ensure we have the data to test it 3- Write the Gatherer 4- Write the audit 5- Set up a custom config
- 16. @LoukilAymen 1- Define the metric to test TTHI : Time To Hero Image Example : TTHI < 3 seconds
- 17. @LoukilAymen User Timing API 1- Create a mark : performance.mark(“hero_image”); 2- Retrieve it by name : performance.getEntriesByName("hero_image") https://developer.mozilla.org/en-US/docs/We b/API/User_Timing_API
- 18. @LoukilAymen 2- Ensure we have the data to test We should mark to time when the hero image is loaded yourwebsite/my-awesome-product.html
- 19. @LoukilAymen 3- Write the Gatherer heroimage-gatherer.js
- 20. @LoukilAymen 4- Create the audit heroimage-audit.js Define the metas
- 21. @LoukilAymen 4- Create the audit Write the auditheroimage-audit.js
- 22. @LoukilAymen 4- Set up a custom configuration custom-config.js
- 23. @LoukilAymen Run the custom audit lighthouse --config-path=custom-config.js https://yourURL
- 24. @LoukilAymen Lighthouse running the audits
- 26. @LoukilAymen
- 27. @LoukilAymen Q: Do i always need a gatherer ?
- 28. @LoukilAymen What if we add another audit ?
- 29. @LoukilAymen Time To Product Price TTPP : Time To Product Price Example : TTPP < 1 seconds
- 30. @LoukilAymen Multiple audits category More weight for the hero image We have now 2 audits to run
- 33. @LoukilAymen 2nd example - Number of images (quantitative metric) Number Of Images NOI < 15
- 38. @LoukilAymen 3rd example - Fonts size [without a gatherer] size-audit.js
- 39. @LoukilAymen 3rd example - Fonts size [without a gatherer]
- 41. @LoukilAymen Check all the code examples
- 42. @LoukilAymen Create Lighthouse Plugin Specific to a CMS, framework Specific to group of tests https://github.com/GoogleChrome/lighth ouse/tree/master/docs/recipes/lighthous e-plugin-example
- 43. @LoukilAymen API for custom metrics - Performance Observer - User Timing API - Long Tasks API - Element Timing API - Resource Timing API - Navigation Timing API - Server Timing API
- 44. @LoukilAymen Tools doing custom metrics audits
- 45. @LoukilAymen Final notes - Many possibilities for custom metrics measurement - Correlate custom metrics with business KPIs (Bounce rate, conversions..) - Explore new custom metrics spaces - Lighthouse variability - Automate measurements with Lighthouse CI (new) - https://github.com/GoogleChrome/lighthouse-ci
- 47. @LoukilAymen Questions ?International SEO Consultant 15 years on the web / Entrepreneur Speaker at many events I make websites faster.. Ex-developer https://www.aymen-loukil.com @LoukilAymen