The Same Script Library Downloaded Three Times

One library, three copies

jQuery is a library of ready-made code that a great many websites use for sliders, galleries, pop-up forms and drop-down menus. A page needs one copy of it, loaded once.

On many small business sites the page loads it two or three times. The theme brings one copy, a gallery add-on another, and a widget pasted in years ago a third, sometimes in a much older version.

A phone on a mobile connection downloads every one of them before the page settles. And the copies do not simply sit side by side; they interfere.

The symptoms look random: a slider that runs on the home page but not on the gallery page, a form that sends from a computer but not from a phone.

How the extra copies arrive

• The theme loads its own copy instead of the platform's.
• A plugin fetches jQuery from a public library server, just in case.
• A pasted widget carries jQuery inside its own code.
• An old template hard-codes a version from years ago.
• A past quick fix added a second copy to make one thing work.

The last is more common than it should be. Something broke, adding another copy of jQuery made it work that afternoon, and nobody found out why it broke.

Why the copies clash

Add-ons that use jQuery attach themselves to whichever copy is loaded when they start. A slider, a lightbox and a form checker each register with it.

When a second copy loads later in the page, it replaces the first under the same name. Everything attached to the first copy disappears with it.

The browser then logs errors saying a function does not exist, and the slider sits frozen on its first photo.

Whether it happens depends on the order in which files load, which can differ between pages, browsers and connection speeds. Hence the randomness.

Different versions, different rules

jQuery has changed over the years. Version 1.9 removed several old features that older add-ons still use, and the 2.x versions dropped support for Internet Explorer 8 and earlier.

So an add-on written for an old version can fail when a newer copy wins, and newer code can fail when an old copy wins.

WordPress handles this by shipping one current copy together with jQuery Migrate, a helper that restores the removed features for older add-ons. Anything that brings its own copy bypasses that arrangement.

What the copies cost on a phone

Each copy is a separate download of a few dozen kilobytes even when compressed, and each must be read and run before the scripts that depend on it.

Browsers cache files by address. Three copies from three addresses mean three downloads on the first visit and three entries in the cache afterwards.

Scripts placed at the top of the page also hold up everything below them. Until they arrive and run, the visitor looks at a blank or half-drawn screen.

Finding the duplicates

Open a page, view its source and search for jquery. Each script address containing it is a candidate, and the file names often show the version.

The browser's developer tools show it more reliably. The network panel lists every file the page downloads, with its size and origin; filter for jquery and each copy appears.

The console in the same tools lists script errors. Note them before changing anything, so you can tell afterwards what you fixed.

Check several pages, not only the home page, since add-ons often load only where they are used.

A worked example

A mosaic artist makes kitchen backsplashes, garden pieces and commissioned murals in glass and stone, and teaches weekend classes in her studio. Her site runs on WordPress.

The theme loaded its own copy of jQuery, a gallery plugin fetched a newer one from a public library server, and a class-booking widget in the sidebar carried a third, several years old.

On gallery pages the lightbox sometimes failed, opening photos as plain images on a new page. On phones the commission form now and then refused to send, with no error shown.

The cause was the order of arrival. When the widget's old copy loaded last, it replaced the others, and the lightbox and the form's checking script stopped working.

The theme was switched to the copy WordPress provides, the gallery plugin's option to load its own was turned off, and the widget was replaced with a plain link to the booking page.

Then every gallery page, the form and the booking link were tested on an iPhone, an Android phone and two desktop browsers.

Keeping one copy

On WordPress, the theme and every plugin should use the copy WordPress provides rather than loading their own. Well-made ones do; others have a setting, or need a small change by a developer.

On other platforms the principle is the same: one copy, in one place, loaded once, before anything that needs it.

Where an add-on insists on an old version, replace the add-on. Holding the whole site to an outdated library for one plugin's sake makes every later update harder.

Test after removing

Removing a copy can break whatever relied on it. That is a reason to test, not a reason to keep three copies.

Test everything that moves or responds: sliders, galleries, menus on phones, forms with checking or date pickers, maps and tabs. Submit each form for real and confirm the message arrives.

Use a phone and a computer, and more than one browser, including Internet Explorer 11 if customers visit from office computers.

The counter-case

A small site with one theme and few add-ons may already load jQuery once, or not at all. If the check finds a single copy, there is nothing to do here.

On a site due for a rebuild within months, the full clean-up can wait for the rebuild, with a quick fix now only for the form or slider that is actually failing.

Everywhere else: one copy of each library, the version the platform provides, and a round of testing after every change.

The check

1. Search the source of several pages for jquery.
2. List each copy and where it comes from.
3. Note console errors before changing anything.
4. Keep the platform's own copy and remove the rest.
5. Replace add-ons that insist on an old version.
6. Test forms, sliders and menus on a phone.
7. Check again after every new plugin.

Step six is the one people skip. A duplicate removed without testing can leave a form that looks fine and quietly stops sending, which costs far more than the extra download did.

Letting the remaining copy load from the browser's cache on later pages is covered in files the browser downloads again on every page.

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.