Harry Roberts, web performance consultant, joins the panel to discuss Core Web Vitals and the evolving landscape of web performance metrics. They explore the impact of load performance on web apps and the challenges of optimizing websites for laypeople. The episode concludes with details about upcoming events and workshops for members of topendevs.com.
Single page apps can lead to slower performance and a poor user experience.
The Largest Contentful Paint (LCP) metric has limitations in measuring the most important content on a page.
Optimizing performance should not be at the expense of user experience.
Deep dives
Common Performance Issues
One common issue encountered is the use of single page apps (SPA) which does not play nicely with core web vitals. This can result in slower performance due to data loss, leading to a poor user experience. Another issue is the use of microservices and micro front-ends, which can introduce latency due to multiple API calls. Additionally, the practice of using API subdomains can lead to preflight requests and added latency. Progressive JPEGs are also highlighted as a potential performance concern, as they may not always provide meaningful content on the screen faster. Overall, common problems include designing for the largest bit of content rather than the most important, misunderstanding the impact of certain design choices on performance, and failure to prioritize the end-user experience over performance metrics.
LCP and Progressive Images
The Largest Contentful Paint (LCP) metric has limitations in measuring the most important content on a page. For example, images of airplanes on airline websites might be visually large but less important than key form fields for booking a flight. Custom metrics and element timing APIs can be used to measure the right content rather than relying solely on LCP. Progressive JPEGs are mentioned as a way to display content incrementally, but this approach may not receive recognition in performance scores. The use of progressive JPEGs requires careful configuration to avoid unattractive early low-quality rendering. Overall, LCP and progressive images present challenges in accurately assessing user-perceived content loading speed.
Prioritizing User Experience Over Metrics
It is emphasized that optimizing performance should not be at the expense of user experience. While metrics like LCP are important, they should not overshadow the actual experience of website visitors. Gaming metrics, such as artificially splitting images, might improve scores, but it can create undesirable loading experiences. The focus should be on enhancing customer satisfaction and considering the specific demands of different devices or screen sizes.
Other Performance Issues
Other common issues include insufficient awareness of the impact of third-party dependencies, reliance on outdated browser versions without security updates, and failure to educate non-technical stakeholders on performance-related trade-offs. Design choices that lead to poor contrast between text and background, as well as creating unnecessarily large image files, can also hinder website performance. Overall, understanding the impact of design decisions, educating stakeholders, and ensuring compatibility with modern browser capabilities are key to improving website performance.
Improving Performance in Scenarios with Third-Party Scripts and Heavy Client-Side Rendering
When faced with performance issues caused by third-party scripts or heavy client-side rendering, it can be challenging to advise clients on how to improve. Breaking up long tasks in JavaScript can be difficult, as functions must finish before being interrupted. One solution is to prioritize immediate user needs and delay tracking work through techniques like set timeout or request idle callback. By addressing obvious performance bottlenecks and making changes incrementally, developers can tackle even complex scenarios more effectively.
Identifying Performance Issues: Layout Thrashing and CSS-related Problems
When facing poor performance in web applications, it's important to consider factors beyond JavaScript. Layout thrashing can occur due to synchronous layout changes or excessive CSS calculations. To optimize these issues, developers should focus on identifying and addressing purple layers in the Layers Panel. This involves simplifying complex layouts, optimizing CSS selectors, reducing HTML size, and using techniques like the CSS content visibility property. By understanding the impact of recalc style and layout tasks, developers can improve performance and user experience.
Harry Roberts is a web performance consultant. They immerse themselves in the critical realm of web performance and JavaScript. The esteemed panel, including the renowned Harry Roberts, delves into the intricate details of site speed measurement and the evolving landscape of web performance metrics. The conversation sheds light on the profound impact of Core Web Vitals on businesses and the challenges they pose. Join them as they navigate the intricacies of web development, explore the nuances of user experience, and unravel the complexities of performance optimization. Sponsors