How to Speed Up Your Slider

Having a speedy website is crucial when you want to keep your visitors. As a matter of fact, 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. But making a site load fast can be challenging, because of the rich media (images and videos) usage. Both images and videos load slower than texts, therefore they need to be optimized for the web.

Smart Slider 3 is a 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. In this article I’ll show you how to check your site’s speed and how to speed up your sliders.

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 it could be 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? Use Google PageSpeed Insights to measure your site’s speed. It checks how fast your site loads, and gives you tips on where to improve it. Google PageSpeed Insights is an incredible tool. For this reason, they built it into Chrome browser, where it’s called Lighthouse.

The metrics of speed

Lighthouse has several different metrics which can describe your site speed. They’re all important to understand how to improve your site, so I’ll explain them in a few words.

• First Contentful Paint (FCP), which measures when the browser renders the first bit of content. It’s the first feedback to the user that the page is actually loading.
• Speed Index (SI) shows you how quickly the contents of a page are visibly populated.
• Largest Contentful Paint (LCP) provides details about the largest image or text paint before user input.
• Time to Interactive (TTI). It’s the point in time when the last Long Task finished.
• Total Blocking Time (TBT): it measures the total amount of time between FCP and TTI
• Cumulative Layout Shift (CLS) is a user-centric metric for measuring visual stability

The values of these metrics give you hints where you can improve your website. Unfortunately, usually, it is not so straightforward where to start. This is especially true if you’re new to web development.

What’s the best way to optimize your website?

Based on our experience the best way to optimize your website is by following this checklist:

1. Use a reliable hosting provider. A throttled web server can destroy all your achievements.
   1. Run the latest version of server software
   2. Use PHP with opcache enabled
   3. Use Cloudflare as middleware and set up caching policies properly
2. Always use the latest WordPress available
3. Test your theme in an empty WordPress installation and optimize it until you reach 100/100 on an empty page. You can find out the best example of how to do it here.
   1. You can try to optimize plugins to see which gives the best results with your theme.
   2. Prepare your “Link” header to give a hint to the browser on what to preload. This could be the style.css, a font family and every render-blocking resource.
   3. Try to get rid of as many render-blocking resources as you can.
   4. Use only one external font family and make sure it’s a variable font that is locally hosted.
   5. Reduce JavaScript usage and drop jQuery if you can
4. Use plugins that are optimized for Lighthouse. You won’t be able to fix a third-party plugin without breaking its updates.
5. Prepare your content for good scores. For example, use fewer images and videos above the fold. Also, make sure your images and videos are as optimized as possible.

How much impact plugins have on my site’s performance?

Every plugin you install on your website will eventually impact your site’s performance. They’ll lower your page speed score, and slow down your website. The only exceptions are optimizing plugins, as their purpose is to improve speed. What you should consider is how much impact each plugin has on your site performance. Also, whether the functionality the plugin gives you worth the price of performance.

If you’re looking to buy a plugin, ask the developers how they optimized their plugin for Lighthouse. Also, test the (demo) website of the plugin with Lighthouse yourself to see how well it performs. If the demo site’s performance is poor, you can’t expect to have good results on your own site either. After all, if the developers couldn’t make their own site perform well, how could you?

As a matter of fact, we’re convinced the content you create with Smart Slider 3 is important. It helps you give your users an amazing and memorable experience with your website. For this reason, we made every effort to optimize Smart Slider 3.5. As a result, our homepage, which we created using sliders only (except the header and the footer) got a 100/100 score. Isn’t that amazing?

Why is my slider loading slowly?

First of all, make sure that your slider is loading slowly on your website and not anything else. It might seem that Smart Slider 3 loads slow, but actually the whole site is slow. If your site isn’t fast, your slider can’t load fast either.

You can see what loads on your website for how long, if you use a website speed test. Or you could use Chrome or Firefox browsers. In this case, press F12 → click on the “Network” tab and refresh the page with hard refresh. Here you will see all elements of your page, and you can order them according to the loading time, too.

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.

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.

1. Choose the correct image size

Choosing correct images is the most important part of optimizing your slider’s performance. First, make sure your images don’t weight more than 500kb. The easiest is to resize the pictures before you upload them to your website. An optimal image width is 1920px for a full width slider. So try to aim for that.

Also, you should pay attention to the quality of your media. In other words, don’t add too high quality pictures to your site. Additionally, if you use .jpgs instead of .pngs, you can save space, too.

2. Always plan your slider

Don’t rush into the slider creation. Plan your slider, prepare the assets (images, videos) you’ll use. Make sure they’re correctly sized for the slider you’ll create. It’s always better to think ahead, right? Check our slider checklist, and create a good-working slider.

3. Avoid using linked Absolute positioned layers.

