Lighthouse custom audits - London Web Performance 2019

Aymen Loukil
Aymen LoukilInternational SEO Consultant
@LoukilAymen
Google Lighthouse Custom
Audits
For Web Performance
@LDNWebPerf
@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
@LoukilAymen
@LoukilAymen
web.dev/metrics #ChromeDevSummit
@LoukilAymen
Product Hero Image
Time To Hero Image
@LoukilAymen
Hero paragraph / heading
Time To Hero Heading /
Paragraph
@LoukilAymen
When video starts to play
First Video Second
@LoukilAymen
Business hero element
Time To First User
Story ?
@LoukilAymen
So you mean we could measure these
with Lighthouse ?
@LoukilAymen
Hidden gem in Lighthouse repo
https://github.com/GoogleChrome/lighthouse
@LoukilAymen
Lighthouse became my super tool !
@LoukilAymen
Extend Lighthouse default categories !
@LoukilAymen
Lighthouse Architecture
@LoukilAymen
Audit requirements
gatherer.js audit.js custom-config.js
@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
@LoukilAymen
1- Define the metric to test
TTHI : Time To Hero Image
Example : TTHI < 3 seconds
@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
@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
@LoukilAymen
3- Write the Gatherer
heroimage-gatherer.js
@LoukilAymen
4- Create the audit
heroimage-audit.js Define the metas
@LoukilAymen
4- Create the audit
Write the auditheroimage-audit.js
@LoukilAymen
4- Set up a custom configuration
custom-config.js
@LoukilAymen
Run the custom audit
lighthouse --config-path=custom-config.js https://yourURL
@LoukilAymen
Lighthouse running the audits
@LoukilAymen
Report generated
@LoukilAymen
@LoukilAymen
Q: Do i always need a gatherer ?
@LoukilAymen
What if we add another audit ?
@LoukilAymen
Time To Product Price
TTPP : Time To Product Price
Example : TTPP < 1 seconds
@LoukilAymen
Multiple audits category
More weight for the
hero image
We have now 2
audits to run
@LoukilAymen
Report
@LoukilAymen
Another example ?
@LoukilAymen
2nd example - Number of images (quantitative metric)
Number Of Images
NOI < 15
@LoukilAymen
ImageCount Gatherer
imagecount-gatherer.js
@LoukilAymen
ImageCount audit
imagecount-audit.js
@LoukilAymen
Custom configuration
custom-config.js
@LoukilAymen
Report
@LoukilAymen
3rd example - Fonts size [without a gatherer]
size-audit.js
@LoukilAymen
3rd example - Fonts size [without a gatherer]
@LoukilAymen
Report
@LoukilAymen
Check all the code examples
@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
@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
@LoukilAymen
Tools doing custom metrics audits
@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
@LoukilAymen
Lighthouse CI #ChromeDevSummit
@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
1 of 47

Recommended

Web vitals are vitals - Aymen Loukil by
Web vitals are vitals  - Aymen LoukilWeb vitals are vitals  - Aymen Loukil
Web vitals are vitals - Aymen LoukilAymen Loukil
1.8K views51 slides
20 quick wins to improve your website speed by
20 quick wins to improve your website speed20 quick wins to improve your website speed
20 quick wins to improve your website speedAymen Loukil
1K views44 slides
Optimizing Your Site for Holiday Traffic by
Optimizing Your Site for Holiday TrafficOptimizing Your Site for Holiday Traffic
Optimizing Your Site for Holiday TrafficWP Engine UK
701 views33 slides
Don't lose revenue. Go viral with no downtime. by
Don't lose revenue. Go viral with no downtime.Don't lose revenue. Go viral with no downtime.
Don't lose revenue. Go viral with no downtime.WP Engine
629 views39 slides
The WordPress REST API as a Springboard for Website Greatness by
The WordPress REST API as a Springboard for Website GreatnessThe WordPress REST API as a Springboard for Website Greatness
The WordPress REST API as a Springboard for Website GreatnessWP Engine UK
2.4K views23 slides
3 Gifts My Users Gave Me - Alexandra Draghici - WordCamp Europe 2017 by
3 Gifts My Users Gave Me - Alexandra Draghici - WordCamp Europe 20173 Gifts My Users Gave Me - Alexandra Draghici - WordCamp Europe 2017
3 Gifts My Users Gave Me - Alexandra Draghici - WordCamp Europe 2017Alexandra_CaptainForm
1.3K views38 slides

