When we gave a complete overview of the state of the web in 2020 we challenged our readers to compare their own website metrics to the multiple metric averages. How did you end up doing on your page weight (the download size of your entire webpage)? Check out that challenge again below, and read on to learn why our page weight test is maybe the most important first step you can take towards improving your website’s performance.
In the above infographic, you’ll see that the average website size (or page weight) was nearing 2 MB for desktop sites, and 1.8 MB for mobile.
Anything below 1.5MB is a good start. Optimally, you should be shooting for 0.5 MB.
That is a huge gap! Even worse, the current trend is getting larger, not smaller. Since we published that article at the start of 2020, the median website has grown ~4% larger according to HTTP Archive. The web as a whole is cheating on its diet and letting itself go.
This is the inspiration behind this article, which will go into detail on how you can check your website’s page weight with MachMetric’s Page Speed Audit service. You’ll also learn how to lower the overall weight of your page, and improve your page speed!
Why Should I Be Worried About Page Weight?
The size/weight of your page is the total size of all the files required to make your website. This includes HTML, CSS, scripts, images, videos, among other things. Whenever someone navigates to your site, they are requesting all of these files and loading them onto their device.
Excess page weight taxes the devices that are trying to access your site. If your page is too large, it will take a great deal of time to load all of the resources, and many visitors will ultimately get frustrated and leave your site. Even if they decide to stick it out, you can negatively affect the end-user in other ways. For example, you’re likely draining their device’s battery and using up their data plan.
This is especially true for users who are using a slow internet connection or accessing your page on an older/mobile device.
How Do I Check My Page Weight?
Nearly every page speed audit service will tell you the total size of your page when you run a test on their site. Each will display this information a little differently. After you run a test on our site, for example, you’ll see your page size (and the number of resources) displayed on the right-hand side of your dashboard.
The reason we include resources and size in the same chart is that they’re often heavily correlated. You’ll learn in the next section how to determine which resources are adding the most bloat to your site, and what to do about it.
One of the areas we are most proud of on the MachMetrics platform is our Resources Tab. After running a test on your site, you’ll be able to see all of the individual files that make up your site. More importantly, you’ll be able to see how much bloat they add, and how long it takes to load them.
Anything in red is a good place to start trying to make improvements. This gives you an enormous head start when it comes to finding problem areas.
How Do I Improve My Page Weight?
Now that you’ve done a complete page weight test of your site, you can start taking steps to lower it. Our Resources Tab will alert you to any issues you have on your current site, but what are some general steps everyone should be taking to keep their site lean and mean?
- Be picky with 3rd-parties. If you’re adding advertisements, trackers, or plugins to your site, make sure you check how they impact your site. Too many times, users are surprised how much bloat is being added to their site this way.
- Optimize your images. This is the single easiest way to make sure you have a lightweight site. Reduce the dimensions of your pictures, and run them through a service like TinyPNG to compress and optimize them further.
- Limit the use of large videos on your site. If you can, avoid using video backgrounds. If you must, defer their loading so that they’re not slowing the loading of other resources.
- Lazy Load your images and replace YouTube iframes with preview images. If your images aren’t in view when the page loads, make sure you are lazy loading them. This delays loading those images until the browser detects that the viewer is scrolling down. If they don’t, the full image isn’t loaded, reducing load time and bloat. Online Media Masters has a great list of resources on accomplishing this step.
- Compress and cache your website. While caching doesn’t lower the size of your site, it greatly reduces the amount that visitors have to load again when they return to your site. If you’re using WordPress, we recommend WPRocket frequently to our customers.
- Track your site’s page weight over time and setup alerts on increases. You can do this with ease using MachMetrics.
Conclusion
You’ll find that keeping these tips in mind ensures that you never have a situation where your website’s size gets out of control. However, if you are reading this article because you’ve realized that visitors are leaving your site because it’s huge and takes too long to load, fret not! We’re here to guide you every step of the way.
Run a page weight test on your site today and let us know below how you faired! Did you come in below the average of 2 MB? Ok that’s easy. However, if you were able to come in near the optimal mark of 0.5 MB, you truly have bragging rights.
If you aren’t there yet, that’s ok. Work through the steps in the section above and see how much weight your website can lose!
I think we should move to lazy load functionality for all the weighty resources (videos, infographics, embeds, and all) just like lazy loading of images.