How To Measure, Optimize and Monitor Your Websites Page Speed.
0:20 The goal is measure, optimize and monitor websites for page speed.
0:33 Performance sites are profitable sites.
0:45 The Blueprint for Performance Success.
0:50 The importance of site speed.
01:20 The time it takes for a page to load is the most important factor in a users experience.
01:30 Page load speed is three times more important than what a page looks like.
01:35 Site Performance is Critical
02:00 There is a direct return on Investment
02:15 Page Speed has a direct impact on business success.
03:00 Those who know how to design and implement fast sites get more satisfaction from their users, higher conversion rates, more time spent on pages and higher revenue.
03:15 Where to start and how to prioritise when trying to improve your site speed.
03:20 The three parts to the blueprint.
- The Foundation – Performance Fundamentals
- Professional Techniques
- Robust Regression Defence i.e. hold on to your gains.
03:30 The Blueprints 15 Steps.
1. Benchmark your performance with Page Speed Insights
2. Iterate with Lighthouse via Devtools Audit Panel
3. Track your field data with the CrUX Dashboard
4. Understand key speed metrics
Curate organisation buy-in i.e. get the backing of your business managers.
5. Explore field data from within Search Console
6. Define a performance budget
7. Profile with DevTools performance panel
8. Implement Production monitoring
9. Adopt a Real User Measurement (RUM) solution
10. Conduct competitive analysis with CrUX
11. Connect RUM metrics to business goals
12. Audit and improve use of 3rd party tags
13. Devise a custom performance metric
14. Create a Lighthouse plugin
15. Implement performance measurement in Continuous Inte (CI)
Part I – Performance Fundamentals
Action 1. – Benchmark your performance with Page Speed Insights
03:45 Understand the state of your webpage by using Google’s Page Speed web app.
03:55 Lab and Field data
04:05 The Performance Score
04:30 Field data is sourced from the Chrome User Experience Report https://developers.google.com/web/tools/chrome-user-experience-report or CrUX
04:40 Lab Data is powered by Lighthouse
Action 2 – Iterate with Lighthouse via Devtools Audit Panel
05:10 Google’s Devtools Audits Panel by Lighthouse https://developers.google.com/web/tools/lighthouse
05:30 Lighthouse Stack Packs (see Prototyping Stack Packs for Lighthouse)
06:10 The WordPress Stack Pack
06:30 The new Lighthouse user interface
Action 3 – Track your field data with the CrUX Dashboard
07:35 Tracking Field Metrics over time.
08:15 The CrUX dashboard
Action 4 – Quantify your users experience
08:50 Understanding the key speed metrics
09:00 Page Load Speed “Loading is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”. WC3 Paint Timing Spec
09:15 User-Centric Performance Metrics
09:35 Layout stability. How much does the page move around when it is loading. See bit.ly/layout-stability
10:35 Largest Contentful Paint. See bit.ly/largest_contentful_paint_explainer
11:45 Taxonomy of speed tooling
Part II – Professional Performance Techniques
Action 4.75 – Curate organisation buyin
13:15 Get your organisation to buyin to the importance of site performance
13:50 Businesses don’t care about having a fast site it only cares about making money.
Action 5 – Explore field data from within Search Console
15:50 Search Console’s Speed Report
- Getting an aggregated viewo over your sites field metrics
- Drill down into specific issues
- Find example issues and resolve
17:15 Page grouping in Search Console
18:20 Relating page grouping to site content and page speed.
Action 6 – Define a performance budget
19:45 Resource Budgets
20:55 The Lighthouse performance budget “Lightwallet”
21:10 Define a budget file.
21:35 Performance budget calculator. See bit.ly/perf-budget-calculator
Action 7 – Profile with DevTools performance panel
21:45 Diagnosing what affects your page speed
21:55 The Dev Tools Performance Panel
22:15 Dev Tools Perfomrance Panel demo
Action 8 – Implement Production monitoring
25:30 Production Monitoring
25:35 Production monitoring tools built on Lighthouse.
- Calibreapp – Monitor and audit web performance and make meaningful improvements where it matters.
- Treo – Page Speed Monitoring. Know the speed of your web pages and make them better.
- Speedcurve – See how real people experience the speed of your website. Then find and fix your web performance problems.
25:55 Production monitoring cand be done with web.dev, which is also built on Lighthouse.
26:00 web.dev comes complete with documentation to enable you use the tools and improve your site performance.
26:25 PageSpeed Insights API, you can get this from Get Started with the PageSpeed Insights API
Action 9 – Adopt a Real User Measurement (RUM) solution
26:55 User Behaviour. Firebase Web Performance Monitoring.
Action 10 – Conduct competitive analysis with CrUX
28:10 Comparing your performance with others in your industry. Competitive analysis with CrUX
28:30 The CrUX Cookbook github.com/GoogleChrome/CrUX
Part III – Robust Regression Defence
Action 11 – Connect RUM metrics to business goals
29:25 Comparing RUM and your business goals.
Choose representative pages
Correlate over time
Action 12 – Audit and improve use of 3rd party tags
30:05 Requestmap Generator. See requestmap.webperf.tools
30:15 Third Party Web Today. See www.thirdpartyweb.today
30:30 Third party requests
31:00 Working as a team
Action 13 – Devise a custom performance metric
31:30 Defining Performance success
31:45 Defining custom metrics
32:25 Element timing. See bit.ly/element-timing-origin-trial
Action 14 – Create a Lighthouse plugin
33:30 Lighthouse plugins
Action 15 – Implement performance measurement in Continuous Integration (CI)
34:50 Implementing performance measurement in continuous integration.
36:00 Lighthouse CI