How can I speed up my website?
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.
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 |