How to speed up your site?

In this article

💡 Tip: You can read our article how to speed up your slider and watch the related tutorial video as well!

Is the slider slow, or rather your entire website?

Smart Slider needs to run JavaScript codes to be able to load. Some of these codes can run during page loading, but others can only run after the page finished loading. Because of this, our slider will be the last thing that shows up on your website. We can't really do anything with this, because we are running our codes as soon as possible. So your entire website's speed defines how long it takes for a slider to show up.

Make sure you update to the latest Smart Slider version before proceeding! Lots of optimization options you'll see below are only available since 3.5.

Optimization options in Smart Slider 3

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.

Convert your images to WebP Pro

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

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. If you're using the Boxed layout then your images shouldn't be wider than the size they show up on your site. In other words, if your slider displays in 1200px wide on the site, you should not use images that are bigger than 1200px.

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.

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.

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.

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.

Remember: the slider is only a part of your page. To achieve a good speed score, you need to make sure every part of the page is optimized and loads fast.

Figure out why the page speed is slow

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

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

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.

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.

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.

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.

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.

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

Default way

Follow these instructions.

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.

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