More Related Content

What's hot

Great Lakes Area .Net UG: Optimize .Net Azure App Services by
Great Lakes Area .Net UG: Optimize .Net Azure App ServicesGreat Lakes Area .Net UG: Optimize .Net Azure App Services
Great Lakes Area .Net UG: Optimize .Net Azure App ServicesBrian McKeiver
1.6K views60 slides
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016... by
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...Peter Elmered
479 views16 slides
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup by
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo MeetupWordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo MeetuprtCamp
189 views39 slides
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications by
WordCamp San Diego 2015 - WordPress, WP-API, and Web ApplicationsWordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
WordCamp San Diego 2015 - WordPress, WP-API, and Web ApplicationsRoy Sivan
1.5K views25 slides
Webinar: On-Page SEO Tips and Tricks by
Webinar: On-Page SEO Tips and TricksWebinar: On-Page SEO Tips and Tricks
Webinar: On-Page SEO Tips and TricksWP Engine
2.5K views49 slides
Webinar: AngularJS and the WordPress REST API by
Webinar: AngularJS and the WordPress REST APIWebinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST APIWP Engine UK
2.2K views31 slides

What's hot(20)

Great Lakes Area .Net UG: Optimize .Net Azure App Services by Brian McKeiver
Great Lakes Area .Net UG: Optimize .Net Azure App ServicesGreat Lakes Area .Net UG: Optimize .Net Azure App Services
Great Lakes Area .Net UG: Optimize .Net Azure App Services
Brian McKeiver1.6K views
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016... by Peter Elmered
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Peter Elmered479 views
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup by rtCamp
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo MeetupWordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup
WordPress on the Jamstack by rtCamper Muhammad Muhsin @ WordPress Colombo Meetup
rtCamp 189 views
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications by Roy Sivan
WordCamp San Diego 2015 - WordPress, WP-API, and Web ApplicationsWordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
WordCamp San Diego 2015 - WordPress, WP-API, and Web Applications
Roy Sivan1.5K views
Webinar: On-Page SEO Tips and Tricks by WP Engine
Webinar: On-Page SEO Tips and TricksWebinar: On-Page SEO Tips and Tricks
Webinar: On-Page SEO Tips and Tricks
WP Engine2.5K views
Webinar: AngularJS and the WordPress REST API by WP Engine UK
Webinar: AngularJS and the WordPress REST APIWebinar: AngularJS and the WordPress REST API
Webinar: AngularJS and the WordPress REST API
WP Engine UK2.2K views
Steve Bailey — Core Web Vitals & Roadblocks to Success by Semrush
Steve Bailey — Core Web Vitals & Roadblocks to SuccessSteve Bailey — Core Web Vitals & Roadblocks to Success
Steve Bailey — Core Web Vitals & Roadblocks to Success
Semrush1.7K views
WordPress Tallahassee Meetup: Turning WordPress Sites Into Web & Mobile Apps by Caldera Labs
WordPress Tallahassee Meetup: Turning WordPress Sites Into Web & Mobile AppsWordPress Tallahassee Meetup: Turning WordPress Sites Into Web & Mobile Apps
WordPress Tallahassee Meetup: Turning WordPress Sites Into Web & Mobile Apps
Caldera Labs3.5K views
Zero cost serverless Real time web app by Barcamp Saigon
Zero cost serverless Real time web appZero cost serverless Real time web app
Zero cost serverless Real time web app
Barcamp Saigon3.1K views
Client-friendly WordPress Websites by Aaron Rutley
Client-friendly WordPress WebsitesClient-friendly WordPress Websites
Client-friendly WordPress Websites
Aaron Rutley806 views
Cool Shit You Can Do With WordPress (BrightonSEO 2014) by Patrick Hathaway
Cool Shit You Can Do With WordPress (BrightonSEO 2014)Cool Shit You Can Do With WordPress (BrightonSEO 2014)
Cool Shit You Can Do With WordPress (BrightonSEO 2014)
Patrick Hathaway1.8K views
The Thick Front-End by Jeff Dickey
The Thick Front-EndThe Thick Front-End
The Thick Front-End
Jeff Dickey2.2K views
Building and future-proofing your WordPress sites with the Genesis Framework by WP Engine
Building and future-proofing your WordPress sites with the Genesis FrameworkBuilding and future-proofing your WordPress sites with the Genesis Framework
Building and future-proofing your WordPress sites with the Genesis Framework
WP Engine1.7K views
How to Decide If Page Builders is Right for You by educarreiro
How to Decide If Page Builders is Right for YouHow to Decide If Page Builders is Right for You
How to Decide If Page Builders is Right for You
educarreiro1.2K views
Webinar - Accessibility: The journey. by WP Engine
Webinar - Accessibility: The journey.Webinar - Accessibility: The journey.
Webinar - Accessibility: The journey.
WP Engine1.1K views
The Magic Carpet Ride - A business perspective on Devops by Em Campbell-Pretty
The Magic Carpet Ride - A business perspective on DevopsThe Magic Carpet Ride - A business perspective on Devops
The Magic Carpet Ride - A business perspective on Devops
Em Campbell-Pretty5.4K views
WordCamp, Cape Town 2017 by Daine Mawer
WordCamp, Cape Town 2017WordCamp, Cape Town 2017
WordCamp, Cape Town 2017
Daine Mawer603 views

