Your home page should be light enough that nobody on a small Canadian data plan thinks twice about opening it. Weigh it, then resize oversized photographs, save them as JPEGs and stop phones downloading what they never show.

The cost nobody sees

Mobile data in Canada is expensive by international standards. Many people are on plans with a modest monthly allowance, and they get a text from their carrier as they approach it.

A home page that sends six megabytes to every visitor spends part of that allowance before anyone has read a word. The business never sees the cost. The visitor does, on the bill.

Most owners have never weighed their own home page. They see it on office Wi-Fi or a fast home connection, where a heavy page and a light one feel much the same.

On a phone, on a bus, at the edge of coverage, the difference is obvious.

What makes a page heavy

The last is the one that surprises people. A design can hide a large image on small screens while the phone still downloads it, so the visitor pays for a picture they never see.

Weighing the page

Weight is measured in megabytes, and finding it takes a minute.

Chrome will show it on a computer. Open its developer tools, pick the Network panel, tick Disable cache and reload the page. The line along the bottom shows how many requests the page made and how much was transferred.

WebPageTest, a free testing site, gives the same total from a test phone on a slower connection, and lists every file the phone fetched, including any the layout never showed.

Write the number down for the home page and the two or three pages people land on most. That is the baseline.

What a sensible weight looks like

There is no official limit, but there is a useful test: would you open this page on your own phone, on your own plan, without thinking about it.

Most small business pages can come in at a megabyte or two, often less, with good photographs on them. Several megabytes usually means one or two large files are doing most of the damage.

So the fix is rarely a rebuild. It is usually the three heaviest files.

Photographs sized for the space

A photograph shown across a phone screen does not need to be 4,000 pixels wide. Resized to a sensible width and saved at sensible quality, it shrinks to a small fraction of the file and looks just as sharp.

WordPress has offered phones smaller versions of each image automatically since version 4.4, but mainly for images placed in the page content.

Headers and background images set in the theme often bypass it and send the full file to everyone. Check those separately, since that is where the largest files tend to hide.

The wrong file format

Photographs belong in JPEG files. PNG, the other common format, records every pixel exactly, which keeps a logo or a screenshot crisp.

A photograph is full of subtle shades, and as a PNG it can be several times heavier than a JPEG that looks the same.

PNG also allows a see-through background, so cut-out photographs are usually PNGs, and heavy ones. On a plain page, a JPEG with a background in the page's colour looks identical.

Textures, galleries and fonts

A texture behind the page is usually a photograph sized for a large monitor, and phones download it even where the layout covers it.

Galleries should send small previews, and the large photograph only on a tap. Some send every full-size file at once, so a glance at the first row costs the whole collection.

Each font weight is its own file. A family used in light, regular, bold and italic sends four files where two would do.

A worked example

A blacksmith who makes gates, railings and fireplace tools, and teaches weekend forging classes, had a website designed to look like the forge.

Behind every page sat a photograph of scorched steel plate, sized for a large monitor. Each finished piece was cut out of its photograph and saved as a PNG, so the steel showed around it.

Weighed in Chrome, the home page came to more than ten megabytes. As PNGs, the six pieces on it kept every shade of the iron exactly, at over a megabyte each.

On phones the layout covered the steel with a plain panel, but the phone still downloaded it. Most people asking about classes came from phones, often on mobile data.

The changes were small. The background became plain charcoal with a thin band of steel across the header, and each piece was set on the same charcoal and saved as a JPEG.

On a phone the home page now comes in under a megabyte, and still looks like the forge.

Why lighter pages keep phone visitors

Weight costs time as well as money. On a weak signal every megabyte is seconds of blank screen, and a person waiting for a page is deciding whether to keep waiting.

Some decide to look later, on Wi-Fi. Many never do, because by then they have found someone else.

Visitors from outside the country, on roaming data, are often paying more again. And anyone who has watched a page eat their allowance once is likely to hesitate the next time.

The counter-case

Some pages should be heavy. A photographer's portfolio or a gallery of finished kitchens is the content, and cutting it would defeat the page.

Even then, the first page can stay light, with the full gallery a tap further in.

And a site whose visitors are almost all at office desks, such as a supplier to other businesses, has less to gain, though its customers still check it from their phones.

For everyone else: weigh the home page, find the heaviest files, and make the first visit cheap.

Weigh, trim, weigh again

  1. Weigh the home page in Chrome's Network panel.
  2. Note the total and the three largest files.
  3. Resize photographs to the size they are shown.
  4. Save photographs as JPEG, keeping PNG for logos.
  5. Show small previews in galleries, not full files.
  6. Check what phones download but never show.
  7. Weigh it again and keep the number.

Step six is the one most often missed: nothing on the screen gives it away, and only the file list from a phone test shows what the visitor paid for and never saw.

Running the wider check on speed, accessibility and good practice is covered in a free speed audit built into Chrome.

Frequently asked questions

What does a heavy page cost a Canadian visitor?

Mobile data here is expensive by international standards, and many people are on small plans. A heavy home page spends part of the visitor's allowance before they read anything.

How do I measure my page's weight?

In Chrome's developer tools, open the Network panel, tick Disable cache and reload. The line along the bottom shows the requests made and the megabytes transferred.

Which files make a home page heavy?

Photographs at full camera size or saved as PNG, a large background texture, galleries that load every full-size photograph, and font families in several weights.

Does hiding an image on phones help?

Only if it stops the download. Some layouts hide or cover a large image on small screens but still send the file, so the visitor pays for nothing.

Do I need a new website to fix this?

Rarely. Most heavy pages have two or three problems doing most of the damage, and fixing them is usually an afternoon's work for whoever maintains the site.

Should a portfolio site be light too?

Its first page should be, with small previews in the gallery and each full photograph sent on a tap, so the visitor chooses to spend the data.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Home page over five megabytes?

Send us the address. We will weigh it on a phone connection and name the three files to fix first.

Start a Conversation