We Love Speed 2024 - Web Performance Testing

https://www.welovespeed.com/en/2024/speakers/#estela_franco
https://www.youtube.com/watch?v=jaAvBpXJY9k

Ensuring that our projects deliver a delightful web performance experience is key to engaging our visitors and improving our business metrics.

Testing key web performance metrics during development and before shipping code to production is critical to avoid giving our users a bad experience and having to fix the issues once live (spending more time and resources doing twice the work).

And this is where web performance testing comes in! Learn how to implement 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 Pipelines Nantes, 2024
2. HELLO! I am Estela Franco Web Performance Specialist at Schneider Electric
3. DISCLAIMER 3 !=
4. The problem 4
5. Testing WebPerf Check? Deployment Definition Development The problem 5
6. WebPerf Check? Devs? QA? SEO? Product? Users? No one?? 😢 6
7. Once upon a time… 7
8. 8 But the following day…
9. 9 New hero image ~100kB ~90kB → 7.2MB
10. Backlog 💰 ⏳ ☹ ☹ The problem Testing WebPerf Check? Deployment Definition Development 10
11. The solution [...testing, "webPerf"] Testing WebPerf Check? Deployment Definition Development Testing WebPerf Check? 11
12. “ 12 Don't worry, Estela! We run manual Lighthouse tests during the development process in our local machines.
13. - Manual work: how many runs per URL? How many URLs tested? - Local environment != standard environment 13 - Helps to identify some of the web performance issues before the code is shipped. - Improves the web performance culture. Pros Cons It worked on my machine ¯\_(ツ)_/¯
14. 14 How to do this? CONTINUOUS INTEGRATION (CI)
15. What is Git? Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. But first… 15
16. But first… What is GitHub? GitHub is a Git repository hosting service. It offers the distributed version control and source code management functionality of Git, plus its own features such as bug tracking, feature requests, task management, continuous integration, and wikis for every project. continuous integration 16
17. But first… What is GitHub Actions? GitHub Actions is a tool built into GitHub that helps automate tasks in software projects. It allows you to set up workflows that can automatically run when certain events happen, like when new code is added to a project. 17
18. LIGHTHOUSE CI Lighthouse CI is a suite of tools that make continuously running, saving, retrieving, and asserting against Lighthouse results as easy as possible. 18
19. https://github.com/apps/lighthouse-ci 19
23. lhci.yaml https://github.com/GoogleChrome/lighthouse-ci/ 23
25. Lighthouserc.json https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md 25
26. Lighthouserc.json 26
27. 27 See it in action!
33. Perf Budgets Matter 33
34. 34 Heads up!
35. 35 Degradation is coming
37. LIGHTHOUSE CI SERVER Saves historical Lighthouse data, displays trends in a dashboard, and offers an in-depth build comparison UI to uncover differences between builds. 37
38. Requirements: ➔ Node v16 LTS ➔ Database Storage (sqlite, mysql, or postgresql) 38 https:/ /hub.docker.com/r/patrickhulce/lhci-server https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md
46. Demo time!
47. “ 47 But Estela, [we don’t use Github / our project is too complex and uses several repositories]. How can we apply Web Performance Testing?
48. 48 It depends… Lighthouse-cli And many others…
49. 49 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.
50. Thank you! estelafranco.com toot.cafe/@guaca guaca guaca (I’m trying to quit!)