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