Stop Guessing, Start Measuring: A Primer on Debugging Web Performance

This article was generated with the assistance of AI to help our volunteer team share valuable insights efficiently. While we've reviewed the content for accuracy, please let us know if you spot any errors or have additional insights to contribute!

Missed the talk? No problem.

Jonathan delivered a clear and practical session on improving web performance, focusing especially on how African network and device constraints shape real user experience. If your site looks fast on your development machine but your users say otherwise, this is an excellent talk to catch up on.

In Stop Guessing. Start Measuring, Jonathan began by grounding performance in human psychology and everyday digital behaviour. He explained why users perceive delays so quickly, why Africa’s infrastructure makes optimisation essential, and how Core Web Vitals provide a shared language for identifying real problems. He then moved into an in-depth, practical demonstration using Chrome DevTools to diagnose and fix common issues.

The case study followed a fictional e-commerce site with very relatable problems. Jonathan showed exactly how he used DevTools to uncover slow loading, unexpected layout shifts and unresponsive interactions. He also demonstrated how a few targeted adjustments can significantly improve the experience, especially for users on lower-end mobile devices.

What the talk covered

The session explored performance fundamentals, including how the browser renders a page, how work is scheduled on the main thread and why certain coding choices can overload low-end hardware. Jonathan explained the differences between synthetic lab testing and real user monitoring, and why both are needed to understand and improve genuine user experience.

The highlight was the live debugging walkthrough. Using real traces from the Performance panel, Jonathan identified specific causes of slow-loading images, layout instability and long tasks blocking interaction. He then refactored the code in simple and practical ways that any team can apply.

Key Takeaways:

• Optimise for real African users, not for fast development machines. Many users are still on 3G or low-cost smartphones, which means performance problems are felt more sharply.

• Core Web Vitals remain the best indicators of user experience. They map directly to what users describe as slow loading, unresponsive or unstable.

• Real user monitoring should be your primary data source. Lighthouse is valuable for debugging, but field data shows what users genuinely experience.

• Small, thoughtful changes can deliver dramatic improvements. Using the picture element, choosing the correct image sizes, improving resource priority, avoiding expensive layout operations and preventing heavy tasks from blocking the main thread all had a significant impact in the case study.

• Performance requires cross-functional ownership. Design, engineering, product, and even marketing all contribute to the final outcome. Performance needs to be considered early in the process, not only when something breaks.

To see the live debugging demonstration in DevTools, and to learn exactly how Jonathan identified and fixed these issues, watch the full event on YouTube 

Join our Discord for discussion and updates, and subscribe to our monthly newsletter to stay in the loop.