Smart Slider 3.5 – Blazar

After making the slider creation process smoother in the last big update, it was time to improve the frontend performance as well. We worked hard behind the scenes to make undoubtedly the fastest slider plugin. So we are extremely excited to announce our new major version, the Smart Slider 3.5 ‐ Blazar.

A blazar is a supermassive black-hole in the heart of a galaxy that produces a high-energy jet. (A jet composed of ionized matter traveling at nearly the speed of light.)

What to expect in Smart Slider 3.5

The content you create with Smart Slider makes an amazing and memorable experience for your visitors. For this reason, we’ve spent the last few months working hard on measuring and improving performance. As a result, our slider templates consistently load faster by 30-40%. Our homepage, which we created using sliders and blocks got a 100/100 score. (Field data on desktop shows higher CLS which caused by a bug in Google Chrome. It will be fixed in Chrome 90.)

We’re really proud of the mind-blowing numbers so from now we will demonstrate the result on all slider template page. But what’s new? It would be impossible to mention everything here, but we want to highlight the most important features. Let’s dive in!

Staggering amount of speed improvements

Most of the changes in Smart Slider 3.5 are under the hood, but some hidden changes are worth mentioning. One of our main goals was to reduce JavaScript footprint, which was mostly caused by jQuery. So we have removed the dependency of the jQuery on the frontend and made everything in native JS.

We were able to get huge gains by removing legacy browser support. Although officially we didn’t support Internet Explorer anymore, we left some compatibility codes. Now we’ve removed these codes. Also, we have completely dropped the support of old Android and Safari browsers.

To get great scores in Cumulative Layout Shift we needed one last thing. In Smart Slider we have changed the responsive behavior into a breakpoint-based system. As a result, we were able to solve all the device-specific changes in native CSS with media queries. Additionally, this helped to improve the Total Blocking Time.

WebP

WebP is a modern image format that provides superior compression for images on the web. In the last few years, more and more browsers have started to support it. We got several requests to add WebP support to Smart Slider, but we were waiting until every popular browser started to support it. As Safari got the support with version 14, we were able to implement our optimizations. From now on you can convert your slide background and layer images into WebP format. Additionally, you can also generate optimized images for 3 different screen widths.

Loading type

When you have a huge Total Blocking Time, it usually means that you have too many HTML elements on your page. Loading them slows down the browser’s layouting process. In fact, it can even get worse when a theme or plugin forces the browser to render the layout multiple times. This can happen if they are injecting/removing elements to the DOM with JavaScript. If your slider is not above the fold, simply set the slider’s “Loading type” to “After page loaded”. As a result, that slider will not be a part of the layouting process during the initial page load.

Header preload

You should preload everything which counts as a render-blocking resource. If sliders play an important part in your website, this feature is made for you. It informs the browser to preload the render-blocking resources of Smart Slider. You can enable it in Smart Slider admin → Settings → Framework → Header Preload.

Dropped features

It’s important to realize that lighthouse audits are very strict. But if you follow their suggestions, your website will be fast and load instantly. Unfortunately, there were several features that we had to sacrifice on the altar of speed. In fact, we tried to minimize the count of the dropped features. We made all efforts to keep a feature if it was possible, and worked on optimizing it as much as possible. Unfortunately, we still had to drop some features, because they ruined the CLS score.

We have removed the following features:

• Simple slider type parallax main animation: It caused animation lag
• Thumbnail control
  • Option – Invert group direction: Not possible without JavaScript
  • Option – Minimum thumbnail count: Not possible without JavaScript
• Fade on load: Not needed anymore as sliders are loading very fast
• Dynamic slide height based on the slide background image
• Non-adaptive font resizing. (This will affect layouts where Absolute positioned layers created the content.)
• Px+ values

Frequently asked questions

Do I get this update for free?
Of course. Smart Slider 3.5 is a free update for everyone with an active license. Because we have only one-time payment plans, you will always get the latest updates automatically.

What will I get from this feature as a free user?
The code optimizations are related to the core plugin, so free users can enjoy the same benefits. Added features like WebP support, Header preload and loading type are only available in the pro version.

Tags: FeatureUpdate

About Author

Hi I’m Roland Soos, one of the co-founders at Nextend and the developer of the Smart Slider 3. I’m all about programming, series and books.