Choosing performance trade-off when using sliders

A slider makes a page beautiful with better appealing visuals and can impress your clients. It has a cost though in terms of resources it consumes to load and render itself. RabbitLoader provides two options to control the behavior of slider rendering so you can easily choose what is best for your website.

Context

Almost all slider widgets make use of JavaScript to initialize and hence require the heavy script to be loaded first and do DOM manipulation. As the slider placement is usually above the fold, when a visitor lands on the website, the browser has to do a lot of work before the slider can be shown and the visitor is able to see anything meaningful on the screen without scrolling. This is against the Core Web Vitals best practices where it is suggested to show the above-the-fold content to the visitor as fast as possible no matter what the network speed or how powerful the visitor’s device is.

Slider optimization choices

When a slider is encountered on a webpage, RabbitLoader can handle it in two ways-

1. Reduce the priority of the slider and let the other content render fast on the page load. This approach allows the browser to utilize the resource which would have been otherwise consumed by the slider and delay the rendering of the entire page. This is the default behavior set in the RabbitLoader page rules and gives you the best performance score as it aligns with the Core Web Vitals recommendations.
2. Let the slider show up the normal way even if it is blocking the rendering of the entire page. RabbitLoader would just serve the assets from CDN to speed it up and slider optimizations would be skipped. Choosing this option may result in a poor PageSpeed score.

Setting the desired option

Go to Settings -> Page Rules on your account. Click on the modify button for the page rule you want to modify. If you want this new setting to be effective for the entire website, choose the ‘*’ rule. If you are not familiar with it, please read the page rules introduction first.

Toggle the checkbox for the slider and save the rule.

After saving this rule, and purging the cache, the slider behavior would be updated for matching page rules.

Slider alternatives

In many scenarios, we have observed that a slider is used with a single image and only for text overlapping images. Wherever possible, look for a less resource-intensive alternative widget or component to achieve the same goal. This will keep your website fast and healthy page experience for your visitors.