Sliders That Load Every Slide Before the First

Eight slides downloaded, one seen

The home page opens with a large photograph that changes every few seconds. There are eight slides, each a full-width picture, with dots underneath and arrows at the edges.

At a desk in the office, on a fast connection, nobody notices what it costs.

On a phone in a parking lot, the top of the screen stays blank or shows a spinning icon while the phone fetches all eight photographs, the script that rotates them and the styles that arrange them.

The visitor sees the first slide, if they wait for it. The other seven travelled to their phone for nothing.

Many slider plugins work this way out of the box.

What a slider adds to a page

• Every slide's image, usually sized for the widest screen.
• A script library, sometimes a second copy of one already loaded.
• The slider's own script and style sheet, often on every page.
• Extra fonts or icons for the arrows and captions.
• A deliberate delay while the script prepares the first slide.

The last is the one visitors feel. Many sliders keep the first slide hidden until their script has loaded and run, so the top of the page stays empty even after its image has arrived.

Why phones pay the most

Slider images are made for wide screens, often well over 1,500 pixels across, and a phone downloads the same files as a desktop.

Since WordPress 4.4, images added through the editor come with lighter versions for phones. Many sliders insert their images their own way, outside the editor, so they miss that help entirely.

A mobile connection also adds a delay to every request, so a slider's handful of extra files costs more on a phone than their size alone suggests.

And data on a phone plan is not free. A home page weighing several megabytes has cost the visitor something before it has told them anything.

Measuring what the slider costs

Weight is only half of it. A slider can also keep the top of the page empty until its script has run, and a list of file sizes does not show that.

WebPageTest does. It opens the page in a real browser, at a chosen location and connection speed, then shows a filmstrip of what appeared when, every file that loaded, and the page's total weight.

PageSpeed Insights gives mobile and desktop a score out of 100 each, with a list of what slows the page down, such as images that could be smaller and scripts that hold back the first view.

With the slider and without it

The clearest answer comes from a comparison. Ask whoever maintains the site for an unpublished copy of the home page with the slider removed and a single image in its place.

Run both through WebPageTest on a mobile connection setting and compare three numbers: the total page weight, the number of requests, and start render, the moment anything first appears on screen.

If the slider accounts for most of the weight and holds back the first image, the decision more or less makes itself.

A worked example

A team building company runs outdoor challenges, cooking competitions and city scavenger hunts for offices, and many of its enquiries come from office managers looking on their phones between meetings.

Its home page led with eight event photographs in a slider, each uploaded straight from the photographer's camera at more than 5,000 pixels wide.

The slider plugin also loaded its own copy of a script library the theme already used, plus its own styles and fonts, on every page of the site.

On a mobile setting, WebPageTest showed an empty space at the top of the page for several seconds, and a home page many times heavier than any other page on the site.

The rebuild kept one photograph, resized and compressed, with the headline in real text beneath it. The other seven became a row of small photographs further down, one for each type of event, each linking to its own page.

The slider plugin was removed entirely, so its files stopped loading on every page of the site.

One strong image

For most small business home pages, one photograph does the slider's job better: the one that shows the business at its most typical.

Size it for the space it fills, not the camera it came from. Around 1,600 pixels wide, saved as a compressed JPEG, covers a large desktop screen at a fraction of a camera original's weight.

Set the headline and the button as real text, not as part of the photograph, so they appear as soon as the page does and stay sharp on every screen.

If the slider stays

Some businesses genuinely need several images at the top, such as a venue with very different rooms or a shop whose stock changes by season.

Then use a slider that loads only the first image with the page and fetches the rest afterwards, usually called lazy loading in its settings, and that shows the first slide without waiting for its script.

Keep it to three or four slides, point each at a large copy rather than the full-size original, and load the slider's files only on the page that uses it.

Then measure again. A lighter slider should cost little more than one image.

The counter-case

A business whose visitors mostly sit at office computers on fast connections, such as a supplier selling to other businesses, pays less for a heavy slider, though it still pays something.

A slider built carefully, with small images and lazy loading, can cost very little, and replacing it may not be the first job on the list.

Some home pages also have bigger problems, such as a background video or an enormous logo file, which deserve attention first.

For most small business sites measured on a phone connection, though, the slider is the heaviest thing on the page, and one well-sized image does the job better.

The test

1. Run the home page through WebPageTest on mobile.
2. Note the weight, requests and start render.
3. Count the slider's files in the list.
4. Make a copy with one image instead.
5. Test the copy the same way.
6. Remove the slider plugin if the copy wins.
7. Resize every replacement image before uploading.

Step four is the one that settles the argument. Two versions of the same page, measured side by side, are much harder to dismiss than a score out of 100.

Why slider images miss the smaller sizes WordPress now makes is explained in responsive images arrived with WordPress 4.4.

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.