Similar to Lighthouse custom audits - London Web Performance 2019

Software Testing for SEO by
Software Testing for SEOSoftware Testing for SEO
Software Testing for SEOMichael King
38.2K views74 slides
The Technical SEO Renaissance by
The Technical SEO RenaissanceThe Technical SEO Renaissance
The Technical SEO RenaissanceMichael King
529.3K views119 slides
DevOps/Flow workshop for agile india 2015 by
DevOps/Flow workshop for agile india 2015DevOps/Flow workshop for agile india 2015
DevOps/Flow workshop for agile india 2015Yuval Yeret
4.3K views85 slides
Top ten secret weapons for performance testing in an agile environment by
Top ten secret weapons for performance testing in an agile environmentTop ten secret weapons for performance testing in an agile environment
Top ten secret weapons for performance testing in an agile environmentalistairjones
1.3K views57 slides
Core Web Vitals and Your Search Rankings by
Core Web Vitals and Your Search Rankings Core Web Vitals and Your Search Rankings
Core Web Vitals and Your Search Rankings Michael King
377 views93 slides
Getting Started with Test Automation: Introduction to Cucumber with Lapis Lazuli by
Getting Started with Test Automation: Introduction to Cucumber with Lapis LazuliGetting Started with Test Automation: Introduction to Cucumber with Lapis Lazuli
Getting Started with Test Automation: Introduction to Cucumber with Lapis LazuliRebecca Eloise Hogg
1.3K views25 slides

Similar to Lighthouse custom audits - London Web Performance 2019(20)

Software Testing for SEO by Michael King
Software Testing for SEOSoftware Testing for SEO
Software Testing for SEO
Michael King38.2K views
The Technical SEO Renaissance by Michael King
The Technical SEO RenaissanceThe Technical SEO Renaissance
The Technical SEO Renaissance
Michael King529.3K views
DevOps/Flow workshop for agile india 2015 by Yuval Yeret
DevOps/Flow workshop for agile india 2015DevOps/Flow workshop for agile india 2015
DevOps/Flow workshop for agile india 2015
Yuval Yeret4.3K views
Top ten secret weapons for performance testing in an agile environment by alistairjones
Top ten secret weapons for performance testing in an agile environmentTop ten secret weapons for performance testing in an agile environment
Top ten secret weapons for performance testing in an agile environment
alistairjones1.3K views
Core Web Vitals and Your Search Rankings by Michael King
Core Web Vitals and Your Search Rankings Core Web Vitals and Your Search Rankings
Core Web Vitals and Your Search Rankings
Michael King377 views
Getting Started with Test Automation: Introduction to Cucumber with Lapis Lazuli by Rebecca Eloise Hogg
Getting Started with Test Automation: Introduction to Cucumber with Lapis LazuliGetting Started with Test Automation: Introduction to Cucumber with Lapis Lazuli
Getting Started with Test Automation: Introduction to Cucumber with Lapis Lazuli
Rebecca Eloise Hogg1.3K views
Efficient Search Campaigns SAScon May 2012 by Steve Lock
Efficient Search Campaigns SAScon May 2012Efficient Search Campaigns SAScon May 2012
Efficient Search Campaigns SAScon May 2012
Steve Lock642 views
The Technical Seo Renaissance - Mike King by Glen Dimaandal
 The Technical Seo Renaissance - Mike King   The Technical Seo Renaissance - Mike King
