by Bernadett Toth on June 26, 2019

How to Speed Up Your Slider

slider performance

Having a speedy website is crucial when you want to keep your visitors as no one wants to wait more than a few seconds for a page to load. Because of this, everyone wants their site to load fast. From time to time when a website owner wants to give their users not just plain texts but rich media (images or even videos) it is not an easy thing to do as the non-textual content loads slower. Especially when the file sizes are huge and when there are lots of media files to load.

Smart Slider 3 is a free WordPress and Joomla slider plugin and it is a great choice to add rich media to your website. You can create an image slider, a video slider, even a whole landing page with this plugin. If it is not optimized correctly Smart Slider 3 can also load slowly, but don’t worry because without any optimization Smart Slider 3 is still one of the fastest WordPress slider available. In this article I’ll show you how to speed up your sliders even more.

What can slow down a website?

The quick answer: anything. Even texts can slow down the page if they are really long. In most cases, the problem originates from the used rich media or the fact that the server is just not fast enough to return the requested content in a timely manner.

Would you like to know how fast your site is? Here is a website speed test that can help you figure it out, and it will also give you suggestions on what to fix to make your site faster.

Why is my slider loading slowly?

First of all, make sure that your slider is loading slowly on your website and not anything else. The system of Smart Slider 3 works the way that the slider has to load last on the website, because the plugin positions everything based on the loaded CSS and JavaScript codes on the website. So Smart Slider 3 has to wait until your website is completely built up to know how big our slider can be and where the layers should be.

Because of that, it can happen that it seems as if Smart Slider 3 is slow on your website, but actually your website’s loading speed is slow. You can see what loads on your website for how long, if you use a website speed test or just simply you use Chrome or Firefox. In this case, press F12 → click on the “Network” tab and refresh the page with hard refresh. Here you will see all of the elements of your page, and you can order them according to the loading time, too.

Google Chrome Network tab
Google Chrome Network tab

To create a fast-loading and optimized slider, it is important to pay attention to the quality and size of the images. A large image can slow down your slider and it can be disturbing for the visitor. You should pay attention that a small image can have a big size too if its quality is too good. Above a particular level of quality, people’s eyes can’t see the difference so don’t use images with too high quality.

The slider isn’t loading at all

Do you see only the loading icon or an empty space where your slider should be? These kind of problems usually happen when you have JavaScript errors on your page. JavaScript errors stop every other JavaScript code that should run after them and prevent them from working, so they need to be solved. You can check these errors using your browser’s developer console. Besides that you can make a plugin/theme conflict test, too.

Smart Slider 3 Icon
Bring Your Ideas to Life
Powerful. Visual. Intuitive. Smart Slider 3 is the most advanced slider and block creation tool for WordPress and Joomla.

Slider performance tips & tricks – How to create a fast-loading slider?

A fast-loading website is an expectation nowadays. Creating a slider can be an important point at the loading time of a Joomla or WordPress as well. So if you don’t use your slider properly, it can be slow. There are a few tips & tricks which you can create an optimized slider with.

  • Choose the correct image size. Maybe this point is the most important part of the optimized slider performance. Don’t use more than 500kb size of images in your slider, try to resize them. Also, you should pay attention to the quality of your media, don’t work with too high quality. An optimal image resolution is 1920×500 px at a full width slider, and if you use .jpgs instead of .pngs, you can save space, too.
  • Always plan your slider. If you plan your slider and make some preparations, you can save your time from optimizing your slider after it is ready. It is the best, if you begin the slider creating with summarize the resources, and optimize your images. It’s always better to think ahead, right? Check our slider checklist, and create a good-working slider.
  • Reduce the number of slides. Unless you want to make a gallery, don’t put more than 5 slides to your slider. If you have too many slides, it can’t be so successful and not only because of the speed. The visitor won’t click through all the slides if you have too many, try to focus on the useful parts!
  • Limit your use of animations. Smart Slider 3 is rich in features. You can use the particle effect, shape dividers, Ken Burns, and a lot of other animations & effects. If you use all of them together, it can be disturbing for the visitor, and can increase the loading time, too. You should care not to take the animations to the extreme, and keep the harmony in the slider.
  • Reduce the number and styles of fonts. Using many different font-families also can increase the loading time. Try to limit the number of the font-families to maximum 3. If you use icons, choose from only one icon set, because loading different icon sets takes more time, too.
  • Use the optimize settings of Smart Slider 3. Smart Slider 3 has an optimize tab at the slider settings, where you can find more options to optimize your slider. You can resize the image layers, make lower the quality of your images or you can use the lazy loading, too.

Smart Slider 3 optimize settings

There are cases when some optimization steps just can’t be done, especially, when the slider is already created (e.g. using jpg images instead of pngs) so you can’t just rush in and change the images for the optimal result. Fortunately, there are still a few tricks to speed up your slider.

