How to speed up your site?

In this article

How does Smart Slider 3's basic loading work?

Smart Slider 3 only loads after everything else finished loading on your site. It needs to be like this, because the slider needs to be able to calculate the positions, where everything should be and that can only happen after the page has finished loading.

In a lot of cases, when the slider feels slow, it's actually the website's speed that's slow. Learn how to check if this is the case.

Optimization options in Smart Slider 3

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

1
Lazy Loading Pro

At Slider settings → Optimize → Lazy load you can choose to Lazy Load your slide background images, so most of these large backgrounds won't load with the initial page load. With this options, you can make your slider only load as many slide background images at once as you want.

Check our article to learn how much extra speed you can get by using the lazy loading.
2
Image size

You shouldn't use too big images in your slider. "Too big" means both the file size, and the resolution. Most people watch your slider with full HD (1920*1080px) or smaller monitors, so let that be the high end. You could also turn on the Optimize slide 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 Resize background is enabled, in which case the images are resized to the set size.
  • Thumbnail images are resized to the Thumbnail width and Thumbnail height size. Be sure to match this with your thumbnail sizes at the control which displays them.
☝️ 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.
3
Use device optimized images Pro

You can set tablet/mobile image at the Image manager, next to the Slide background image. If you have lots of layers, the Optimize layer images at Slider settings → Optimize can help a lot by resizing your layer images for mobile and tablet users.

4
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. But it will take time for such images to be rendered by the browser. 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.

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

6
JavaScript files

At the Global settings → Framework settings we have an option to Combine the JavaScript files that are needed for the slider. So they would be in one file only.

☝️ Note: If you use a optimization plugin, or your caching plugin has some sort of JavaScript combine option, you shouldn't use Smart Slider 3's Combine setting, but leave it to the optimization plugin.

Use a good caching plugin

A good caching plugin can help a lot with your site's speed. If you're using WordPress, then some of the most popular caching plugins are: W3 Total Cache, WP Fastest Cache and WP Rocket.

If you're using Joomla, then it has build in caches, which you can use. Of course, you can use a cache extension if you prefer that. Joomla's built in caches:

1
Extensions → Plugin Manager → System → Cache

This is looking at the whole code of your website, makes a copy of it, and it will show that until you manually clear the cache in the System → Clear cache.

2
System → Global Configuration → System → Cache

It's totally separated from the other one. This cache only saves the modules, but not the content (articles, webshop product pages, etc.). This cache can be cleared in the System → Clear cache, or when the System → Global Configuration → System → Cache Time has past, it happens automatically. There are two options in it:

  • Conservative caching: This works the way that a visitor comes to a page Joomla checks, if there is a cached version of that page if there is, it will show it. If there isn't, or the cache time has past, it will create a new one.

    Another visitor comes to the same page if the cached page that was created at the other visitor is still available, that will be shown. If not, a new cache will be created.

    Think about the cache time at the Conservative caching too, if it's too small, and you don't have visitors that often, it could have more negative effects, than positive ones.

  • Progressive caching: This works the way that a visitor comes to a page Joomla checks, if there is a cached version of that page for this visitor. If there is, it will show it. If there isn't, or the cache time has past, it will create a new one.

    Another visitor comes. Joomla checks, if there is a cached version of that page for this new visitor. If there is, it will show it. If there isn't, or the cache time has past, it will create a new one.

    Basically it makes a new cache file for every single visitor, so this progressive caching only makes your website faster, if the same visitor comes to the same page within the lifetime of the cached version of the page. If this doesn't happen, it is worse than disabling the cache, because the website not only has to load everything, that will load during disabled cache, but it also has to create cache. For every single visitor.

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 After page loaded feature. You can find it at Slider settings → Loading → Loading type.

Figure out why the page speed is slow

Sometimes websites are becoming slower and to figure out what is causing the issue, use Chrome or Firefox.

