[Shipped] Optimizing Resources for Web

[zoesyc]

Hi Everyone - I’m Zoe from the product team 👋 with a third exciting Performance announcement in two weeks!

We are launching a new workflow centred on providing better visibility into resource performance - specifically JavaScript, CSS, and Fonts - across your web application in production.

Resources - assets like CSS, HTML, JavaScript, Fonts,Images, Videos - are a significant factor in understanding web performance. Poor resources (or asset) performance can come in several flavours, including:

• Uncompressed Assets
• Render-blocking Resources
• Uncached Resources
• Large Assets
• Unoptimized CDN

And often, the result of these instances can lead to poor web vital performance and, ultimately, poor user experience and retention.

Starting today, you can find Resources under Performance in the sidebar.

What’s New

• Render-blocking Resources

  Set "Blocking" filter to ‘Yes’ to quickly identify which scripts, stylesheets, and fonts are blocking core functionality on your page

• Resource Summary

  Pinpoint which pages are blocked or impacted by a given asset with stats like average transfer / encoded / decoded size, average duration, time spent, and requests per minute

What’s Next

• Images and Videos - Same workflow for more dynamic assets like images and videos
• Bundle Analysis - In a collaboration with CodeCov, we want to help you better optimize your bundles across your product lifecycle
• Web Vitals - full integration our web vitals workflow that highlights the best resource optimizations for a better LCP, FCP, and FID score
• Better Data
  • Better resource parameterization via bundler plugins
  • Display cache hit/miss ratio for each resource
  • Display aggregate resource timing info

We want to hear from you!

We're rethinking our frontend performance workflows and we'd like to know if this is working for you! We'd like to better understand:

1. Is the Resources workflow intuitive and useful for investigating the performance of your assets? More specifically, are the resources grouped / parameterized effectively for you to troubleshoot performance problems
2. At what stage in the product life cycle do you most often monitor your resources?
3. What metrics or information would you like to understand about your bundles?
4. Are you interested in tracking resource performance for mobile web instances or mobile apps? What metrics would be most useful in this case?

To be able to use Resources, you'll need to have Performance set up - here's our setup guide for instructions. You can learn more about this release in our docs.

Feel free to share your thoughts in the discussion below - or you can find us on Discord and X.

[stayallive]

I just noticed this tab became active for me, super interesting but also a little confusing. I'll try to explain.

In the screenshot I see a few entries I would expect to be combined or the same and it's not very intuitive to me (at first) why they are not or why they would not be.

For example the first 2 entries I would have expected to be combined. And there is also the grouping from the woff2 files, the last 2 entries could have been rolled up in the first.

From hovering over the links it seems like they are grouped by project, and clicking through seems to confirm that, however this is not visible in the UI and thus pretty confusing at first 😄 Maybe it's just me but I figured I'd report it anyway 👍

[zoesyc]

Update: We're actively improving resources parameterization so you can expect to see both new and old groupings of your assets in the Resources module during this development.

You can track all our current and upcoming work for Resources in this GH issue