Smart Slider 3 optimize tab

For a better understanding, let me illustrate the possibilities with a few examples. I will create a new slider in Smart Slider 3 with three slides. Each slide has a background image (1, 2, 3), but no layers and the file size of these images is pretty large and their quality is really good, which will immediately slow down the website as the page size will be larger than 14 MB (which is the total file size of the three images).

Image optimization

If the images can’t be resized one by one as there’s just too many of them, the Optimize images option can be really useful as it will resize the images to the slider’s size automatically. Here are the speed results in the slider (which has three large and high quality images) I’ve done a quick speed test for this.

At the Image dimensions, only the first image was checked, and I have added 70% Quality to the Optimize images.

Optimization off ✔️ Optimization on
Slider dimensions 1200 × 500px 1200 × 500px
Image dimensions 6000 × 4000px 1200 × 800px
Page size 15.2 MB 1.4 MB
Internet speed 10Mbit/s 10Mbit/s
Loading time 11.94s 852ms

As you can see, Smart Slider 3’s image resizing option decreased the page size 11 times and drastically reduced the page loading time.

Additionally, you can turn on the Layer image optimization, which allows you to reduce the size of the images used in your layers. The layer optimizations tool works only on certain layers, like the image layer, caption layer, and transition layer.

Lazy loading

Smart Slider 3 offers a lazy loading option. In the Slider settings → Optimize → Loading you can either choose to load your slider background images after everything else has been loaded to your website, with the Delayed loading option, or what really makes a difference is the Lazy loading which makes your slider only load as many slide background images at once as you want.

Since I have only three images, let’s see how fast the website loads when the lazy loading is set to 0 neighbours, which means that only the visible image will be loaded.

Lazy loading off Lazy loading on ✔️ Lazy loading +
Image optimization on
Slider dimensions 1200 × 500px 1200 × 500px 1200 × 500px
Image dimensions 6000 × 4000px 6000 × 4000px 1200 × 800px
Page size 15.2 MB 5,8 MB 991Kb
Internet speed 10Mbit/s 10Mbit/s 10Mbit/s
Loading time 11.94s 4.58s 703ms

As you can see using lazy loading option in your Smart Slider 3 slider is made the loading much faster than when there wasn’t any optimization used. The best part is that the lazy loading even speeded up the slider when the images weren’t resized meaning that lazy loading alone can save you precious loading time.

Device specific images

You should also consider using device specific images which can be easily set within Smart Slider 3, so you can optimize the images even better. Using a different, smaller image for mobile and tablet, you can save your small screen users from having to download a large image, and you can serve them with an optimized one instead.

Speeding up a self-hosted video slider

If you have a video slider where you use your self-hosted videos, some of the suggestions above won’t help you at all. However, there are some tips that you can still apply to your case, e.g. using a video that has the same size as your slider. A background video doesn’t really have to be too high quality so reducing the quality will help reducing the file size.

Also, you have an option to disable the slide background video on mobile by turning off that setting in the optimize tab. So you can save a loading time for your mobile users, and they will see only the background image.

Additionally, you can make Smart Slider 3 not to call your video until the slider is ready if you set a background image, too. In this case, you can decrease the loading time of your page, because it will load the background image first, and the video will start when the slider is ready.

The plus one setting

When it comes to a speed of a webpage, not only the content of the page (texts and images on the said page) but the needed resources (css, js files), their amount and their file size matter, too. When we developed Smart Slider 3, we wanted to make sure that the additional resources Smart Slider 3 needs can be combined and minified reducing the amount of requests your page makes when it calls in our cache files, and reducing the size of the mentioned cache files. Why don’t you turn it on if you need a little bit of extra speed?

Is your website still slow?

If the image sizes are set properly and the lazy loading is turned on, yet the page where the slider is still loading slowly, some cache plugin or CDN might still be used. Joomla offers some caching methods by default, but for WordPress, you will need a 3rd party WordPress plugin.

Also it can happen that your server is slow, check our documentation and figure it out why your website is loading slow.

Final Thoughts

Realizing that your website has slowed down never feels good. It can cause a headache when you try to figure out what causes the loss of speed and you might make desperate steps when trying to make compromises to get back your fast pages. Just remember, most of the speed depends on the used rich media (their actual file size and their amount), and that is something that can be fixed easily. For example, if you use Smart Slider, you can just turn on some additional options, and the slider will take care of the problems. Having a speedy slider (and webpage) is worth that few extra clicks, isn’t it?

Bernadett Toth

About Author

I’m Bernadett Toth and I’m a member of Nextend‘s support team.
I have two dogs, in my free time I teaching them. Besides that I often ride a bike, watching movies or reading.