Automate performance testing with lighthouse CI

An introduction to performance testing and walkthrough of how to integrate lighthouse CI into your project

Transcript

1. Automate performance testing With Lighthouse CI
2. Hassan H Hassan Hafez F r o n t e n d E n g i n e e r @ b u l k w h i z @ H a s s a n h a f e z z
3. hy speed matt Why speed matters?
4. Money Talks Money Talks
5. Interesting Fac • A one-second delay in mobile load times can impact conversion rate by up to 20% Interesting Facts • 53% of people abandon a mobile site if takes more than 3 seconds to load. References https://bit.ly/2PM9BMd https://bit.ly/35JYngH https://www.thinkwithgoogle.com/feature/testmysite/ • To see how can speed potentially affect your revenue see Impact Calculator tool.
7. ow to measur How to measure Speed?
9. Different performance tools Chrome UX Report PageSpeed Insights WebPageTest Lighthouse
10. Lighthouse Lighthouse
11. 1- From Chrome DevTools
12. 2- From the command line Install Lighthouse module: npm install -g lighthouse Run an audit lighthouse <url>
13. 3- As a node module add the dependency:- yarn add —-dev lighthouse
14. 4- From web UI web.dev/measure.
15. Let’s try it out Let’s try it out ☕
16. It's not enough to make a one time effort you have to change your lifestyle. Performance is a lot like getting fit A study found that 40% websites get regressed in performance after 6 months of the initial optimization. References https://www.youtube.com/watch?v=YJGCZCaIZkQ
17. y regressio Why regression happens
18. w to preven How to prevent regression?
19. o much manual w Too much manual work
20. My automation w Get a Lighthouse report alongside every PR. My automation wishlist Have quick pass/fail status with each PR right away in Github. Test against my own rules/ thresholds. Be able to track performance metrics and Lighthouse scores over time. Compare between versions to find improvements and regressions.
22. ighthouse C Lighthouse CI
24. Let’s set it up Let’s set it up
25. Add LHCI into your CI script
26. Get a Lighthouse report alongside every PR.
27. LHCI Configuration
28. Test against my own rules/ thresholds.
29. GitHub Checks 1- install the app to the target repo. 2- add the token to your build environment as LHCI_GITHUB_APP_TOKEN
30. Have quick pass/fail status with each PR right away in Github.
31. My automation w Get a Lighthouse report alongside every PR. My automation wishlist Have quick pass/fail status with each PR right away in Github. Test against my own rules/ thresholds. Be able to track performance metrics and Lighthouse scores over time. Compare between versions to find improvements and regressions.
32. Lighthouse Ci Lighthouse CI server track performance over time. Compare between versions easily
33. Setting up LHCI server on Heroku 1- Create account and install Heroku CLI and login 2- Setting up your repo with LHCI node server
34. Cont setting up LHCI server on Heroku 3- Set up Heroku project and run it
35. Voila, you now have LHCI server app
36. Connect the server to your repo Add your token to CI with the environment variable LHCI_TOKEN
37. Add URL In the config
38. Demo Demo
39. Sum up Sum up Get a Lighthouse report alongside every PR and prevent regressions Have quick pass/fail status with each PR right away in Github. Test against my own rules/ thresholds. Track performance metrics and Lighthouse scores over time. Compare between versions to find improvements and regressions.
40. Questions Questions
41. Thank You Thank You