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