The Technical Seo Renaissance - Mike King
Glen Dimaandal1.4K views
From 0 to DevOps in 80 Days [Webinar Replay] by Dynatrace
From 0 to DevOps in 80 Days [Webinar Replay]From 0 to DevOps in 80 Days [Webinar Replay]
From 0 to DevOps in 80 Days [Webinar Replay]
Dynatrace958 views
2019 Top Lessons Learned Since the Phoenix Project Was Released by Gene Kim
2019 Top Lessons Learned Since the Phoenix Project Was Released2019 Top Lessons Learned Since the Phoenix Project Was Released
2019 Top Lessons Learned Since the Phoenix Project Was Released
Gene Kim3.7K views
SearchLove Boston 2016 | Mike King | Developer Thinking for SEOs by Distilled
SearchLove Boston 2016 | Mike King | Developer Thinking for SEOsSearchLove Boston 2016 | Mike King | Developer Thinking for SEOs
SearchLove Boston 2016 | Mike King | Developer Thinking for SEOs
Distilled4.9K views
QTP Automation Testing Tutorial 1 by Akash Tyagi
QTP Automation Testing Tutorial 1QTP Automation Testing Tutorial 1
QTP Automation Testing Tutorial 1
Akash Tyagi663 views
Better delivery with DevOps Driven Development by Jirayut Nimsaeng
Better delivery with DevOps Driven DevelopmentBetter delivery with DevOps Driven Development
Better delivery with DevOps Driven Development
Jirayut Nimsaeng1.6K views
Testing in a DevOps team by Laurent PY
Testing in a DevOps teamTesting in a DevOps team
Testing in a DevOps team
Laurent PY1.2K views
TuleapCon2017 -Automating Jenkins build with Tuleap trackers by Tuleap
TuleapCon2017 -Automating Jenkins build with Tuleap trackersTuleapCon2017 -Automating Jenkins build with Tuleap trackers
TuleapCon2017 -Automating Jenkins build with Tuleap trackers
Tuleap467 views
Scalable load testing using jmeter in cloud by Vijay Rayapati
Scalable load testing using jmeter in cloudScalable load testing using jmeter in cloud
Scalable load testing using jmeter in cloud
Vijay Rayapati5K views
On the importance of done by Rob Purdie
On the importance of doneOn the importance of done
On the importance of done
Rob Purdie722 views
How to Build Single Page HTML5 Apps that Scale by Phil Leggetter
How to Build Single Page HTML5 Apps that ScaleHow to Build Single Page HTML5 Apps that Scale
How to Build Single Page HTML5 Apps that Scale
Phil Leggetter1.5K views

More from Aymen Loukil

Reussir les signaux web essentiels (Web Vitals) - Search Y by
Reussir les signaux web essentiels (Web Vitals) - Search YReussir les signaux web essentiels (Web Vitals) - Search Y
Reussir les signaux web essentiels (Web Vitals) - Search YAymen Loukil
220 views28 slides
Structured Data for Covid-19 - WebZurich by
Structured Data for Covid-19 - WebZurichStructured Data for Covid-19 - WebZurich
Structured Data for Covid-19 - WebZurichAymen Loukil
543 views22 slides
Sujet et monitoring SEO 2020 - Aymen Loukil Search Y 2020 by
Sujet et monitoring SEO 2020  - Aymen Loukil Search Y 2020Sujet et monitoring SEO 2020  - Aymen Loukil Search Y 2020
Sujet et monitoring SEO 2020 - Aymen Loukil Search Y 2020Aymen Loukil
251 views42 slides
Donnees structurees pour le seo seo camp day lille 2020 by
Donnees structurees pour le seo   seo camp day lille 2020Donnees structurees pour le seo   seo camp day lille 2020
Donnees structurees pour le seo seo camp day lille 2020Aymen Loukil
411 views62 slides
Profiter de Google Discover - SEO Camp Day Lorraine 2019 by
Profiter de Google Discover  - SEO Camp Day Lorraine 2019Profiter de Google Discover  - SEO Camp Day Lorraine 2019
Profiter de Google Discover - SEO Camp Day Lorraine 2019Aymen Loukil
442 views55 slides
Performance web - Optez pour une approche qui marche by
Performance web - Optez pour une approche qui marchePerformance web - Optez pour une approche qui marche
Performance web - Optez pour une approche qui marcheAymen Loukil
2.4K views43 slides

