A Complete Guide to Checking Your Page Size for SEO

The internet speeds available today are out of this world. According to Statista, the average fixed broadband download speed is 105.15 Mbps, and the average mobile download speed is 55.95 Mbps.

Nonetheless, code bloat, glitches, and other issues can result in page sizes that become a major SEO pain point.

You wouldn’t believe the page sizes I’ve seen in SEO audits, with the largest being 100 MB (I’m not joking).

There are several steps you can take to reduce your page size, but first, you must determine your page size.

We should also look at Core Web Vitals and how the page compares to Google’s metrics.

This guide will teach you how to understand and check your page size, as well as how to optimize it.

Page Size General Rules of Thumb

Depending on your niche, you should aim to keep your HTML DOM page size to around 100 kb or less.

Pages in some niches may be larger; for example, in eCommerce, pages of 150kb-200kb are not uncommon, depending on how many product images are on the page.

You don’t want to grow too large because you’ll start negatively impacting the user experience and may miss out on opportunities to boost your ranking with good Core Web Vitals scores.

However, reducing page size without considering user experience may result in your page being less useful than your competitors’. Balance is essential.

If you’re looking for a tool to check HTML page size, the following one from SEO Site Checkup is a good place to start.

Issues Affecting Your Page Size

CSS and JS

When including default CSS and JS, make sure you’re also optimizing this code for page load. This includes ensuring that all of these files are properly minified and that there is no excessive code bloat.

There are numerous approaches to accomplishing the same goal. You should avoid those who cause problems by over-coding on the CSS and JS sides.

CSS and JS files, in addition to an optimized coding mindset, require the minification process. Extra spaces and other unnecessary code artifacts are removed during the minification process.

It’s important to note that minification will only change the coding artifacts, not the actual coding. To achieve the ultimate CSS and JS code optimization on the server-side, you’ll still need your mind and development skills.

DOM (Document Object Model)

A large DOM tree size is a significant cause of page speed issues and can significantly slow it down.

This has an impact on network efficiency, load performance, memory performance, and runtime performance, which can all have a significant impact on your overall page load and Core Web Vitals user experience.

Your development process should include some resource allocation for optimizing the size of your DOM tree.

Images

Large images can harm the size of your page, especially if they interfere with user satisfaction.

You’ve already lost a user if they have to wait 5 minutes for a 15 MB image to load.

This is why, when working on image compression, it’s critical to consider physical pixel size as well as image dimensions.

Page Size Checking Tools

There are several tools available for determining the size of your page. I like the following two:

Insights into Page Speed from Google.
SEO Spider by Screaming Frog.

Page Speed Insights from Google

Page Speed Insights from Google is an important tool for identifying page size issues that may be slowing downloading.

Furthermore, it will assist you in checking off the items on the checklist for Google’s Core Web Vitals for page size.

SEO Spider Screaming Frog

You can also check your page size by crawling your site with Screaming Frog SEO Spider.

Following the completion of your crawl, perform the following steps to determine the size of your page:

Select an option from the dropdown menu in the upper left-hand corner.
Choose HTML. This will only show HTML pages crawled from your site.

Then, as shown below, scroll to the right until you see the page size numbers.

This is how you can use Screaming Frog SEO Spider to check the size of your page.

Why is it critical to double-check your page size?

Page size is an important consideration in SEO because it has a significant impact on overall page speed, affecting both search rankings and performance.

Page Load Speeds

According to Google Search Central, page load times are as follows:

“Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there.
But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs.
Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.”

Nearly 70% of consumers say page speed influences their willingness to buy from an online retailer, and half say they’d be willing to forego animation and video in exchange for faster load times.

According to Google, as page load time increases from one second to ten seconds, the likelihood of a mobile site visitor abandoning the site increases by 123 percent.

As you can see, speeding up your page is important not only for user experience but also for search engine rankings.

It Has the Potential to Reduce Web Hosting Costs

Smaller page file sizes may result in lower hosting costs depending on your internet hosting provider and their hosting plans.

Smaller page sizes require less bandwidth (file transfer), which can result in lower hosting costs – especially for large sites.

Best Practices for Page Size Optimization

Keep the following best practices in mind for the best possible page size optimization on your website:

Improve Those Images

To create the best, most optimized images, make sure to check the following items off your list:

Pixel size in physical terms.
Image size in total.
Keeping image quality.

The physical pixel size of an image refers to its pixel density. It makes no difference if your image is reduced from 1600 x 1600 to 500 x 500 if the pixel density remains constant.

If you started with a 1 MB file size, you’ll still get images with that size.

To ensure proper optimization that takes into account both of those factors, use lossless image compression with tools such as Adobe Photoshop or paid versions of tools such as Smush Pro.

When it comes to image compression, Adobe Photoshop is currently the gold standard.

This allows you to target all three factors while still having your images come out crystal clear at the end of the compression process.

You should also think about faster image formats that outperform their predecessors, such as WebP over png.

You can optimize images using a variety of services, including ShortPixel.com and TinyPNG.com.

If you’re using WordPress, several plugins will come in handy for this task. The first is the Shortpixel Image Optimiser plugin, and the second is the Tiny Compress Images plugin.

Custom Fonts Should Not Be Used Unnecessarily

We’ve all been in that situation. We’ve all experienced “I-Want-That-Font-itis”!

There’s a good chance there’s an alternative web-safe font that matches what you’re looking for.

If not, keep in mind that any additional fonts you add from a third-party resource will take longer to download. That’s just the way the beast is.

Using web-safe fonts such as Arial, Verdana, or Helvetica are all excellent choices, and you eliminate the possibility of problems arising with the custom font that you selected.

It’s also more cross-platform and cross-browser friendly, which means your site will look good on as many browsers and devices as possible.

Reduce the size of your HTML and CSS

When it comes to reducing page size, the process of minifying your HTML and CSS files can pay significant dividends.

When you minify your HTML and CSS, you remove unwanted and unnecessary spacing in the code, resulting in smaller file size for the page.

It makes sense to minify all of your pages, especially if you know they are all bloated with unnecessary code.

You can minify your HTML and CSS files using a variety of tools, including:

Toptal.com’s JavaScript
Minifier plugin WP Super Minify
Autoptimize WordPress plugin

If you’re looking for one-click optimization for your WordPress minification tasks, Cloudflare also provides this feature if you switch to their CDN (Content Delivery Network) service.

Minifier.org’s tool is also quite useful for this purpose.

Prevent Plug-in Bloat

Adding plugins is not as simple as it appears. If you add 5, 10, or 15 plugins at a time, you may want to reconsider your strategy.

The act of adding plugins to a WordPress site will harm your page size, as well as any users who may visit the page (they may experience significant drops in site performance as a result).

Keep in mind that you should only use plugins that are necessary for your page’s functionality.

You don’t want to end up in a situation where adding a large number of plugins causes your page to become clogged with page speed issues.