Monitoring your website resource breakdown is one of the most important things you can do when you own or run a website. Some of our most recent articles detailed how to keep track of the impact that Google Fonts, Page Weight, and CSS files have on your website performance.
That’s a lot to keep track of right?
The amazing thing about a good resource breakdown section in your audit service is that all of these issues will be visible there! You’ll be able to see if your CSS files are too large or are loading slow. You’ll find any images that didn’t get compressed and are contributing to excessive page weight. Google Fonts being loaded on a page that doesn’t use them? They’ll show up on your resources page.
We at MachMetrics are extremely proud of the value that our Resources page adds, but we wanted to go a step further. We recently added 2 new graphs to the dashboard of your account that shows resources broken down by type over time, and broken down by domain.
This will allow you to quickly see what types of content have changed and whether it was first or third-party content. Let’s take a look!
Breakdown Resource Size by Type
The first of our new graphs displays the size of each of your website resource types. These include CSS, JS, HTML, fonts, images, etc. any of which can contribute to a slower website.
Let’s take a look at an example graph. We can see here that there was a change made around July 9 that introduced an increase in our page weight. In this change, our CSS file and font file size increased. In seconds, we now know where to look to find the problem.
To find the specific file(s) that are causing the problem, go to the Resources Tab in your account.
Once you’ve located the offending files or type of file, now what? That’s where our blog comes in. We have a ton of articles to help you optimize any part of your site.
Breakdown Resource Size By Domain
The graph directly adjacent to the first graph will show you the size of the resources by domain.
In this graph, you’re able to see not only any changes that take place but where all of your resources are coming from. This can be especially useful for our WordPress users. Too often they don’t realize the impact a third-party plugin may be having on their site.
Using the example above, we can see each third party domain that our site is pulling resources from. If we see any large changes to them or see that any of them are exceptionally large, we know that we may need to look into alternatives for these services.
Use the Resources Page to Find Specific Files
Just through a quick look at the above graphs, we’ve located the file types that can be improved. We’ve also found any third-party domains that are causing issues.
Now we can move over to the Resources Tab and look in more depth. Did you see that your CSS files are way too large for example? We can look specifically for issues with that file type. This can save ourselves a lot of time identifying the issue.
This tab gives the most detailed look at individual files and makes it easy to tell at a glance what can be improved. Just look for red load times and file sizes!
This tab also gives you an impressive amount of sorting options. You can sort by desktop/mobile, so if you’re optimizing for the mobile version of your site, you’re covered.
There is also an option to focus on the first view of your site or the repeat view. ‘First View’ is what the browser loads for a visitor who is visiting your site for the first time. ‘Repeat View’ shows you the resources that are loaded for any repeat customers. This view will not show any resources that are cached, because repeat visitors won’t need to load these again.
Website Resource Monitoring is Key!
We display as much information as we can about your website resource breakdown on our dashboard because it allows you to track/fix so many issues.
Too often we see website owners who are surprised by the size of third-party resources or plugins. Others found that someone working on the website (sometimes themselves!) had forgotten to compress an image before uploading it.
With these additional graphs, you’ll never be surprised by a resource again.
Let us know below if you have any questions about the graphs we’ve added. Need additional tips on what insights they give? Simply reach out to us at email@example.com. We’d also love to hear any optimizations you performed because of this new display!