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