Table of Contents

Do you want to know how to reduce page weight on your WordPress site? Knowing your page size is a good start in your speed optimization journey. The smaller your files are, the faster it will take for your browser to download and render them to your visitors. Users expect to find the information they are looking for as quickly as possible, and if they don’t see what they are looking for, they will remember that they are just one click away from the competitors. 

💡One golden rule to remember: reduce your web page weight to serve your content fast and keep your visitors (and Google) happy! 

Our guide will help you understand the basics of page weight, how to check the size, and how to make a web page smaller to boost performance. 

What’s Website Page Weight or Page Size?

Page weight – also called page size – tells you how many bytes were downloaded by the browser. It refers to the total byte size of a web page when adding up all the following assets used to generate the page:

  1. CSS – which is used to style the page
  2. JavaScript – that provides interactivity
  3. HTML – that makes up the page 
  4. Fonts – the way you use them on your website can affect its performance
  5. Image and other media files – such as audio or video 
  6. Any other third-party resource 

What makes up a page weight - Source: WP Rocket
What makes up a page weight – Source: WP Rocket
💡Measuring the web page weight is the answer to “How many bytes were downloaded to load this specific page?”

How to Check Your Web Page Size

Many different techniques can be used for measuring a web page size, but two of the most popular are GTmetrix and WebPagetest. The approach is straightforward for both performance tools, and here’s how it works with GTmetrix: 

  1. Add the URL of your site in the search bar and hit the Analyze button.
Running a test using your URL to find out the webpage size - Source: GTmetrix
Running a test using your URL to find out the webpage size – Source: GTmetrix

2. Simply check the results in the Page Details section: we got 224 KB for WP Rocket, which is a good score compared to the average worldwide, as shown in the next statistics section.

Webpage size – Source: GTmetrix
📈 Want to run a full performance audit of your site? Follow our guide that helps you to improve the Lighthouse score on WordPress.

Now that you know more about web page weight, we thought it would be interesting to share some key figures about what takes up the most space on a web page. 

What Is The Average HTML Page Size In 2023?

The average HTML page size in 2023 is around 2.5MB for desktops and 2.2 MB for mobiles, according to httparchive.org.

Average HTML page size - Source: httparchive.org
Average HTML page size – Source: httparchive.org

What Takes Up Most Space on a Website?

The most common content types making up the weight of pages are – from largest to smallest – images, JavaScript, CSS, and HTML.

Page weight by content type - Source: httparchive.org
Page weight by content type – Source: httparchive.org

What’s the Average Image Weight on a Web Page?

In August 2023, images are consuming up to 1029.3 KB on desktop and 873 KB on mobile, on average.

Images on a web page - Source: httparchive.org
Images on a web page – Source: httparchive.org

What’s the Average JS Weight on a Web Page?

JavaScript is the next largest contributor for desktop and mobile page loads and consumes, on average, 533 KB on mobile and 587 on desktop. It’s essential to optimize it if you don’t want to impact your site’s performance.

JS on a web page - Source: httparchive.org
JS on a web page – Source: httparchive.org

What’s the Average Font Weight on a Web Page?

Fonts are often overlooked, but they take up 151 KB on desktop and 132 KB on mobile in 2023. 

Fonts on a web page - Source: httparchive.org
Fonts on a web page – Source: httparchive.org

What’s the Average CSS Weight on a Web Page?

On average, CSS consumes around 80 KB on both desktop and mobile in August 2023. 

CSS on a web page - Source: httparchive.org
CSS on a web page – Source: httparchive.org

What’s The Ideal Web Page Weight?

The average weight page is around 1-1.5 MB on mobile and desktop, so anything under or within this range is ideal. However, if you need videos and lots of media, anything under 3 MB is still acceptable. Keep in mind that the heaviest your page is, the harder it will be to optimize it for performance. 

Why You Should Make Your Web Page Smaller 

Here are 3 reasons that will convince you to start reducing the size of your web page:

  1. Ensure Fast Loading Speed And Provide a Seamless User Experience on Mobile 
  2. Improve Your Ranking on Search Engines (SEO)
  3. Reduce Bandwidth Costs.

It’s mainly about making your website faster and more visible on Google while delivering an exceptional user experience to your visitors.

Let’s see what it takes to make it possible.

How to Reduce Web Page Size (Including HTML) 

To reduce the size of a web page, you can apply the 5 following performance techniques:

  1. Enable Caching
  2. Optimize the Code
  3. Resize, Compress, and Convert Images to WebP
  4. Optimize Fonts
  5. Use a CDN

