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
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.
- 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
2- slider will load current image, next two and previous two. If the
loopis 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
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 tagsHTML5 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
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.