10 Tips for JQuery Slider to perform better
Most of the websites in today’s market have one or more sliders in the home page which rolls images and text. Sliders can be very effective or a major distraction to viewers. Here are 10 tips to make sure sliders are properly configured on your website(s).
1. Use less number of DOM elements in a slide.
Example 1: If title and description is needed to each image, instead of adding them to each slide mark it in “Global Caption”. It will not be animated which improves the performance.
Example2: If “Pin it” button is needed to each slide, then use one button out of the slider and switch its URL with slider API when slide changes.
Iframes are complex DOM elements, so avoid them inside the slider especially on mobile.
2. Avoid large images on mobile devices
Do not use images larger than 1200×700 px as resizing and animating hardware-accelerated image is a resource intensive process and can easily crash the device browser. Please use different image sizes for every type of device. Consider changing image URL by modifying rsImg sources before slider initialization.
3. Define the size of an image manually
If scaling your images are simple and you do not need lazy-loading, autoPlay, autoHeight, then remove rsImg class from img element and resize it with CSS. Royal Slider will not apply any properties to such image and it will load progressively.
4. Avoid AutoHeight
Do not enable autoHeight when it is not necessary, it adds repainting and calculations to the process. Instead, use autoScaleSlider or set fixed size via CSS media queries.
5. ‘Fade’ for monitors, ‘Move’ for small devices
Especially for large sliders its good practice to use fade transition on wide desktop monitors and move for tablets and phones
6. Don’t overuse autoPlay
Avoid multiple sliders on page with autoPlay enabled. Avoid very short delay to auto play a video.
7. Use Tabs instead of Thumbnails when no scrolling is required
Creating navigation that will never require any scrolling tampers the performance, it’s always better to use tabs instead of thumbnails (controlNavigation:’tabs’). Tabs are much lighter and got the same markup.
8. Disable “fullscreen” option on small devices
If image is already squished, there is no point to make it even larger. The simplest way to disable it is hide fullscreen button via CSS.
9. Use different tags to the images in gallery
In a gallery with lazy-loading tag the first 3 images with IMG and others with A tags. HTML5 browsers are smart and will load IMG tags that are in DOM at start much faster.
10. Use destroy () to remove slider dynamically
If you’re using slider on ajax site, or you just load it dynamically – always call sliderInstance.destroy () before it’s removed from page, as this will remove all events that slider added and prevent memory leaks.