Files the Browser Downloads Again on Every Page

The same logo, again

A visitor opens the home page, then services, then contact. All three pages use the same logo, the same stylesheet, the same scripts and often the same web font.

A browser can keep those files and reuse them, but only if the server says how long they stay good. Without that instruction, each browser guesses.

Some reuse a file for a while. Many check with the server about every file on every page, and some download it again in full.

On office broadband nobody notices. On a phone at a job site, each repeat adds delay to every page.

What the server is supposed to say

When a server sends a file, it sends a few lines of information first, called headers. Two of them, Cache-Control and Expires, tell the browser how long it may reuse the file without asking.

With a long expiry set, the second page a visitor opens loads only what is new on it: its own text and photographs. The shared files come from the browser's own store, almost instantly.

Without it, PageSpeed Insights flags the site under its rule about browser caching, and lists the files one by one, each with a note that the expiration is not specified.

Files that repeat on every page

• The logo and any header image.
• The stylesheet that sets every colour, size and font.
• Script files for sliders, menus and forms.
• Web fonts, often several weights of each.
• Icons and background images used across the site.
• Documents such as spec sheets, opened more than once.

The fourth surprises people. Until a web font arrives, some browsers show no text at all, so a font fetched again on every page can mean a blank moment on every page.

Why phones feel it most

Every check with the server is a round trip: the browser asks, waits and gets an answer. On a phone connection each round trip takes noticeably longer than on office broadband.

Even when the answer is that the file has not changed, the browser has waited for it. Multiply that by twenty files and every page pays for it.

And a page that sits blank on a phone is the easiest page in the world to leave.

Expiry times that suit each file

On most Apache hosting, a few lines in the site's .htaccess file set expiry times by type of file. Other servers have their own settings, and caching plugins for WordPress can write the rules.

Images, fonts and icons rarely change and can usually be kept for a year. Stylesheets and scripts can be kept as long once their names change with every edit, which is the next point.

The pages themselves should have short expiry times or none, because their content changes. Anything with a form, a cart or a customer's details should not be served from an old copy.

Rename a file when it changes

A long expiry has one catch. A returning visitor keeps the old copy until it expires, even after you have changed the file, so they may see last month's colours or an outdated drawing.

The fix is to give a changed file a new name, such as style-v2.css, and update the pages that use it. The browser sees a file it has never had, and fetches it once.

Many content management systems already add a version number to file addresses for this reason. Hand-built sites need someone to do it each time.

A worked example

A precast concrete supplier with a yard in an industrial park makes septic tanks, catch basins, manhole sections, retaining wall blocks and barriers, and sells mostly to excavators, landscapers and general contractors.

Its site has a page for each product, around eighty in all, each with a photograph, dimensions, weights and a drawing to download. Contractors often open six or eight product pages in a row, on a phone, on site.

The server sent no caching instructions. Every product page fetched the header logo, the stylesheet, two script libraries and a textured background again before anything about the product appeared.

The web company added expiry rules for images, fonts, stylesheets, scripts and drawings, and gave each of those files a version in its name.

Now the first page loads the shared files once, and each product page after it loads only its own photograph and text.

When a drawing is revised, the new file gets a new name, so no contractor is ever shown last year's dimensions from their own browser's store.

Seeing it for yourself

Run three typical pages through PageSpeed Insights and read the browser caching rule. Every file it lists is one that visitors may be fetching again.

In the developer tools built into Chrome, Firefox and Internet Explorer 11, the network panel lists every file a page loads. Open one page, then a second, and see which files came from the cache.

WebPageTest goes further: its repeat view loads the page a second time with the cache in place and lists what still had to be fetched.

Files you do not control

Some files come from other companies' servers: an analytics script, a font service, a map, a social media button. Their caching is set by those companies, and you cannot change it.

PageSpeed Insights still lists some of them, including Google's own Analytics script, which is set to expire quickly. Those lines can be ignored.

Concentrate on the files served from your own hosting. That is where the fix sits, and usually where most of the weight is.

The counter-case

Caching does nothing for the very first page someone opens. A heavy home page is still heavy for a new visitor, and a site where most people see one page and leave gains less.

A long expiry without renaming can also do harm, since visitors keep stale files after a change. On a site edited by hand, short expiry times may be safer until renaming is routine.

For most sites, though, the advice holds: long expiry for files that rarely change, and a new name whenever one does.

What to set

1. Run PageSpeed Insights on three typical pages.
2. List the shared files with no expiry set.
3. Set long expiry times for images and fonts.
4. Rename changed stylesheets and scripts before lengthening their expiry.
5. Keep page expiry short for the pages themselves.
6. Exclude forms and carts from any caching.
7. Check a second page in developer tools.

Step four is what keeps long expiry times from backfiring. Without new names for changed files, a faster site comes at the price of visitors seeing out-of-date pages.

A menu drawn as one picture repeats on every page too, and replacing it is covered in navigation built from an image map.

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.