Google PageSpeed Insights / Lighthouse

In Google PageSpeed Insights or in Lighthouse, GTmetrix you could see some issues with connection to Smart Slider. In this documentation we will cover the ones that we saw at our customers.

First Contentful Paint (FCP) or Largest Contentful Paint (LCP) being increased while Smart Slider is being used on the page

Smart Slider uses JavaScript codes to show up, and this cannot be changed. Some JavaScript codes are only able to run after your entire website loaded, and because of this, your entire website's loading speed defines the loading speed of our sliders. If you would like to get better FCP or LCP values, you will need to try to optimize the loading of your whole website.

Opportunity and Diagnostics

The Opportunity and Diagnostics section can give you suggestions about what should be done on your website. You should open up each suggestion, to check where the issue points to, to Smart Slider or to other parts of your website.

Avoid an excessive DOM size

This message means, that you have too much content on your website. So its not about the slider's HTML code only, but the HTML code of the entire website. To avoid this issue, you should reduce the amount of content you have on your page.

Properly size images / Serve images in next-gen formats / Efficiently encode images

If you see any of this message appearing about slider images, then you should use the Resize and Convert to WebP options at the Optimize tab. We are using PHP image creation codes, which aren't as efficent as computer programs are (like Photoshop or GIMP), so if you would still see any of these issues, try to optimize your images on your computer and use those images within our sliders.

Issues, which cannot be avoided

Reduce unused JavaScript

You can read here about this issue.

Reduce unused CSS

Google's test only checks one page of your website. Most CSS files don't only contain codes for one page, but they address elements of your other pages too. So our CSS files are as optimized as can be, and you should ignore this "Reduce unused CSS" suggestion.

Eliminate render-blocking resources

This issue addresses, that you have many files on your page, and they are blocking each other from loading. Here again, this is not just about our files, but about all files of your website. You could try to use some CSS and JS minification plugin to try to avoid this, but you should test out that plugin thoroughly, because minifications often create errors.

Avoid chaining critical requests

Critical requests are the files that load into your website the quickest. Some of our files could appear within this suggestion's list, as we want your sliders to appear as fast as possible. We don't have an option to change how our files are being called in.

Avoid long main-thread tasks / Reduce JavaScript execution time

A slider needs complex codes, which could make its files appear within these suggestions. Our codes are as optimized as can be, so these issues cannot be avoided.

Avoid serving legacy JavaScript to modern browsers

Some of our JavaScript codes are working in both old and modern browsers, as we are trying to support older browsers too. So this is not an error and you can ignore this suggestion.

To sum up

This video can show you every single optimization option you can do with our sliders. There is nothing else you can do from our end, so if you optimized our sliders and you optimized the rest of your page too, that is the highest score you can achieve on page speed tests.