Page weight checker

See how much any page makes your browser download, split by scripts, stylesheets, images, fonts and more, without opening DevTools or leaving the tab.

What it shows

Open the Page tab in the Screen Ruler side panel and the Page Weight section gives you one number for the whole page, then breaks it down by what the browser actually downloaded:

• Document: the HTML of the page itself.
• Scripts: every JavaScript file, including third party tags.
• Stylesheets: linked CSS files.
• Images: PNG, JPEG, WebP, AVIF, GIF, SVG and icons.
• Fonts: WOFF, WOFF2, TTF and OTF files.
• Fetch and XHR: data loaded by the page's own API calls.
• Media: audio and video.
• Other: anything that does not fit the groups above.

A stacked bar shows the proportions at a glance, and a list underneath gives the exact size and percentage of each group, so you can see straight away whether images, scripts or fonts are doing the damage.

How to check a page's weight

1. Open the page you want to check.
2. Start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
3. In the side panel, switch to the Page tab and scroll to Page Weight.

The figures update live while the page keeps loading, so scroll the page to pull in lazy loaded images and watch the total climb. It works on any page your browser can open, including staging sites and pages behind a login, because it measures what your own browser loaded.

How the numbers are measured

Screen Ruler reads the browser's own Resource Timing data, the same source the DevTools Network panel uses, and keeps its own running total as new requests arrive. That has a few practical benefits:

• It counts what came over the network. Sizes are transfer sizes, so compressed files count at their compressed size, which is what costs your visitors time and data.
• Cached files are not lost. When a file came from the cache and its transfer size reads zero, Screen Ruler falls back to the file's encoded size, so a warm cache does not quietly shrink the total.
• It survives pages that clear their own timing data. Some analytics scripts empty the browser's resource list. Screen Ruler keeps its own tally, so the count stays accurate.
• It follows single page apps. On sites that change route without a full reload, the totals reset on each navigation so the number reflects the view you are looking at, not everything loaded since the tab opened.

What it cannot see

Browsers hide the size of files loaded from another domain unless that server sends a Timing-Allow-Origin header. Third party scripts, fonts and images often fall into this group. Rather than counting them as zero without telling you, Screen Ruler shows how many cross-origin resources were hidden, so you know the real total is higher.

When it is useful

• Quick performance checks. Answer "is this page heavy?" in a few seconds instead of setting up a measurement.
• Finding the culprit. See whether a slow page is carrying oversized images, a pile of scripts or more font files than it needs.
• Checking a competitor or client site. Compare page weight across sites you do not control, without any account or setup.
• Before and after a release. Load the page before and after a change and compare the totals.

Page Weight is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free trial with everything unlocked.

Common questions

Why is the total different from the Network panel in DevTools?

The most common reasons are the cache and hidden cross-origin files. With the cache disabled DevTools shows a first visit, while your normal browsing reuses cached files. And files from other domains without a Timing-Allow-Origin header have no visible size, which Screen Ruler reports as a separate hidden count.

Does it include images that load when I scroll?

Yes, once they load. The breakdown updates live, so scroll through the page and the total grows as lazy loaded images and other late requests come in.

What is a good page weight?

There is no single limit, but under 1 MB is a comfortable target for a content page and anything over 3 MB is worth a closer look. What matters more is what the weight is made of: images are usually the easiest win, while JavaScript costs more than its size suggests because it has to be parsed and run.

Does it work on pages behind a login?

Yes. Screen Ruler measures what your own browser downloaded, so it works on staging sites, dashboards and any page you can open, unlike online speed tests that can only reach public URLs.