More from Aymen Loukil(13)

Reussir les signaux web essentiels (Web Vitals) - Search Y by Aymen Loukil
Reussir les signaux web essentiels (Web Vitals) - Search YReussir les signaux web essentiels (Web Vitals) - Search Y
Reussir les signaux web essentiels (Web Vitals) - Search Y
Aymen Loukil220 views
Structured Data for Covid-19 - WebZurich by Aymen Loukil
Structured Data for Covid-19 - WebZurichStructured Data for Covid-19 - WebZurich
Structured Data for Covid-19 - WebZurich
Aymen Loukil543 views
Sujet et monitoring SEO 2020 - Aymen Loukil Search Y 2020 by Aymen Loukil
Sujet et monitoring SEO 2020  - Aymen Loukil Search Y 2020Sujet et monitoring SEO 2020  - Aymen Loukil Search Y 2020
Sujet et monitoring SEO 2020 - Aymen Loukil Search Y 2020
Aymen Loukil251 views
Donnees structurees pour le seo seo camp day lille 2020 by Aymen Loukil
Donnees structurees pour le seo   seo camp day lille 2020Donnees structurees pour le seo   seo camp day lille 2020
Donnees structurees pour le seo seo camp day lille 2020
Aymen Loukil411 views
Profiter de Google Discover - SEO Camp Day Lorraine 2019 by Aymen Loukil
Profiter de Google Discover  - SEO Camp Day Lorraine 2019Profiter de Google Discover  - SEO Camp Day Lorraine 2019
Profiter de Google Discover - SEO Camp Day Lorraine 2019
Aymen Loukil442 views
Performance web - Optez pour une approche qui marche by Aymen Loukil
Performance web - Optez pour une approche qui marchePerformance web - Optez pour une approche qui marche
Performance web - Optez pour une approche qui marche
Aymen Loukil2.4K views
Quick-wins pour accélérer son site web - seo camp day lorraine 2018 by Aymen Loukil
Quick-wins pour accélérer son site web - seo camp day lorraine 2018Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Quick-wins pour accélérer son site web - seo camp day lorraine 2018
Aymen Loukil741 views
Performance web #perfmatters - Tuniseo 2018 by Aymen Loukil
Performance web #perfmatters - Tuniseo 2018Performance web #perfmatters - Tuniseo 2018
Performance web #perfmatters - Tuniseo 2018
Aymen Loukil500 views
Améliorez la vitesse de chargement de votre site - Webisland 2018 by Aymen Loukil
Améliorez la vitesse de chargement de votre site - Webisland 2018Améliorez la vitesse de chargement de votre site - Webisland 2018
Améliorez la vitesse de chargement de votre site - Webisland 2018
Aymen Loukil533 views
Technical seo tips and tricks actionnables 2018 by Aymen Loukil
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
Aymen Loukil10.6K views
SEO pour les développeurs - eléments essentiels et bonnes pratiques by Aymen Loukil
SEO pour les développeurs - eléments essentiels et bonnes pratiquesSEO pour les développeurs - eléments essentiels et bonnes pratiques
SEO pour les développeurs - eléments essentiels et bonnes pratiques
Aymen Loukil1.6K views
Knowledge Graph et comment en tirer profit pour le SEO by Aymen Loukil
Knowledge Graph et comment en tirer profit pour le SEOKnowledge Graph et comment en tirer profit pour le SEO
Knowledge Graph et comment en tirer profit pour le SEO
Aymen Loukil3.2K views
Les éléments essentiels du seo technique - Tuniseo by Aymen Loukil
Les éléments essentiels du seo technique - TuniseoLes éléments essentiels du seo technique - Tuniseo
Les éléments essentiels du seo technique - Tuniseo
Aymen Loukil12.5K views

Recently uploaded(20)

First 30 days of Your CRO Program by VWO
First 30 days of Your CRO ProgramFirst 30 days of Your CRO Program
First 30 days of Your CRO Program
VWO47 views

Lighthouse custom audits - London Web Performance 2019