Slider Performance Tips

Tips that you should follow to make RoyalSlider transition more fluid and faster. All of them are optional, and slider can work fine even if you break all of them at once.

Reduce number of DOM elements in slide.

Example: If you need title and description near each image - don't put it in each slide - put this part in "Global Caption", it'll not be animated and you'll save a lot of performance.

Another example: if you need to have "Pin It" button in each slide - don't put it in every slide - put one button outside of the slider and switch its URL via slider API when slide changes.

Don't forget that iframes are complex DOM elements, so try to avoid them inside slider, especially on mobile.

Try not to use `loop` option when you have low number of slides

By "low number" I mean <=4. It'll cause blinking if user navigates fast as slides will need to be reordered after each swipe. Use loopRewind instead.

Don't put images bigger than 1200x700px on mobile devices

As resizing and animating hardware-accelerated image is resource intensive process and can easily crash mobile browser. Ideally serve different image sizes for every type of device. You may change image URL by modifying rsImg sources before slider initialization.

Optimize option numImagesToPreload

The bigger value in option numImagesToPreload - the less frequent slides are reordered - the less lags you have.
But:

  • It also increases memory usage - so be careful and test it on devices with low memory limit, eight 1000x600 hardware-accelerated images in DOM at once can easily crash old iPhone (even hidden by overflow).
  • Option sets number of slides on each side - e.g. if you set it to 2 - slider will load current image, next two and previous two. If the loop is enabled and current slide is the first, it'll load 1, 2, 3 and last two images.

Always define size of images manually (if possible)

To take advantage of progressive image loading. Read more.

If scaling of your images is simple and you do not need lazy-loading, + If you don't need autoPlay that plays only after image is loaded, and autoHeight is disabled. SImply remove rsImg class from img element and resize it by yourself just with CSS. RoyalSlider will not apply any properties to such image and it'll load progressively.

Try to avoid option autoHeight

This is super-optional. Just don't enable it when you actually don't need it, it adds additional repaints and calculations. Use autoScaleSlider or set fixed size via CSS media queries.

`Fade` transition works faster than `move`

Especially for large sliders. It's good practice to use fade transition on wide desktop monitors and move for tablets and phones.

Don't overuse autoPlay

Avoid multiple sliders on page with turned on autoPlay. Don't set too short delay.

Use Tabs instead of Thumbnails when no scrolling is required

If you're creating navigation that will never require any scrolling - use tabs, instead of thumbnails (controlNavigation:'tabs'). Tabs are much lighter, but have exactly the same markup.

Disable "fullscreen" option on small devices

If image is already squished, there is no point to make it even more larger. The simplest way to disable it is hide fullscreen button via CSS.

If you have gallery with lazy-loading make your first 1-3 images IMG tags and other A tags

HTML5 browsers are smart and will load IMG tags that are in DOM at start much faster.

Disable CSS3 transitions to reduce memory usage dramatically

You can turns them off by adding option allowCSS3:false (in WP version it is in Misc section of options). Disabling this will reduce memory usage, but increase CPU usage during "sliding". Also, it will make sliding animation much less smooth.

If you are removing slider dynamically use destroy()

If you're using slider on ajax site, or you just load it dynamically - always call sliderInstance.destroy() before it's removed from page, this method will remove all events that slider added and prevent memory leaks.

Optimize look of slider before it's initialized

This is not actually "performance" tip. But don't forget to style slider properly when JS is enabled or hide it completely if you wish to avoid "blink" of content before slider is initialized. Read more


Found a mistake in article? Know how to improve it? Please open support ticket.