Most small business home pages need no more than a megabyte or two. Measure yours in PageSpeed Insights, then fix it in order: photographs first, then the slider and video, then fonts and unused scripts.

Eight megabytes before the hours

A visitor on a phone, on mobile data, opens a home page to find the opening hours. The page begins with a full-screen video, then a five-slide carousel, a social feed and four different typefaces.

On the office connection it looks wonderful and loads in a few seconds. On the phone, at the edge of town, the screen stays blank, then fills in slowly from the top.

The page weighs about eight megabytes. The hours, the address and the phone number weigh almost nothing, and they wait behind everything else.

Where the weight comes from

The first is usually most of the total. A photograph from a current camera or phone can be many times the size a screen needs, and five of them make a heavy page before anything else loads.

Why it matters on a Canadian phone

Mobile data in Canada is not cheap, and plenty of plans still come with modest monthly allowances. An eight-megabyte page costs the visitor something real.

Coverage matters too. Outside the cities, on highways, ferries and in the valleys, the signal slows to a crawl, and a heavy page may never finish loading.

Google has also used page speed as a ranking factor for mobile searches since last year, so the visitor is not the only one waiting.

Measuring it

PageSpeed Insights, Google's free testing page, runs your page through Lighthouse, the same auditing tool built into Chrome's developer tools.

Look at the mobile result. It loads the page on a simulated mid-range phone over a slow mobile connection, which is closer to your customers' afternoon than your office is.

Ignore the score at first and find the line about enormous network payloads, which gives the page's total size. The list beneath it names the largest files.

Most small sites will also see a note that there is not enough real-world data for the page. That is normal; the simulated test is the one to use.

Photographs first

Start with the photographs, because they are usually most of the weight, and making them smaller changes nothing about the design.

No image needs to be wider than it will ever be displayed. A full-width photograph rarely needs more than about two thousand pixels, and most others need far less.

Compress each one sensibly. A multi-megabyte file typically comes down to a few hundred kilobytes with little visible difference on a screen.

Images further down the page can be set to load only as the visitor scrolls toward them, usually with a plugin or a small script, so the first screen arrives sooner.

The slider and the video

A slider makes the visitor download five photographs to see one. Replace it with a single strong image and a clear sentence about what you do.

A background video is often the largest file on the page. Some themes swap it for a still image on phones, and some download it regardless.

Use a still photograph instead, at least on phones. If the video genuinely sells the business, put it on its own page, where people who want it can press play.

A worked example

A craft brewery with a taproom in a small mountain town had a home page built around a full-screen video of the brewhouse.

Below it sat a five-slide carousel of beer photographs from a professional shoot, uploaded at full resolution, an embedded social feed, and four typefaces chosen during a branding exercise.

PageSpeed Insights put the page at a little over eight megabytes, more than half of it the video and the slider. Most visitors on phones wanted the hours and the food truck schedule.

The video moved to a page about the brewing. One photograph of the taproom replaced the carousel, every image was resized, the typefaces dropped to two, and the feed became a link.

The home page now weighs around a megabyte and a half, and the hours sit at the top.

Fonts and scripts

Each typeface comes as separate files for regular, bold, italic and every other weight, so four families can easily mean a dozen downloads. Most sites need one or two families and three or four weights.

Icon fonts are a common hidden cost: a whole library of symbols loaded to show three icons in the footer.

Scripts add up the same way. A social feed, a chat window, an animation library and several tracking tags each bring their own files, and plugins often load them on every page whether used there or not.

The server's share

Some of the fix sits with the hosting rather than the page.

Text files, such as the page itself and its styles and scripts, should be compressed by the server before sending. Returning visitors' browsers should be told to keep files they already have.

Both are settings rather than redesigns, and whoever maintains the site can usually confirm them in an afternoon.

The counter-case

Some businesses sell with images, and their pages will never be light.

A photographer, an architect or a hotel needs large, beautiful pictures. The weight belongs on gallery and project pages, chosen by visitors who want it, rather than on a home page everybody must load.

And a site built on a theme that loads everything everywhere may be cheaper to rebuild than to patch, which is a call for a professional who has seen the code.

For most small business home pages, though, the order holds: photographs, then the slider and video, then fonts and scripts.

The order to fix it

  1. Test the mobile page in PageSpeed Insights.
  2. Note the total page weight.
  3. Resize and compress every photograph.
  4. Replace the slider with one image.
  5. Swap the video for a still photograph.
  6. Cut the fonts to two families.
  7. Remove scripts nobody uses.

Step three does the most for the least disruption. Nobody notices a properly sized photograph, and on most heavy pages it removes the bulk of the weight on its own.

Serving those photographs in a lighter format where browsers allow it is covered in WebP works in Firefox now.

Frequently asked questions

How heavy should a home page be?

For most small business sites, a megabyte or two at most. Pages several times heavier usually carry oversized photographs, a video, a slider or fonts nobody needed.

How do I measure page weight?

Run the page through PageSpeed Insights and check the mobile result. Its diagnostics give the total size, and the list beneath shows which files are largest.

What usually makes a page heavy?

Photographs uploaded straight from a camera or phone, a background video, a slider loading every slide at once, several web fonts, and scripts for features nobody uses.

Why does page weight matter in Canada?

Mobile data here is costly, many plans have modest allowances, and signal thins quickly outside the cities. A heavy page costs visitors time and money before they see anything.

What should be fixed first?

The photographs, because they are usually most of the weight and making them smaller changes nothing about the design. Then the slider, the video, the fonts and unused scripts.

Does the PageSpeed score matter?

Less than the weight and the list behind it. The score varies between runs, and chasing a perfect number wastes effort better spent on the largest files.

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 slow on a phone?

Send us the address. We will measure the page and list what to remove, resize or replace, in order.

Start a Conversation