Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lighthouse custom audits - London Web Performance 2019

977 views

Published on

Generic metrics are useful to measure and evaluate an overall level of a website performance. The standard KPIs suppose that all the websites are similar which is false. News websites are so different from e-commerce ones for example.

Custom performance metrics come to fill the gap and give us another level of measuring the user experience and satisfaction. Some of the tools provide ways to create and measure custom metrics. In this session we will dive into Google Lighthouse custom audits. What they could be used for ? How could we create our own Lighthouse audits ?

Published in: Marketing
  • Be the first to comment

Lighthouse custom audits - London Web Performance 2019

  1. 1. @LoukilAymen Google Lighthouse Custom Audits For Web Performance @LDNWebPerf
  2. 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. 3. @LoukilAymen
  4. 4. @LoukilAymen web.dev/metrics #ChromeDevSummit
  5. 5. @LoukilAymen Product Hero Image Time To Hero Image
  6. 6. @LoukilAymen Hero paragraph / heading Time To Hero Heading / Paragraph
  7. 7. @LoukilAymen When video starts to play First Video Second
  8. 8. @LoukilAymen Business hero element Time To First User Story ?
  9. 9. @LoukilAymen So you mean we could measure these with Lighthouse ?
  10. 10. @LoukilAymen Hidden gem in Lighthouse repo https://github.com/GoogleChrome/lighthouse
  11. 11. @LoukilAymen Lighthouse became my super tool !
  12. 12. @LoukilAymen Extend Lighthouse default categories !
  13. 13. @LoukilAymen Lighthouse Architecture
  14. 14. @LoukilAymen Audit requirements gatherer.js audit.js custom-config.js
  15. 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. 16. @LoukilAymen 1- Define the metric to test TTHI : Time To Hero Image Example : TTHI < 3 seconds
  17. 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. 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. 19. @LoukilAymen 3- Write the Gatherer heroimage-gatherer.js
  20. 20. @LoukilAymen 4- Create the audit heroimage-audit.js Define the metas
  21. 21. @LoukilAymen 4- Create the audit Write the auditheroimage-audit.js
  22. 22. @LoukilAymen 4- Set up a custom configuration custom-config.js
  23. 23. @LoukilAymen Run the custom audit lighthouse --config-path=custom-config.js https://yourURL
  24. 24. @LoukilAymen Lighthouse running the audits
  25. 25. @LoukilAymen Report generated
  26. 26. @LoukilAymen
  27. 27. @LoukilAymen Q: Do i always need a gatherer ?
  28. 28. @LoukilAymen What if we add another audit ?
  29. 29. @LoukilAymen Time To Product Price TTPP : Time To Product Price Example : TTPP < 1 seconds
  30. 30. @LoukilAymen Multiple audits category More weight for the hero image We have now 2 audits to run
  31. 31. @LoukilAymen Report
  32. 32. @LoukilAymen Another example ?
  33. 33. @LoukilAymen 2nd example - Number of images (quantitative metric) Number Of Images NOI < 15
  34. 34. @LoukilAymen ImageCount Gatherer imagecount-gatherer.js
  35. 35. @LoukilAymen ImageCount audit imagecount-audit.js
  36. 36. @LoukilAymen Custom configuration custom-config.js
  37. 37. @LoukilAymen Report
  38. 38. @LoukilAymen 3rd example - Fonts size [without a gatherer] size-audit.js
  39. 39. @LoukilAymen 3rd example - Fonts size [without a gatherer]
  40. 40. @LoukilAymen Report
  41. 41. @LoukilAymen Check all the code examples
  42. 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. 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. 44. @LoukilAymen Tools doing custom metrics audits
  45. 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
  46. 46. @LoukilAymen Lighthouse CI #ChromeDevSummit
  47. 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

×