How to Replace Slider Revolution with a Flickity Slider and Gain 50+ Performance Points

This is a short story about WordPress website performance optimization. A recent project of mine involved optimizing a website, currently scoring 20 in Google PageSpeed Insights for Performance.

TL;DR: Slider Revolution loads a lot of JavaScript, CSS and images on every page it appears on. Replacing it with a small, hand-coded Flickity slider (dragging, swiping, infinite loop, parallax, no jQuery) took this homepage from 20 to 70 in PageSpeed Insights, without touching anything else.

Why Slider Revolution was slowing the site down

The WordPress website in question was built using WPBakery and Slider Revolution. Luckily for me, the slider was only used on the homepage. I tried all Slider Revolution optimization tips out there, and I still could not get past 40. As I could not get rid of WPBakery, I focused all my efforts on the slider.

Slider Revolution is a powerful visual builder, but that power has a cost: its engine, add-ons, fonts and full-size slide images all compete for bandwidth and main-thread time during the first page load, which is exactly what Largest Contentful Paint and Total Blocking Time measure. A hero slider sits above the fold, so every millisecond it costs shows up in your score.

I decided to rewrite the slider using custom code. The client was not likely to change the slider soon, and pagespeed is more important than having an easily configurable slider. Worst case scenario, a developer would need to change a slide or add some new content.

What the replacement slider needed to do

Now, sliders are tricky. I needed one that could do the following:

• Dragging on desktop devices
• Swiping on mobile devices
• Infinite loops
• Parallax scrolling
• No framework dependencies

Building the Flickity slider

My slider of choice has been, for years, Flickity. It is vanilla JavaScript (no jQuery required), and dragging, touch swiping and infinite looping all work out of the box. My plan was to build a custom plugin, something small, enqueue Flickity and hardcode the slides. The slides needed CSS transitions and parallax scrolling. And that was pretty easy, and I was able to replicate Slider Revolution’s design up to 90%. But then again, the client was not interested in having that exact design and animations.

I was able to replicate text transitions, I was able to have multiple elements (such as logos) on each slide, and I was able to overlay special visual effects (such as smoke clouds, which are an animated GIF set as a cover background in a ::before pseudo-element).

1. Enqueue Flickity only where it’s needed

The whole plugin is a few lines. Load Flickity on the homepage only, in the footer, deferred:

add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_front_page() ) {
        return;
    }

    wp_enqueue_style( 'flickity', plugin_dir_url( __FILE__ ) . 'assets/flickity.min.css', [], '3.0.0' );
    wp_enqueue_script( 'flickity', plugin_dir_url( __FILE__ ) . 'assets/flickity.pkgd.min.js', [], '3.0.0', [
        'in_footer' => true,
        'strategy'  => 'defer',
    ] );
    wp_enqueue_script( 'hero-slider', plugin_dir_url( __FILE__ ) . 'assets/hero-slider.js', [ 'flickity' ], '1.0.0', [
        'in_footer' => true,
        'strategy'  => 'defer',
    ] );
} );

2. Hardcode the slides

Give the first image fetchpriority="high" (it’s your LCP element) and lazy-load the rest:

<div class="hero-slider">
    <div class="hero-slide">
        <img class="hero-slide__bg" src="slide-1.webp" width="1920" height="800" alt="" fetchpriority="high">
        <div class="hero-slide__text">
            <h2>First headline</h2>
            <p>Supporting copy</p>
        </div>
    </div>
    <div class="hero-slide">
        <img class="hero-slide__bg" src="slide-2.webp" width="1920" height="800" alt="" loading="lazy">
        <div class="hero-slide__text">…</div>
    </div>
</div>

3. Initialise Flickity and add parallax

Flickity fires a scroll event while slides move, which is all you need for a parallax effect (simplified here; the full version is in the CodePen below):

const flkty = new Flickity('.hero-slider', {
    wrapAround: true,
    autoPlay: 6000,
    pauseAutoPlayOnHover: true
});

const backgrounds = document.querySelectorAll('.hero-slide__bg');

flkty.on('scroll', () => {
    flkty.slides.forEach((slide, i) => {
        const x = (slide.target + flkty.x) * -1 / 3;
        backgrounds[i].style.transform = `translateX(${x}px)`;
    });
});

4. Text transitions with plain CSS

Flickity adds an is-selected class to the active slide, so text animations are just CSS transitions:

.hero-slide__text {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease .3s, transform .6s ease .3s;
}
.hero-slide.is-selected .hero-slide__text {
    opacity: 1;
    transform: none;
}
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(smoke.gif) center / cover;
    pointer-events: none;
}

Flickity slider demo

So, here it is (I have changed the images for demo purposes):

See the Pen Flickity – Hero Slider with CSS Transitions by Ciprian (@ciprian) on CodePen.

Here is a direct link to the CodePen demo.

The result: from 20 to 70 in PageSpeed Insights

After implementing this slider and deactivating Slider Revolution, my performance score went up to 70.

Sometimes, if not always, it’s more important to have a good performance score than to have an easily customizable element or feature on your website.

Do you need a slider at all?

Here’s the part I tell most clients: a lot of homepage sliders exist only to show off images, such as products, projects, portfolio pieces or event photos. A rotating hero shows one image at a time, and most visitors never wait for slide three.

If what you really want is to showcase images, a fast, filterable gallery usually does a better job. That’s why I built ImagePress, a WordPress image gallery plugin that goes well beyond a carousel:

• Gallery grid templates: responsive, mobile-friendly layouts with sorting and filtering
• Collections: group images and display them on any page with a shortcode
• Drag & drop, front-end uploads: let users, members or clients submit their own photos
• User profiles and portfolios: build a community site like PosterSpy, one of the sites running ImagePress

A good setup is a single lightweight Flickity hero for your headline message, and ImagePress for everything image-heavy below it. You get the visual impact without the 20/100 PageSpeed score.

FAQ

Does Slider Revolution slow down a WordPress site?

It can. On this site, Slider Revolution was the main reason the homepage was stuck below 40 in PageSpeed Insights, even after applying its own optimisation settings. Replacing it with a Flickity slider brought the score to 70.

What is a good Slider Revolution alternative?

If you’re comfortable with a bit of code, Flickity is a lightweight, dependency-free option that handles dragging, swiping, infinite loops and parallax. If you mainly want to display images rather than animate them, an image gallery plugin like ImagePress is often the better fit.

Does Flickity need jQuery?

No. Flickity works with vanilla JavaScript. jQuery is optional.

Can the client still edit slides?

Not from a visual builder. Slides are hardcoded, so changes need a developer. For a homepage hero that rarely changes, that trade-off was worth 50 performance points.