What makes up page weight

How it works

Every file a page needs has to travel down the line first. On a mobile connection with patchy reception, this is the biggest difference between a fast page and a sluggish one, and it eats into your visitors' data allowance.

bytereport counts the bytes transferred, that is after compression: the HTML of the start page, every file it names and the fonts from the stylesheets. Whatever a script loads later is not included. Up to about 1600 KB is good, over 4 MB counts as poor. The details list every file with its size, the largest first.

Two related values belong with it:

• Number of requests. Every file and every embedded iframe is a request of its own. Up to 50 is good, over 100 counts as poor.
• Size of the HTML. This counts the elements from which the browser builds its page tree (the DOM). The more there are, the longer layout and every change by scripts take. Up to about 800 is good, over 1400 counts as poor.

What matters

• The biggest item first. It is usually the images, then the JavaScript. A single file can tip the balance.
• Only the font weights you use. Each weight is a file of its own, see web fonts.
• Fewer files. Bundle CSS and JavaScript into a few files, load images below the first screen lazily and remove embeds nobody needs.
• Lean HTML. Page builders often nest lots of wrapper elements. Long lists can be split into pages, large menus loaded only when needed.

How to set it up

What a page loads is decided by the theme, plugins and content. Go through the list in the details and ask of every large file whether the page needs it. Plugins that add scripts and stylesheets to every page can be switched off in the CMS or limited to the pages that use them. Deeper changes to the theme and HTML are a job for your agency or whoever built the site.