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 so easy thing to do, as the non-textual contents are loading slower. Especially, when the file sizes are huge and when there are lots of media files to load.
When it is not optimized correctly Smart Slider 3 can load slowly, but don’t worry 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, when they are really long (just imagine how much effort does it take from the server to return book-length texts, like when you are trying to read The Lord of the Rings online). 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 asked content in a timely manner. The latter problem can only be solved by changing the server host, while the rich media usage can be helped without doing such a serious change.
Why are images causing problems, when it comes to the website’s speed? From the computers’ point of view images are much more complex codes than texts, therefore computers (and servers) need more time to process them. On your computer, you don’t really notice this difference until you are trying to load a text document or image which is at end of the spectrum (large file size, tons of characters or too high quality). But when it comes to a website, the images and videos will always load slower than the texts. And most people are using more images than texts in a slider.
Would you like to know how fast is your site? 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. Once you’ve seen the result, you’re probably wondering what is the optimal page size. According to this article 200kb should be targeted to reach the optimal page size, which is nearly impossible when you are using images. Even properly sized images are about 200kb size, and you haven’t put any other content to the page yet.
The slider is still planned – what to think about?
When you are just planning the slide (or slider), there are a few things you should consider, especially if you are using your very own images that aren’t hosted at some other server. While jpg images can’t have transparent parts and the compression isn’t lossless either, they are loading faster and their file size is smaller than png’s. (The empty parts will be filled with a solid white color, and the compression loss isn’t that noticeable as it might seem reading this article.) When it comes to show images in a slider, jpgs are much more favorable than pngs. The used images don’t have to be razor-sharp either, because that will also increase the file size.
Choose the correct image size
When it comes to the images used in a slider, the file format and the actual file size aren’t the only parts that matter. When you are planning to create a full width slider (slider size: 1920x500px), you should aim to use images where the dimensions are close to this size, or even match it. It isn’t just because of the precious loading time, but because if the browser needs to scale up or down the images, the result won’t always be pretty. (You can find a scaling example here, which I would suggest checking out in multiple browsers to see the difference.)
Use device specific images
You should also consider using device specific images which can be easily set within Smart Slider 3, so you could 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.
Reduce the number of slides
When there are many slides (e.g. more than 6) used in the slider and all of them has a large background image, but it doesn’t really matter if all of them is shown at once, just that images should be displayed in the website, you might think about displaying the images randomly. The Maximum slide count can be set to for example 6 and the Variations can be set to 10 resulting 6 slides in 10 variations. Additionally, the first slide could be randomized, which can be useful when you want to show only one slide at a time, but that should be chosen from the available (loaded) slides.
The slider is already done, it’s slow, so what’s next?
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. 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 17MB (which is the total file size of the three images).
Smart Slider 3 image resizing
When the images can’t be resized one by one as there’s just too many of them, the Optimize tab’s Resize 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 created for this quick speed test.
At the Image dimensions, only the first image was checked.
|Optimization off||Optimization on|
|Page size||17.5 MB||1.5 MB|
As you can see, Smart Slider 3’s image resizing option decreased the page size by ten times and drastically reduced the page loading time.
Additionally, you could turn on the Layer image optimization, which allows you to reduce the size of the images used in your layers. It is only for our image layers (image, transition, caption), so it won’t work on the images you put into the HTML layer, or if you are using CSS codes to put background image on your area layer. When lots of small images are used, the Layer image embed into HTML option can be useful to reduce the amount of request, and make the page load faster. (The cost will be that the page size will be increased, but the amount of request are reduced and it will still make the page load faster, even if the page is a bit heavier on size.)
Smart Slider 3 offers a lazy loading option. (There is also a delayed load ready to be used, which can also speeds up the page, just it is working differently than lazy loading.) The options can be found at the Optimize tab at the Slider settings page, where the image resizing was turned on. Since I have only three images, let’s see how fast the website load when the lazy loading is set to 0 neighbours, which means that only the visible image will be loaded.
|Optimization on||Optimization off|
|Lazy loading off||Lazy loading on||Lazy loading off||Lazy loading on|
|Page size||1.5 MB||560kb||17.5 MB||4.6 MB|
The page size when the lazy loading is on might vary, as it is depending on your first image and the other content of the page.
As you can see using lazy loading and the image resize 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.
When 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 might still be used. Joomla! is offering some caching methods by default, but for Magento and WordPress, you will need a 3rd party plugin.
Since it was obvious at the previous point that to achieve the best performance, the image resize and the lazy loading need to be turned on, therefore the table below will show the result when the these options are used and the caching is turned on or off. The cache plugin used was WP Super Cache and default configurations were used.
|Caching off||Caching on|
As you can see now the page size and loading time wasn’t reduced that drastically as it was reduced before. It is because the cache isn’t some magic code that will make the website zillion times faster; but it did speed it up by almost 30%, which probably would be a little bit more if there would be any other content on the said page.
When the slider was created using three random images, the starting page speed was 15.69s which we managed to reduce to 789s easily. The page size was also drastically reduced from 17.5 MB to 560kb. As you can see, you can make your site to almost ten times faster with only a few extra clicks! Isn’t this great?
The plus one tip
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, their file size matters, 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 said cache files. Why don’t you turn it on if you need a little bit of extra speed?
Speeding up a self-hosted video slider
When you have a video slider where you are using 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.
Additionally, you can make Smart Slider 3 not to call in your video when it is not visible by selecting the Preload – Metadata at the Background video settings (the option available for the video layer, too). For this speed test, I chose three random sample videos from this site.
Please note that Smart Slider 3 does not optimize the videos, the preload option only affects when they are starting to load.
|First slide: Preload – auto,
Other slides: Preload – none
|Preload – auto on all slides|
The page size might vary as it is depending on the size of your first video. (Since my random selection included a 50Mb video, using the optimization could have resulted a page size above 50Mb, and about 10 minutes loading time, as the videos aren’t resized, they just don’t start loading until they needed.)
Realizing that your website has slowed down never feels good. It can cause a headache when you are trying to figure out what is causing 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 size and their amount), and that is something that can be fixed easily. For example, if you are using 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) worth that few extra clicks, isn’t it?
- Device specific images
- Random slides & Maximum slide width
- Layer image optimization
- Layer image embed into HTML
- Lazy loading, delayed load
- Background video
- Smart Slider 3 image resizing
- Smart Slider 3 combined and minified cache files