SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Lighthouse custom audits - London Web Performance 2019
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 ?
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 ?
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
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
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
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