Table of Contents
Last update on
Ask most performance-minded web developers how they feel about image sliders and you might have to duck as they throw a coffee mug at your head. But a lot of WordPress users and premium theme developers sure do love them. So if you are one of those folks that loves to use them, let us at least help you make an informed decision. We tested some of the most popular slider plugins to see what kind of damage they will do to a page and which is the least evil.
Testing Environment
- I used a shared host (Bluehost)
- My WordPress install was running the Genesis theme
- Active plugins: WP Rocket 2.7, the slider being tested, iThemes Sync and Sucuri (both backend plugins).
- Speed tests were all done using the San Jose location in Pingdom
Plugin Configuration
- For the slider itself, with each plugin I created a slider of 1100 x 400, using the same 3 images each time. I didn’t compress or size them properly because generally speaking, the average user doesn’t seem to do that.
- The file sizes of the 3 images were: 106kb, 198kb and 533kb.
- WP Rocket configuration – I didn’t activate any additional options such as LazyLoad or minification.
- For the most part I used default options within the slider plugin themselves. In a couple of cases there was an option to resize the images within the plugin and where I used that, I tested with and without that option
- Each slider was tested on a full-width page with a couple paragraphs of text.
Plugins Tested
- Meta Slider (free)
- Cyclone Slider 2 (free)
- Soliloquy (free)
- Slider Revolution (premium)
- Layer Slider (premium)
- Slider Pro (premium)
- Royal Slider (premium)
- Huge IT Slider (free)
Criteria
Obviously speed is the primary criteria here. But I’ve also noted how many additional HTTP requests were generated by each plugin, and how much weight they added to the overall page size. Finally I also checked to see if the plugin loaded its scripts and styles only on pages where the slider was being used, or if they were loaded across all pages no matter whether needed or not.
Caveats
In this test, I’m not trying to optimize these plugins to the max to make them perform the fastest, I’m trying to replicate an average use case and assess the speed impact of adding a slider. So you could make all these plugins perform faster by optimizing/sizing the images, activating more options in WP Rocket and fiddling with the options of each slider plugin. But since most people don’t take the time to do that, I went with what I consider to be a typical configuration.
The Results
I used the San Jose location because it’s closest to where my site is hosted. For each configuration I did 3 tests and then averaged out the speeds. The benchmark represents a basic page without the slider, so that you can compare additional HTTP requests etc.
Top Performers
Using their default options, Cyclone Slider 2 and Meta Slider come out on top for speed.
The two that came out on top were Cyclone Slider 2 and Meta Slider (the free version). In the above configurations I used the default settings which included their resizing features. This gives them the edge because it reduces the filesize of each image, which reduces the page weight by about half (as you’ll see below).
Sizing images to the dimensions at which they will be used is something that everyone should be doing for themselves, but usually don’t. “Smart Crop” is a default setting within Meta Slider, and it’s tucked away under the Advanced tab, so the average user would likely be using this. “Resize images” is the default setting in Cyclone as well.
As you’ll see below with the next set of results, Meta Slider still comes out on top, even after I turned off the Smart Crop feature.
Solid Performance
Meta Slider is still best of the bunch even when using the full size images.
It adds the least number of requests as you can see. Soliloquy is a well-known plugin and I expected it to fare a little better here. Huge IT Slider was something I personally hadn’t used before, but found in the WordPress plugin directory and decided to try since it has over 100 000 installs. I found it to be very solid, performance-wise.
The Slow Pokes
Notice anything interesting here? The two most commonly used plugins Slider Revolution and Layer Slider are among the worst for performance! These two are often bundled into premium themes on Themeforest, yet they are the least efficient. For my tests, I created a very basic image slider although all 3 of these last plugins could be used to create very complex animated sliders. But I imagine that if they perform the worst for a basic slider, the more complex you make it, the worse it may get, performance-wise.
Adhering To Best Practices?
One of my criteria was how these plugins handled themselves on pages where they weren’t being used. These were the ones that loaded all their JavaScript and CSS files even on pages with no sliders:
- Slider Revolution
- Layer Slider
- Cyclone Slider 2
Again, the 2 most prominent are offenders here. Now imagine those premium themes that bundle BOTH sliders and recommend you activate them. You’re going to be adding a lot of unnecessary HTTP requests and page size completely needlessly!
As a side note, I found Revolution and Layer to have the worst user interfaces and workflow for making a simple slider. So my recommendation would be to only use one of these if you absolutely need a slider with animated layers (and let’s face it….who REALLY needs that? 😉 )
Real Life Considerations
It’s true that my test site is not a representation of most modern websites. It’s very basic and even on shared hosting, it’s pretty fast. So you may look at the above speeds and think 700ms – that’s still super fast – nothing to worry about! But a lot of people are using themes that are not as fast as Genesis right out of the gate. So you may be starting out with twice the load time right there. You probably have more images, plugins etc. So a real life implementation is going to be a lot slower and that’s why those milliseonds count. When you are not a developer, it’s really important that you make the best decisions possible when choosing your tools so that you can have all the features that you want, but without destroying your site’s performance.
Conclusion
Here’s the complete list of plugins with times, requests and page sizes:
For your everyday slider needs, I would go with Meta Slider. It’s free, relatively lightweight, really easy to set-up and will have the least negative impact on performance.
Of course, two huge factors are the number of slides and the size of your images. Both those are completely under your control, so make sure to limit them! To learn more about optimizing your images, read our guide, and check out our new image optimization tool: https://imagify.io
Did I miss your favourite slider? Have some feedback of your own? Drop a note in the comments!
