CI #8 - Automated Lighthouse Benchmarks

Lighthouse has increasingly become a popular tool for many web developers to have the best site possible. But I've noticed that many don't realize you can automate Lighthouse benchmarks by adding them to your Continuous Integration workflow, and setting custom restrictions for performance regressions. That's what we'll cover in this video. ~~~~~~ RESOURCES: Playlist: https://www.youtube.com/playlist?list=PLmZPx_9ZF_sDlhca-LU3_-8BViHYpWVy_ Repository: https://github.com/swashbucklingwithcode/ci-lighthouse-cli web.dev lighthouse site: https://web.dev/measure/ Lighthouse CI getting started documentation: https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md ~~~~~~ 00:00 - Quick intro to Lighthouse 03:22 - Adding Lighthouse CI to our project 06:31 - Looking at the output 07:52 - Adding recommended settings 10:18 - Switching to no-pwa and adding Github action 11:49 - ESlint error fixes 14:18 - Improvements from Lighthouse suggestions 18:09 - Ignoring Lighthouse errors with the config file 20:38 - Passing Lighthouse CI output and pushing up 22:43 - Further configuration possibilities 25:08 - Wrap-up ~~~~~~ Follow Jimmy Cleveland's doings: twitter: https://twitter.com/JimmyDCleveland blog: https://blog.jimmydc.com/ #ci #javascript