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.

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

4. @LoukilAymen
web.dev/metrics #ChromeDevSummit

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 !

13. @LoukilAymen
Lighthouse Architecture

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

25. @LoukilAymen
Report generated

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

31. @LoukilAymen
Report

32. @LoukilAymen
Another example ?

33. @LoukilAymen
2nd example - Number of images (quantitative metric)
Number Of Images
NOI < 15

34. @LoukilAymen
ImageCount Gatherer
imagecount-gatherer.js

35. @LoukilAymen
ImageCount audit
imagecount-audit.js

36. @LoukilAymen
Custom configuration
custom-config.js

37. @LoukilAymen
Report

38. @LoukilAymen
3rd example - Fonts size [without a gatherer]
size-audit.js

39. @LoukilAymen
3rd example - Fonts size [without a gatherer]

40. @LoukilAymen
Report

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

46. @LoukilAymen
Lighthouse CI #ChromeDevSummit

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