Infoshare DEV 2024 - Web Performance Testing

https://dev.infoshare.pl/poprzednie-edycje/2024/prelegenci/

Ensuring that our digital projects deliver a delightful web performance experience is vital to engaging our visitors and improving our business results.Testing key web performance indicators during implementation and before shipping code to production is critical to avoid giving our potential customers a poor user experience and having to fix the code once it goes live (spending more time and resources doing twice the work).This is where web performance testing comes in! Learn how to integrate web performance testing into your development pipeline and improve your user and developer experience!

Transcript

1. WEB PERFORMANCE TESTING A Seamless Integration into Web Development Pipeline Gdynia, 2024
2. Witam! Jestem Estela Franco 👋 Web Performance Specialist at Schneider Electric
3. But first…
4. “Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions. MDN Web Docs load interactive smooth
8. DISCLAIMER
9. !=
12. The scenario
13. . . . . . . — ✔
14. Definition
15. Definition Development
16. Testing Definition Development
17. Testing Deployment Definition Development
18. Testing WebPerf Check? Deployment Definition Development
19. Devs? QA? SEO? Product? Users? No one?? 😢
20. Once upon a time…
22. But the following day…
31. New hero image
32. New hero image ~100kB
33. New hero image ~100kB → 7.2MB
34. ~100kB ~90kB → 7.2MB New hero image
35. Testing WebPerf Check? Deployment Definition Development
36. Testing WebPerf Check? Deployment Definition Development
37. Testing WebPerf Check? Deployment Definition Development Backlog
38. Testing WebPerf Check? Deployment Definition Development Backlog ⏳
39. Testing WebPerf Check? Deployment Definition Development Backlog 💰 ⏳
40. Testing WebPerf Check? Deployment Definition Development Backlog 💰 ⏳ ☹
41. Testing WebPerf Check? Deployment Definition Development Backlog 💰 ⏳ ☹ ☹
42. The solution
43. Testing WebPerf Check? Deployment Definition Development
44. Testing WebPerf Check? Deployment Definition Development [...testing, "webPerf"] Testing
45. Testing WebPerf Check? Deployment Definition Development [...testing, "webPerf"] Testing WebPerf Check?
46. “Don't worry, Estela! We run manual Lighthouse tests during the development process in our local machines.
47. It worked on my machine ¯\_(ツ)_/¯
48. CONTINUOUS INTEGRATION (CI)
49. But first…
51. LIGHTHOUSE CI
52. https://github.com/apps/lighthouse-ci
60. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/
61. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/
62. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/
63. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/
64. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/
65. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/
67. Lighthouserc.json https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md
68. Lighthouserc.json
69. Lighthouserc.json
70. Lighthouserc.json
71. Lighthouserc.json
72. See it in action!
86. Perf Budgets Matter https://bit.ly/perfbudgets
87. Lighthouserc.json
88. Lighthouserc.json
89. Lighthouserc.json
90. Heads up!
91. Degradation is coming
93. LIGHTHOUSE CI SERVER
94. googlechrome.github.io/lighthouse/viewer/ googlechrome.github.io/lighthouse-ci/difftool/
95. Requirements: • Node v16 LTS • Database Storage (sqlite, mysql, or postgresql) https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md
96. Requirements: • Node v16 LTS • Database Storage (sqlite, mysql, or postgresql) https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md https://hub.docker.com/r/patrickhulce/lhci-server
99. Lighthouserc.json
100. Lighthouserc.json
114. Demo time! 🎉
115. “But Estela, [we don’t use Github / our project is too complex / other]. How can we apply Web Performance Testing?
116. It depends…
119. Lighthouse-cli And many others…
120. ❏ Web Performance Testing helps prevent degradation in your deployments to Prod. Key Takeaways
121. ❏ Web Performance Testing helps prevent degradation in your deployments to Prod. ❏ Web Performance Testing reduces the time spent troubleshooting unnoticed web performance issues (and improves DX). Key Takeaways
122. ❏ Web Performance Testing helps prevent degradation in your deployments to Prod. ❏ Web Performance Testing reduces the time spent troubleshooting unnoticed web performance issues (and improves DX). ❏ Web Performance Testing can be integrated into the web development process with LHCI. Key Takeaways
123. Key Takeaways ❏ Web Performance Testing helps prevent degradation in your deployments to Prod. ❏ Web Performance Testing reduces the time spent troubleshooting unnoticed web performance issues (and improves DX). ❏ Web Performance Testing can be integrated into the web development process with LHCI. ❏ LHCI Server is a great tool to help you visualize trends and identify potential problems when degradation is observed.
124. Key Takeaways ❏ Web Performance Testing helps prevent degradation in your deployments to Prod. ❏ Web Performance Testing reduces the time spent troubleshooting unnoticed web performance issues (and improves DX). ❏ Web Performance Testing can be integrated into the web development process with LHCI. ❏ LHCI Server is a great tool to help you visualize trends and identify potential problems when degradation is observed. ❏ You can apply web performance testing in other ways besides CI in GitHub Actions.
125. Dziękuję! estelafranco.com toot.cafe/@guaca guaca guaca (I’m trying to quit!)