Before installing any extra plugins, make sure to keep your website lean with accurate content and only useful information. Use images wisely, and don’t add anything extra that will not benefit your visitors. Now, let’s go over each tactic so you can start reducing your web page size as soon as possible! 

1. Enable Caching 

Caching is an efficient technique to reduce the size of your page because you won’t need to include the whole content on every page of your site. As a result, using caching also improves the speed because it loads the previously stored version from its cache. 

🛠️ Tools to implement caching:

  • WP Rocket is one of the best caching plugins for WordPress that applies the best performance practices right upon its activation. You don’t need to do anything. WP Rocket automatically implements caching and GZIP compression, allowing you to reduce your page size easily. 
Caching and advanced optimization features - Source: WP Rocket
Caching and advanced optimization features – Source: WP Rocket

2. Optimize the Code

As seen previously, a web page’s weight is mainly made of code, media, and third-party elements. By optimizing the delivery of HTML, CSS, and JS, you will certainly reduce the size of your page. Code optimization can be done through minification or delaying the load of non-critical code. Below is an example of what CSS’s minification looks like:

CSS minification - WP Rocket
CSS minification – WP Rocket

🛠️ Tools to optimize CSS and JavaScript:

  • WP Rocket optimizes your code: it minifies JS and CSS, defers and delays JavaScript, and removes unused CSS.

Here you can have a look at the CSS optimization features:

CSS optimization options - WP Rocket
CSS optimization options – WP Rocket

And here’s what to expcet from the powerful JavaScirpt optimization options:

JS optimization options - WP Rocket
JS optimization options – WP Rocket

  • You can optimize JS and CSS manually if you are comfortable editing the code. In that case, you can use an online tool like CleanCSS.
  • To optimize your code, you can also take advantage of other tools such as:

3. Resize, Compress, and Convert Images to WebP

Images are the elements that take up the most space in a web page, so optimizing them as much as possible is crucial. We suggest you resize your images for the web, compress them without impacting the quality, and serve them using the WebP format. 

JPEG to WebP benefits - Source: Imagify
JPEG to WebP benefits – Source: Imagify
📖 On average, Google found out that the average WebP file size was 25%-34% smaller compared to JPEG.

🛠️ Tools to optimize images: Imagify is the easiest image optimization plugin that automatically compresses your images without degrading their quality. The plugin perfectly balances performance and image quality and comes with a  bulk compression option. It also offers WebP conversion to save even more image bytes and make your web page size lighter.

Converting images to WebP to save space on a web page  - Source: Imagify
Converting images to WebP to save space on a web page  – Source: Imagify
📖 Interested in Image optimization? Imagify put together 3 easy-to-read guides that explain:

How to resize images
How to compress images 
How to convert images to WebP

4. Optimize Font Delivery

Often forgotten, web fonts can add up quickly to slow down page speed and increase the page weight. Optimizing fonts is an important step in reducing the size of a page and can also help refine typography and the overall design of your site. Font delivery optimization can be done thanks to preloading, meaning that you tell the browser to start downloading fonts immediately before the final page is rendered. 

🛠️ Tools to optimize font delivery:

  • WP Rocket has a preload fonts feature telling the browser to start downloading fonts immediately. Otherwise, they would be discovered much later. It gives you more control over how the fonts are loaded, which helps optimize performance and improve your site’s perceived page load time.  
Preload Fonts - Source: WP Rocket
Preload Fonts – Source: WP Rocket
  • Manually, you can add the Link element at the head of the document:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Belleza-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
📖 Here’s a detailed guide about font optimization and how to remove any flash of unstyled text (FOUT), that is when you briefly see the page with another web font (browser’s default style).

5. Use a CDN

While CDNs don’t directly reduce the size of a page, they contribute to serving content faster. They reduce the distance between the user and the servers thanks to caching and points of presence located around the world. 

CDN to improve website speed - Source: WP Rocket
CDN to improve website speed – Source: WP Rocket

Web page size is important for the ranking of your website because it directly affects your speed. Larger web pages load slowly, which means that Google penalizes them. To prevent those performance issues, a CDN can be one of your best allies.

🛠️ Tools to optimize content delivery:

  • RocketCDN – If you are looking for a CDN that does the heavy lifting for you, then it’s one of the best value for money on the market. It even sets up the CNAME and configures your DNS record for you. 
📖 Want to take your performance optimization journey to the next level? Apply 19 additional tips to speed up your WordPress site