Linking an Absolute layer means that it’s no longer positioned from its container, but from another Absolute layer. So, to be able to display the linked layer, the slider first need to calculate the position of the layer it’s linked to. After that, it can start to calculate the position of the second layer. This takes time, and the slider can’t show up until every layer position is calculated. Therefore using linked layers will slow down your site, and you should avoid using them.

4. 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, and you have lots of layers on them, that can negatively impact the loading speed. Also, the slider can’t be so successful and not only because of the speed. If you have too many slides, the visitors won’t click through them. Try focusing on your most important message!

5. Header preload

You should preload every part of your site which counts as a render-blocking resource. If sliders play an important part in your website’s content, you should preload it in Smart Slider Global Settings → Framework → Header Preload.

6. 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.

7. Use SVG icons

Usually you’ll see font icons on the web. Smart Slider 3’s icon layer uses icons from the most popular libraries, such as Font Awesome 4 and Icomoon. Using such icons requires loading an extra font family and CSS file per font library. This affects your site’s speed.

8. Use a local cover image for videos.

When you add a YouTube or Vimeo video to your slide, it loads a cover image for the video. This image is coming from YouTube or Vimeo, and not from your own site. This means the speed of your site depends on how fast they serve the image. To ensure the optimized loading, use a cover image you host on your site.

9. Set the proper loading type for your sliders

Unless your slider loads above the fold, it shouldn’t load instantly, but only after the page has loaded.

10. Use the optimization settings of Smart Slider 3

Smart Slider 3 has many different options to help you optimize your slider. For example, you can convert your background and layer images to WebP format. Also, you can resize the pictures for desktop, tablet and mobile. As a result, you can optimize the loading for all kinds of visitors.

Smart Slider 3 optimization settings

There are cases when you can’t do some optimization steps. For example, if your slider is already published, you can’t just go and replace every png image with jpg. It would be super time-consuming. But there are still a bunch of tricks to speed up your slider.

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 they don’t have any layers. The file size of the images is pretty large, and they have high quality. The total file size of the three images is more than 15Mb. As a result, adding them to your site in any way will immediately slow it down.

Image optimization

The first image optimization option you should use is the Convert to WebP. WebP is a new image format for the web, which allows creating images with low file size but still great quality. So, the Convert to WebP option creates super fast loading WebP images from your pictures. Additionally, it reduces the file size, too.

You can also resize the converted WebP images to reduce their dimension. This way, you can get a more optimized image for each device.

As you can see, using the Convert to WebP option, the page size decreased 10 times. Additionally, this option drastically reduced the page loading time.

Furthermore, you can convert your layer images to WebP as well. As a result, you can reduce the size of the images you used in your layers. It’s worth noting that the Convert to WebP option works only on certain layers. For example, on the image layer, caption layer, and transition layer.

Lazy loading

Smart Slider 3 offers a lazy loading option for the slide background images. You can find it at Slider settings → Optimize tab → under Loading. It has two different options to help you fine tune your slider’s loading. The Delayed loading which loads the images after everything else has been loaded.

But what will make the most difference is the Lazy Loading. It only loads as many slide background images at once, as you want. For example, you can only load the first image of your slider. The other images will only load when the visitor switches to their slide. As a result, you can save up lots of loading time!

Since I have only three images, I set the slider to load only the first slide’s image. To achieve this, I set the Lazy loading → Load neighbor to 0 slides. As a result, only one of the 3 images will load.

As you can see, using the Lazy Loading option made the page load fast. Using the Convert to WebP and Resize options, the page loaded under 1 seconds. That’s a super fast loading time!

Additionally, the lazy loading option made the page load faster without using optimized WebP images. This means just by lazy loading your images you can save precious loading time.

Loading type

If your slider is not above the fold, it should not load instantly. So, at every slider which is below the fold, you should change the Loading type to After page loaded. This way, the slider’s codes won’t be loaded until the visitor scrolls to the slider.

The table below shows how much difference the After page loaded option makes. It’s worth noting that for this check, I placed the slider below the fold.

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. For example, you can make your video have the same size as your slider. Remember, a background video doesn’t have to have too high quality. So you can reduce the file size by reducing the quality.

Also, you can disable the slide background video on mobile at the Optimize tab. So you can save 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. You can achieve that if you set a slide background image, too. In this case, you can decrease the loading time of your page, because first the background image will load. You have many options to optimize the background image, so it will load a lot faster than the video ever could. Then video will start when the slider is completely ready.

Is your website still slow?

If you enabled the optimization options listed above without any effect, try using a cache or CDN. Joomla offers some caching methods by default that you can try. But for WordPress, you will need a 3rd party WordPress plugin, such as WP Rocket or W3 Total Cache.

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. Also, you might make desperate steps when trying to make compromises to get back your fast pages.

Remember, most of the speed depends on the used rich media (both file size and amount). And that is something that you can optimize easily. For example, if you use Smart Slider, you can turn on a couple of 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?

Tags: OptimizeSpeedTips

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.