A Webcam Page That Reloads Itself Every Minute

A powder morning, and the site crawls

A ski shop's website has a webcam page that reloads itself every sixty seconds, so customers can watch the snow on the local mountain from their desks.

On a powder morning, a good part of town opens it and leaves it open. By nine the whole site is slow, including the rental booking page the shop needs most.

The camera is not the problem. The way the page refreshes, and the size of what it reloads, turns every open tab into a steady load on the server.

What a full-page refresh does

A refresh set in the page's code tells the browser to reload the whole page every minute: the HTML, the stylesheets, the scripts, the fonts, the logo and every other image.

Some of those files may come from the browser's cache, but only if the server said they could be kept. Without that instruction, the browser asks for each one again.

One visitor with the tab open requests the whole page sixty times an hour. Every other open tab does the same, all morning, whether or not anyone is looking at it.

Where the weight comes from

On many small business sites, each reload carries far more than the picture itself:

• The camera picture, often uploaded at the camera's full size.
• Header photographs and slideshow images at the top of every page.
• Scripts for menus, slideshows and analytics.
• Web fonts and stylesheets.
• Social media widgets, each loading its own scripts from elsewhere.
• Weather or snow report boxes that fetch their own data.

Only the first item changes from minute to minute. Everything else is downloaded again for nothing.

Refresh only the picture

A few lines of JavaScript can replace the picture alone every minute, leaving the rest of the page as it is. The browser fetches one image instead of a whole page.

The script adds the current time to the picture's address each time, so the browser treats it as new rather than showing the copy it already has.

The page loads once, with its menus, fonts and photographs, and after that each minute costs only the picture.

Size the picture for the page

Webcams often upload their picture at full resolution, several times wider than the space it fills on the page. Every visitor downloads all of it, and the browser shrinks it to fit.

Set the camera to upload at the size the page displays, or have the server make a smaller copy as each picture arrives. Save it as a compressed JPEG at a sensible quality.

If people want the detail, offer a larger version as a link, loaded only when someone asks for it.

Let browsers keep what never changes

The server can tell browsers how long to keep each file. Logos, stylesheets, scripts and fonts that rarely change can be kept for weeks, so a returning visitor does not fetch them again.

The camera picture is the opposite: it should be marked never to be kept, so each refresh gets the newest one.

These are settings on the server, usually a few lines in its configuration, and whoever hosts or maintains the site can add them in an afternoon.

A worked example

A petting zoo on a family farm in the Fraser Valley opens from spring to fall, with goats, sheep, rabbits and pony rides. Each March a camera in the barn watches the goat pens.

Families and classrooms leave the barn camera open all day, waiting for the first newborn goats. The page reloaded itself every minute, and the camera uploaded a large picture each time.

The week the first twins arrived, the whole site slowed, and the page for booking school visits sometimes failed to load.

The page now loads once and swaps in only the new picture each minute, resized on the server to the width the page uses and marked never to be cached.

The farm's logo, photographs, scripts and fonts are kept by browsers for a month, and the refreshing pauses whenever the tab is hidden.

An open tab now asks the server for one small picture a minute, instead of the whole page, and for nothing at all when nobody is watching.

Stop refreshing when nobody is looking

Browsers can tell a page when its tab is hidden behind others. The script can pause the refresh until the visitor comes back, then fetch the latest picture at once.

After an hour or so without any activity, the page can stop and show a button to resume. A tab forgotten over the weekend then costs nothing.

Phones gain the most. A phone left on the page over a weak signal spends its data and battery on pictures nobody sees.

Show when the picture was taken

Put the time of the picture beside it, taken from the file itself rather than the visitor's clock. If the camera stops uploading, visitors can see that the image is old.

A page that keeps refreshing a frozen picture looks live and is not. A short note saying the camera is offline is more honest, and it saves the phone calls.

The counter-case

A webcam page that few people visit, or one that refreshes every quarter hour, may never slow anything down. Neither may a camera whose pictures are served from somewhere other than the site's own server.

On a site with its own server and plenty of capacity, the extra requests may be absorbed without anyone noticing.

But the full-size picture still costs every visitor on a phone, and browsers still fetch unchanged files for nothing. Those two fixes are worth making on any page that refreshes.

Lightening the webcam page

1. Remove the full-page refresh from the page's code.
2. Refresh only the picture with a short script.
3. Resize the picture to the width the page shows.
4. Set long expiry times for logos, scripts and fonts.
5. Mark the picture never to be cached.
6. Pause the refresh when the tab is hidden.
7. Show the time each picture was taken.

Step two is the heart of the fix. Once only the picture reloads, every open tab stops asking for the whole page, and the rest of the site gets its server back.

Video players are another way a page grows heavy without anyone noticing, as six embedded videos on one testimonials page shows.

Frequently asked questions

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.