Skip to content

State of Web Performance: A look into the Interaction To Next Paint, Aurora, and the importance of learning web performance

In this article, we will cover the main topics discussed during this State of Web Performance event. We will recap the panelists' thoughts and address some of the questions raised during the event.

Here is the complete list of hosts and panelists that participated.

Hosts:

  • Rob Ocel, Team Lead & Software Architect, This Dot Labs, @robocell
  • Henri Helvetica, Dev. Community Manager, WebPageTest by Catchpoint, @HenriHelvetica

Panelists:

  • Katie Hempenius, Developer Programs Engineer, Web Performance at Google @KatieHempenius
  • Alex Russell, Product Manager on Microsoft Edge, @slightlylate
  • Sia Karamalegos, Web Performance at Shopify, @thegreengreek
  • Mel Ada, Web Performance at Etsy, @mel_melificent
  • Annie Sullivan, Team lead for Core Web Vitals metrics / Google Chrome, @anniesullie

🔗Table of Contents

🔗Updates to Web Performance

🔗Google Chrome

Annie Sullivan started by sharing updates on web performance for the Google Chrome browser. The team at Google is working on the new Interaction To Next Paint (INP) metric, to help single-page apps detect transitions for better metric measurements and how they help with app performance.

🔗New API’s to help with image CDN’s

Katie Hempenius then shared an experimental API that is coming to Angular to help with image CDNs and correct image sizes.

🔗Aurora

Katie continued to share the work her team is doing with Aurora. Aurora is a collaboration between Google Chrome Team and framework authors to help build optimization into frameworks by default. This currently works with Next.js, Nuxt, and Angular to add performance features shipped by default.

🔗Shopify

Sia Karamalegos shared that the team at Shopify is ensuring that educational resources are available for the community so developers can learn about best practices and web performance.

🔗The panelists view on understanding performance

Alex Russell explained that handling performance is mostly cultural as it is not an education you can get or learn from a course. It is mostly about learning from the people you work with and hoping that will add the knowledge and values for your skillset.

Annie Sullivan talked about her experience with working on the frontend of Google search. When it comes to performance, there are many best practices which all work but the approach should be to look at the bottle-necks of your project to identify the requirements of the framework or architect that may affect the performance of the app.

🔗Questions from the chat

🔗How much should performance initiatives rely on platforms & frameworks vs. the education of engineers on best practices and performance analysis?

Sia Karamalegos pointed out that people don’t prioritize performance. But when you start measuring performance and have it influence other parts of the business then you start getting more motivation to fix those things. These are the incentives that make an impact and most times developers are focused on pushing out features to save time. This leads to developers ignoring the need to consider performance or training to learn how to measure performance unless it is specified on the ticket they are working on.

Katie added that part of the updates coming to Google Chrome is to provide prescriptive details to point people in the right direction towards optimizations that will help specifically for the use-case of your business.

🔗Do Frameworks and abstractions influence performance?

Alex Russell discussed that based on traffic, type of clients, bandwidth, and interactions on the application will influence trade-offs for frameworks or systems as you start to build or rebuild your application. Developers should always consider how much complexity is necessary for a project, and they should be aware that everything that comes with a framework is now owned by them. Katie Hempenius added that this type of complexity is hard to fix and this is where the need to have someone on the team who understands how the app fits together and how to make it better in terms of performance.

🔗As we push for new developers to learn performance, is it going to be confusing for the community to also understand Real User Monitoring (RUM)]?

Katie Hempenius explained that once you have it in place, it can be clarified, rather than going in circles trying to predict how an element will perform in the field if you have the RUM data it can tell you the answer.

It is recommended that people should use webvital.js with debugging data to get information about what element is the Largest Contentful Paint (LCP) element to allow them to run their own experiments.

🔗Should browsers be more aggressive in dealing with third parties?

Katie Hempenius pointed out that if it is well executed, it could move the industry in a good direction.

Annie Sullivan referred to the work she is doing with her team for SPA transition to help understand third parties better, and the potential to measure it better.

Alex Russell mentioned that what you want is to build solidarity between folks who are making decisions and the people implementing it, and he made an example with the browser’s lock icon and how it creates solidarity and causes decision-makers to prioritize a particular behavior about their technology choices.

There is a role for browsers to play to help surface whether or not most users are going to have a good time or bad time on this site and to use that as a way to signpost to everyone in the industry whether or not choices that were made in this particular location were appropriate.

Sia Karamalegos mentioned that browsers can do more and it doesn’t take off the responsibility of an organization or a team to keep an eye on that. This is common when an organization has not done web performance, and uses 20 to 30 different third parties, ignoring the need to either optimize or remove. Even though browsers can do so much, the organization still needs to review those.

🔗Conclusion

I hope you enjoyed that recap of the State of Web Performance event.

Are you excited about learning web performance and improving your apps? Tell us what excites you on Twitter!


This Dot Media is focused on creating an inclusive and educational web for all. We keep you up to date with advancements in the modern web through events, podcasts, and free content. To learn, visit thisdot.co.

You might also like

General

Semantic HTML: Why it matters and top tips on how to apply it

General

Getting Started with Git

General

Intro to Google DevTools: Console Panel

General

Intro to Google DevTools: Network Panel