How to Reduce a Website Page Weight With WordPress Plugins

Here are two plugins you can use to reduce your web page weight easily and without touching a single line of code: 

  1. WP Rocket: one of the best caching plugins for WordPress
  2. Imagify: a super easy-to-use image optimization plugin

In this section, we are showing a real case scenario using WP Rocket and Imagify, and we will compare the page weight of a web page before and after using them. Here’s what my page looks like:

My page with advanced contact form - Source: lepointgourmand.com
My page with advanced contact form – Source: lepointgourmand.com

Scenario 1 – My web page size without any performance plugins 

Total page size without WP Rocket and Imagify - Source: GTmetrix
Total page size without WP Rocket and Imagify – Source: GTmetrix
  • Total Page Size: 1.30 MB
  • Space taken by CSS: 59 KB
  • Space taken by JS: 728 KB
  • Space taken by fonts: 234 KB 
  • Space taken by images: 86 KB

Scenario 2 – My web page size with WP Rocket and Imagify

Reduced page size with WP Rocket and Imagify - Source: GTmetrix
Reduced page size with WP Rocket and Imagify – Source: GTmetrix
  • Total Page Size: 158 KB
  • Space taken by CSS: 50 KB
  • Space taken by JS: 44 KB
  • Space taken by fonts: 47 KB 
  • Space taken by images: 26 KB

Here’s a visual comparison table that highlights the differences that two plugins make in terms of page weight:

Unoptimized web page sizeWeb page size with WP Rocket + Imagify
Total Page Size1.30 MB158 KB
Space taken by CSS59 KB50 KB
Space taken by JS728 KB44 KB
Space taken by fonts234 KB47 KB
Space taken by images86 KB26 KB

Key Takeaways

  • WP Rocket and Imagify significantly reduced my web page size. It went from 1.30 MB to 158 KB.
  • JavaScript was optimized thanks to minification and enabling the “load JS deferred” feature.
  • Fonts take up only 47 KB against 234 KB before installing WP Rocket.

Key Features We Used 

The optimization is really easy to do with WP Rocket and Imagify. All you need to do is check a few options directly from the WordPress admin. With WP Rocket, 80% of the performance best practices are even applied right upon its activation!

Reducing web page size with WP Rocket and Imagify - Source: WP Rocket
Reducing web page size with WP Rocket and Imagify – Source: WP Rocket

All options are intuitive and can be accessed from different tabs. Most of the features help reduce the web page weight and boost performance. WP Rocket is also helpful to fix the vast majority of the PageSpeed Insights performance audits and pass the Core Web Vitals assessment as it applies caching, optimizes the code, reduces the number of requests, and much more. 

Wrapping Up

To reduce the size of your web page, you can use WordPress plugins like Imagify and WP Rocket. WP Rocket will help you implement caching, optimize your CSS and JS, and improve your Core Web Vitals. Imagify is your best bet to optimize your images and convert them to WebP while preserving the quality. With the right tools, reducing the web page weight is a real breeze! 

The good news is that you can try Imagify for free, and WP Rocket can be refunded within 14 days if you feel it’s not for you. Don’t waste more time: improve your performance by decreasing your web page weight today!


Comments (11)

Wow such great and effective guide
Thank you so much for sharing this..

Great article, thanks for mentioning new factor that matters page speed lod.Now onwards I will focus on Page weight. Lower the page loaf Higher the page speed.❤️

Nice article. Website speed does matter in SEO. A fast loading page tends to engage more audience than a slow loading one. For this purpose, one could use amp on the web pages so that page could load faster. Secondly, store images on image submission sites.

Well written article and informative.;
I suggest to check the speed of your hosting provider if you have a very slow hosting then no matter what you do onpage optimization it will not improve your speed.

Thank you Raelene Morey for these great tips. We managed to reduce the page size of our home page from 6.3mb to 1.33mb by applying your recommendations!

thanks for the article, it helped me to increse page speed

Hi Raelene Morey
Thanks for telling about in deep.
I will apply all these methods to increase page speed of my blog.
Thanks ?

Great content ,is very helpful
Thank you

Cool and helpful page. I really thank you about this content.

One of the best articles I read so far. The amount of knowledge and simple guidance I found here is on top. Well done team

Good one, I got a lot of info and used it for my website

Related Articles of Page speed and caching
Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

Get a Faster Website
in a Few Clicks

Setup Takes 3 Minutes Flat
Get WP Rocket Now