When to use a responsive slider – and speed tips.

blue opt

Save the Internet from WordPress speed abuse.

Updated: December 2017

5 minute read

PagePipe’s goal was adding various full-width images to our catalog page near the top. Not only the column width like with many sliders. We were testing how to put a slider in the featured-image slot. A paid slider plugin didn’t work as promised. After an update – the plugin author couldn’t upload the plugin via WordPress. They wanted either FTP or Cpanel access. We told them, “No way!”

The plugin company then issued us an expiring store credit. We told them that wasn’t good enough. We requested a reimbursement. We told the number of annual visitors we get on PagePipe. We said we’d be reporting our experience. We then got same-day reimbursement. We figured if they could rob us – we could blackmail them. Fair is fair. If you want to know who they are, email us.

Using heavy sliders (and light ones, too) on the home page are a disadvantage. They hog bandwidth and distract precious visitor attention. Appropriate slider usability is not a loss when applied on subpages. You must use selective activation to prevent site drag. If full of irrelevant stock images, you’ve done your site a disservice.

Web assets must add value or have purpose. Adding frivolous assets causing site drag (global loading) is nonsensical.

What’s appropriate slider usage? One good use is displaying a portfolio or a range of product images without links. Or a short, three-panel story is another. And then only if it *feels* right for UX. No links. No hover stops. Fades are best. Nothing whizzing, exploding, rotating, or hurried.

The goal is subtle implication there’s more than one product offering. You need a cue at the page top when the catalog content is much further down. It’s not a solo product page. It’s a catalog page. The slider is for page differentiation and visual cuing. The slider should not contain all product images. Only a representative sample to keep things light.

Usually it’s best not to use sliders for navigation. They aren’t effective (read reference). But we’ve put sliders on many sites for presentation. Even home pages. Why? For the same reason most do it: the client demanded it – and they write the checks. But we also insist the owner dump something to compensate for the extra slider weight. Something heavy like Facebook real-time counters – or a YouTube video – or Google Maps. It’s a negotiated speed deal.

Sliders are NOT dumb and evil. It’s how they’re used in design and communication methods. Site owners are often unaware of the global speed infraction.

Large images are dramatic and people like to look at pictures. Adding large images is deliberate for better UX. But where and when they should appear is the important question and how much they weigh. Is the home page sacred ground? Yes. Don’t bloat it. Build for for fastest page loads. But not always. Some sites get more traffic through other landing pages than the home page. If that’s the case, avoid sliders on those pages.

The inclination is putting the slider on your gateway page. Bad form!

Readable interesting text is always most important – not images. People want to read good text that solves a problem for them. Even if the problem is boredom. With a good picture, they still want something to read to understand why the picture is there. They want words. Even with art: a caption or title does wonders.

We made a moronic and impulsive $25-dollar slider-plugin buy. We got duped and had major buyers remorse. We got a refund only because we’re a technology publisher. We’ll never buy another plugin or theme again (maybe?). We learned a valuable lesson about paid-and-premium offers. Later, we found a free slider plugin (Master Slider).

Is Master Slider a *special* slider? No. (How they can advertise a slider as being SEO-friendly is beyond our understanding!) It’s what it doesn’t do that we like most. It doesn’t cause unnecessary page bloat. It adds 6 calls to the page.  We can live with that. Lots of slider plugins do that. We wanted to test drive this one.

The real kicker for speed is optimizing and limiting the number of images. For example, we intentionally compromised on slider image quality. Four images used (out of a dozen). They’re reduced to half the size – 991×595 pixels. The other large solo header images are 2000×1200 pixels (retina) recommended default size. The smaller slider images then dynamically-resize to fill the full-page width. There’s deliberate visual loss. The low-tech versions weigh around 40k to 80k. The large featured images on individual product pages vary from 150k to 250k.

Face it. Quality on moving images is a low-priority.

The final catalog page weight is 420k with 45 requests. Time to Europe on Pingdom, 1.84 seconds. to Australia, 1.7 seconds. We aren’t using minification on this page because it breaks the ecommerce features. That happens even with paid Woo-commerce. We’re using free Easy Digital Downloads plugin.

We’ll never succumb to purchase temptations again. Lesson learned. Until next time, anyway.

During these experiments, we realized the dangers of Twenty-seventeen Home featured image. It’s added via the customizer. This causes image loading on every single page and post. Even if it’s not visible (suppressed by CSS code). It’s still loaded on the backend. The original image was around 200k. So we tried coding solutions to defeat loading on any page but Home – to no avail. We then decided to junk the featured image. We added CSS code to color the background and added back our rocket logo. That workaround proved simpler and faster for speed.

Godspeed—

Steve Teare
performance engineer

Mobile WordPress Speed – without coding!

What others think of us:


"To be honest, I didn't expect much in the way of a reply but what I got was truly astonishing. He is a genius at what he does, as honest as they come and one of the last really good guys. If you need help with your WordPress site, try Steve first. You won't need to look any further!" fiftiesweb.com  Fort Lauderdale, FL

by - Michael Rich