Programmatically Performant

on YouTube ↗36m

" summary

Shows a repeatable pipeline that runs Lighthouse in Docker via browserless to collect synthetic metrics (runs three tests, averages results), stores results in BigQuery, and renders trends with a CLI graph. Captures real users with web-vitals → Segment → BigQuery, computes medians and percentiles (50th, 75th, 95th), and spots anomalies (example: FCP ~1.68s in a test, median FCP 840ms on May 19, spike on May 15). Demonstrates correlation of performance with business events and how to alert and investigate regressions.

AI-written summary · about

" chapters (19)

1. 0:00Intro
2. 1:14Many talks about performance, focus on how you can improve the speed of your website
3. 1:25They jump straight to the steps it takes to make it faster
4. 2:17The different kinds data
5. 2:27Synthetic data, as the name suggests is data captured in a lab like setting
6. 3:07Time to first byte (TTFB) The time that it takes for a browser to receive the first byte of content
7. 4:23Cumulative Layout Shift (CLS) A measure of how much the layout shifts unexpectantly
8. 4:59Collecting Synthetic Data
9. 8:32To handle variance between tests we should run multiple tests
10. 10:30For this I am going to use BigQuery which is a data warehouse product from Google
11. 11:48Analysing our synthetic test data
12. 15:37These visualisations allow us to understand the performance of site day to day
13. 16:15Capturing Real User Metrics (RUM)
14. 19:24Analysing the real user metrics
15. 19:39The reason I normally look at the median first is that it isn't impacted by the outliers in the same way as the average is
16. 23:47In Summary
17. 23:59The Synthetic Data will help you keep track of any changes in performance by using a controlled environment
18. 24:14While the Real User Metrics will help you keep track of what your users are experiencing
19. 24:34and you will know when you need to take time out to fix performance problems

" related talks

• 22mUsing Lighthouse in the Real WorldLeonardo Faria · CascadiaJS 2021
• 43mAutomated Performance Testing With WebDriverChristian Bromann · Selenium Camp 2020
• 27mWays of Frontend performance auditing with LighthouseYaprak Ayazoglu · NodeConf NL 2019
• 35mImprove Your Web Application Using Progressive Web MetricsArtem Denysov · JavaScript fwdays'17
• 19mContinuous web performance monitoring using Node.jsMartin Di Doménico · NodeConf Argentina 2018
• 31mAutomated Performance Testing With WebDriverChristian Bromann · JSNation 2019
• 16mFrom beginner to expert in web performanceTracy Lee · JSConf Mexico 2020 Virtual Edition
• 14mAutomate Performance Monitoring for Micro Frontend AppsAmit Batra · React India 2024