How to speed up your site?

In this article

⚠️ Warning: Some these options are available from Smart Slider 3.5, which is currently in Beta. Want to join? Learn how to participate. Make sure you Update to the latest version before proceeding!

💡 Tip: You can check our article how to speed up your slider!

Optimization options in Smart Slider 3

1
Use proper loading type

Make sure you set the Loading type of your slider properly! Find it at Slider settings → Optimize tab.

If your slider is above the fold, use Instant. If it's below the fold, use After page loaded for the optimal result.

2
Convert your images to WebP Pro

You can convert both your background and layer images to WebP. Enable it at Slider settings → Optimize tab.

3
Resize the images

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.

After you enabled the Convert to WebP option, you should enable the Resize setting and create optimized images for small screens. For slide background images, the 1920px Default width is usually enough. But if you're using a boxed slider, change this value to the size of your slider.

If your original images have too high quality, adjust the Quality option to optimize the loading time.

☝️ 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.
4
Don't use too high quality images

A small image can slow your site and have have a big size if its quality is too good. After a given quality people's eyes can't see the difference, but it will take time for the browser to render them. So don't use images with too high quality.

If your images aren't affected by the Resize option, you can lower their quality with an image editor program like Photoshop or GIMP.

5
Lazy Loading Pro

If you're using slide background images, enable the Lazy Loading option. With the Lazy loading option most of your slide backgrounds won't load until the visitor switches to the slide they're on.

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.

Still slow?

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.

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 → Plugins → System - Page 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.

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 Convert to WebP and Resize 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 Convert to WebP and Resize 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 Convert to WebP and Resize 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.

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.