How can I speed up my website?

Our slider only loads after everything else finished loading on your website to be able to calculate the positions where everything should be, so in a lot of cases the problem is the website's speed, not the slider's! Check out this to know if this is the case.

Be sure to update to the latest Smart Slider 3 version because the new versions might contain speed related improvements.

This documentation can help figuring out why your website is slow!

Lazy loading PRO

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.

Are you interested in finding out how much extra speed you can get by using the lazy loading? Check out this article.

Image size

Don't use too big images, most people watch your slider with full HD (1920*1080px) or smaller monitors, so let that be the high end. Your image's size should be as big, as the viewer will see them on a fullHD monitor. You could also turn on the Optimize images feature at the Slider settings → Optimize tab, so Smart Slider 3 would resize your slide background images automatically.

This option affects the slide background images and slide thumbnails only.

The slide background images are resized to the size of the slider. Unless the "Background image resize" is enabled, in which case the images are resized to the set size.
Thumbnail images are resized to the "Thumbnail image resize" size. Be sure to match this with your thumbnail sizes at the control which displays them.

Important note:

If you need to resize large images the process might reach a limitation on your server. In this case you should resize the images on your computer and upload back the properly sized pictures.

In the Pro version of Smart Slider 3, you can also set device specific images for mobiles and tablets that could help speeding up the loading on those devices.

Image quality

A small image can have a big size too, if its quality is too good. After a given quality people's eyes can't see the difference, so don't use images with too high quality. You can lower your image quality with an image editor program like Photoshop or GIMP.

Also use JPG images, not PNG or other high quality image formats.

Number of slides

If you are using a lot of slides, don't be surprised, that they are taking a long time to load. You shouldn't use more, than ~6 slides to have a good loading time. You can see here, how to check out what is loading for how long on your website, and if you are loading many slides, this is just how much time it takes to load that amount of data.

Device optimization PRO

If you want to optimize the size of your website for tablets and mobile phones too, use device specific images, where you should choose a smaller image for tablet and mobile devices.

Or an even better option would be that you turn off your slider for mobile devices with the Slider settings → Slider size → Show on devices option, maybe create a new slider with only a few slides, put that into the same position, and make it show up on phones. Because for example on phones people don't look at sliders, because the screen is so limited, but rather want to just see the content, you could choose to not to show it at all.

Cache

Use cache in your website, but test it out thoroughly, because not every plugin or extension works properly with them.

You can read more here about the Joomla caches.

JavaScript files

At our Framework settings we have an option to combine the JavaScript files used by us, so you would only have one js file.

Still too slow?

Check out this documentation how to figure out why your website is slow!

Joomla: If your page load for more, than ~30 seconds, then go to the Extensions → Plugin Manager, filter your system plugins, and unpublish them one-by-one. If something is wrong with a code, that can really slow down the website.

Speed up tips when you have many sliders

If you have many sliders on your page, it might help a little bit to use the Pre loaded slider ID feature. For instance, if you have 5 sliders in the page, the slider IDs are in the following order: 2, 43, 12, 5, 9 you can load them like this:

	Slider ID	Pre loaded Slider ID	Sliders loaded (by their ID) when the current slider starts to load
1sth slider	#2		No sliders are loaded yet
2nd slider	#43	2	2
3rd slider	#12	43	2, 43
4th slider	#5	12	2, 43, 12
5th slider	#9	5	2, 43, 13, 5

Be sure to enter a single number to the Pre loaded slider ID field. At every slider, you can define only one slider that the current slider will wait for before it starts to load.