Resources By File Type

Resources By File Type

Every time a user loads your page, they aren’t just loading HTML. They’ll pull down JavaScript, CSS, fonts and images as part of page load. These static content files can cause performance issues, particularly if there’s a lot of them. Request Metrics gives you great insight in to how many files your pages are using, and where they’re coming from. Check out the File Types section of Request Metrics for all the details.

File types are on the menu

We break down file types in to six categories: JavaScript, CSS, Fonts, Images, XHR/Fetch requests, and Other. (Other contains hings like iframes and embeds). We’ll show you how many files, of each type, are coming from each domain.


Total File Count by Origin

We break down the data in two ways. The first is the total number of files of each type being loaded by your users over time. This is interesting because it immediately will tell you if you performance issues are caused by a spike in resource loads. Or, if one kind of resource suddenly overtakes another in total count, it’s a good bet something is going on that’s worth investigation.

Request Metrics shows you an overall graph of file counts over time, so you can see if the marketing team is getting too aggressive with the tracking pixels or ad providers.

File totals over time

There is also a summary that will display the total number of files by type. This is useful to see, at a glance, which kind of resources your pages are loading most. For example, if you’re having Web Vitals issues and your pages are mainly loading images, it might be a sign that you should look at optimizing your image loading strategy.

File total summary

File Counts per Page Load

While total counts are useful, it may be beneficial to see the number of resources being loaded on a per-page basis too. The chart over time will show you if you’re loading more of a certain file type today than you were a week ago. For example, loading more and more third party scripts can slow your site down over time. Here we can see that there’s more and more JavaScript every day. Each one of these files has a performance cost!

Files per page, over time

File Types by Origin

In addition to the top-level graphs, you can see file type information for each origin your page loads resources from. You can see your origins from a “total count” perspective:

File types by origin

Or from a “per page” perspective:

Files per page by origin

Each column is fully sortable, so you can focus on specific file types and see just who’s responsible for the data. You’ll be surprised just how chatty third party tools like Google Analytics can be!