{"id":695173,"date":"2023-09-06T17:27:08","date_gmt":"2023-09-06T15:27:08","guid":{"rendered":"https:\/\/wp-rocket.me\/?p=695173"},"modified":"2023-09-06T17:27:10","modified_gmt":"2023-09-06T15:27:10","slug":"best-practice-guide-reducing-website-page-weight","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/best-practice-guide-reducing-website-page-weight\/","title":{"rendered":"Web Page Weight: What It Is and How to Reduce It"},"content":{"rendered":"

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\u2019t see what they are looking for, they will remember that they are just one click away from the competitors. <\/p>

\ud83d\udca1One golden rule to remember: reduce your web page weight to serve your content fast and keep your visitors (and Google) happy!\u00a0<\/td><\/tr><\/tbody><\/table><\/figure>

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. <\/p>

What’s Website Page Weight or Page Size?<\/h2>

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:<\/p>

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

    <\/p>

    \"What
    What makes up a page weight – Source: WP Rocket<\/a>
    <\/figcaption><\/figure>
    \ud83d\udca1<\/strong>Measuring the web page weight is the answer to \u201cHow many bytes were downloaded to load this specific page?\u201d<\/td><\/tr><\/tbody><\/table><\/figure>

    How to Check Your Web Page Size<\/h2>

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

    1. Add the URL of your site in the search bar and hit the Analyze<\/strong> button.<\/li><\/ol>
      \"Running
      Running a test using your URL to find out the webpage size – Source: GTmetrix<\/a><\/figcaption><\/figure>

      2. Simply check the results in the Page Details<\/strong> 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<\/a>.<\/p>

      \"\"
      Webpage size – Source: GTmetrix<\/a><\/figcaption><\/figure>
      \ud83d\udcc8 Want to run a full performance audit of your site? Follow our guide that helps you to improve the Lighthouse score on WordPress<\/a>.<\/td><\/tr><\/tbody><\/table><\/figure>

      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. <\/p>

      What Is The Average HTML Page Size In 2023?<\/h3>

      The average HTML page size in 2023 is around 2.5MB for desktops and 2.2 MB for mobiles, according to httparchive.org<\/a>.<\/p>

      \"Average
      Average HTML page size – Source: httparchive.org<\/a>
      <\/figcaption><\/figure>

      What Takes Up Most Space on a Website?<\/h3>

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

      \"Page
      Page weight by content type – Source: httparchive.org<\/a><\/figcaption><\/figure>

      What\u2019s the Average Image Weight on a Web Page?<\/h3>

      In August 2023, images are consuming up to 1029.3 KB on desktop and 873 KB on mobile, on average.<\/p>

      \"Images
      Images on a web page – Source: httparchive.org<\/a><\/figcaption><\/figure>

      What\u2019s the Average JS Weight on a Web Page?<\/h3>

      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\u2019s essential to optimize it if you don\u2019t want to impact your site’s performance.<\/p>

      \"JS
      JS on a web page – Source: httparchive.org<\/a>
      <\/figcaption><\/figure>

      What\u2019s the Average Font Weight on a Web Page?<\/h3>

      Fonts are often overlooked, but they take up 151 KB on desktop and 132 KB on mobile in 2023.\u00a0<\/p>

      \"Fonts
      Fonts on a web page – Source: httparchive.org<\/a>
      <\/figcaption><\/figure>

      What\u2019s the Average CSS Weight on a Web Page?<\/h3>

      On average, CSS consumes around 80 KB on both desktop and mobile in August 2023.\u00a0<\/p>

      \"CSS
      CSS on a web page – Source: httparchive.org<\/a>
      <\/figcaption><\/figure>

      What\u2019s The Ideal Web Page Weight?<\/h3>

      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. <\/p>

      Why You Should Make Your Web Page Smaller\u00a0<\/h2>

      Here are 3 reasons that will convince you to start reducing the size of your web page:<\/p>

      1. Ensure Fast Loading Speed And Provide a Seamless User Experience on Mobile <\/li>\n\n
      2. Improve Your Ranking on Search Engines (SEO)<\/li>\n\n
      3. Reduce Bandwidth Costs.<\/li><\/ol>

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

        Let’s see what it takes to make it possible.<\/p>

        <\/div>\n\t