Go to the page with the problem → press F12 → click on Network refresh the page (in Windows with Ctrl + F5 [hard refresh to not load anything from the browser's cache.]) This will write out what is loading for how long on your website, like this:

Common problems and solutions

1
Too big images are used

When there are too big images used, they have noticeably longer loading times.

Solution

You should check out its filesize and don't use bigger, than 1MB images. If they are PNG images, use JPG instead if it's possible, because they have smaller filesizes.

If these images were used in the background of your slides, we have an Optimize slide images option, what you can use within our system to resize your images to the slider's size or to the given size.

⚠️ Warning: If you use too big images, the memory_limit on the server can be easily reached when your images are resized. This can cause blank or messed up pages on your frontend. The admin area should still stay fine, so you can turn the Optimize slide images off. You should resize the images on your computer, and upload the optimized images back. You'll probably need to re-select them at the slides where you used the too big images.
2
Too high quality images are used

If your image is loading for a long time while it doesn't have a big filesize, it means the image has too high quality and the time you see there is the time your browser takes to draw the image into the screen.

Solution

If these images were used as the background of your slides, we have an Optimize slide images option, which has a Quality setting. You can use this option within our system to resize your images to the slider's size or to the given size.

💡 Tip: PHP image resizing isn't always the best and you might want to have better quality. In this case use an image editor, like Photoshop or GIMP to lower your image's quality, which will give a much better result.
3
Too many images are used

If you have many images, the waiting time (green part) can take longer, than the actual loading of the image. This happens, because not all your files can load together, but they have to wait for each other.

Solution

If these images were used as the background of your slides, then use our Lazy load Pro option. It makes your slider load only the given number of slide background images. For example, you could make the slider load 1 image and then the other ones would only load, when they have to.

Another solution can be to reduce the number of slides you have. We don't suggest having more than 10 slides.

If your images were used as layers and their file sizes aren't big, like they are under 100KB, give the Base64 embed option a try. This option will replace your images with base64 HTML codes. This way your images don't have to come one-by-one from the server, but they would be included in the HTML code of your website, so there would be no connection time to the server for each image. You should probably only use values under 100KB in here, because this option basically changes your images into texts and with bigger files this text can become quite long and at that point connecting to the server and getting the image could be faster.

4
Time to first byte

The first row you see in this loading is the time to first byte value. This is the time your website's PHP codes are running on the server and once that is done, this loading is finished and the website's HTML structure can be started being built up by your browser.

If this seems to be too long, you can try to use cache or CDN on your website. This could help, because the way cache plugins are working is, that they are saving down the HTML code of your website and they won't allow the PHP codes to run, they will just display the HTML code they are storing. Since PHP codes wouldn't run like this, only a few asking down this HTML code, your site will need to spend less time on the server.

5
Too many CSS and JS files

In frameworks, like WordPress or Joomla it is common, that there are a ton of CSS and JS files called in, as each plugin/extension needs its own file. These have to wait for each other, also each file has to connect to the server, which can take some time.

Solution

Use a CSS/JS optimization plugin, which combines these files as well.

💡 Tip: Make tests to see if everything works well! The JavaScript file combination/minification often causes problems in plugins/extensions, but the CSS combination/minification can create some bad results too.

All of Smart Slider 3's files are minified by default, but you can Combine them.

6
Missing files

When there are missing files, it can take a while until your server stops trying to load them and this can take up a lot of loading time too. These are marked red and the status is probably 404 or 500, also you can copy out the link to check it in your browser.

Solution

Either remove it from your website where those files are called in or make sure you will have those files in the places from where they are called in.

How to use CDN with Smart Slider?

To use CDN on your website, you will have to set it up globally to make your whole website use your CDN address. Once that's done, you should go to Global settings → General and press Clear Cache to clear the slider's cache.

WordPress

Open up your wp-config.php file, and change the WP_CONTENT_URL constant to the CDN url, which points to your wp-content folder:

 define('WP_CONTENT_URL', 'http://cdn.example.com/wp-content');

Then go to Global settings → General and press Clear Cache to clear the slider's cache.

Joomla

1
Default way

Follow these instructions.

2
JCH Optimize

If you're using JCH Optimize to set the CDN use the Translate URL feature with the following settings:

From /images/
To https://your-cdn-url.com/images/

Then go to Global settings → General and press Clear Cache to clear the slider's cache.

Translate URL

Our slider is using urls pointing to your website. If you want to change all urls to your CDN url, go to Global settings → General and use the Translate Url option, which can replace all urls used by us to any url you give.

From: yoursite.com
To: cdnsite.com

If you only want to replace the urls of images, you will probably have them inside the /wp-content/uploads/ folder WordPress or /images/ folder Joomla. You could replace these urls:

From: yoursite.com/wp-content/uploads/
To: cdnsite.com/wp-content/uploads/

Then press Clear Cache at the top of the page to clear the slider's cache.

Google PageSpeed Insight

You can make some of the "error" messages disappear by turning on the Async option at the Global settings → Framework. If your site already loads jQuery on the frontend you can turn off ours.

GTmetrix, etc.

We have checked our sliders with all sort of website speed tests, and modified our code to them, so they are as optimized, as they can be. You might see some errors, like "image dimensions not specified", because these page speed tests are limited, and one limitation they have is, that they cannot detect when image dimensions are supplied through CSS, like in our sliders, so the speed test report is wrong.

Mobile-Friendly Test

When Google Mobile Friendly requests a site it often does not wait for the necessary resources (CSS or JS files and images) to load fully. It simply finishes the test after a given time, and because of that, the results are often not accurate.

On real phones this thing doesn't happen, so we suggest checking your site on a real phone and make sure everything is correct there.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.