WordPress SLIDERS create the worst loading time results, compared with the rest of the other features, dragging WP performance down. It's like a WordPress nightmare, where everybody is against loading times. Developers create awesome features, with transition animations and moving CSS and sparkling and shaking and sliding and dissolving and everything....because of we, the users, who like those features. Owners add big pictures, because, users have big resolutions (even on mobile these days!). And since, when it's about content, we, the users always want more....the owners add several big pictures. This is how it starts and you immediately notice a huge increase in page loading time responses; needing immediately some urgent WordPress Speed Up services.
How to improve a WordPress SLIDER loading time performance:
- - Don't use a slider. Put images directly on the page, below the 1st visibility line (below the fold). Use LazyLoading. Problem solved.
- - Don't use a slider on THAT page. Move your slider to a dedicated page. When it's alone, without other content, the page its faster. And not dragging down your landing page. Problem moved elsewhere, where it can be ignored. We prefer this option, as the "main feature" remains unchanged.
- - Don't use a slider DIRECTLY on that page. Move the slider to a hidden area, which is loaded only on user demand, like a "view more" button or "see the preview slider" CTA. Problem solved for 1st time loading but involves user interaction, which sometimes is not guaranteed.
- - Avoid transparent background images. They are at least triple the size of the same colored background picture. Ask a designer to add your desired background color and export the picture as jpg.
- - Consider resolution. Analyse your analytics for screen size. No need to use ultra HD resolution, if nobody has ultra HD resolution.
- - Use a faster Slider plugin. Test a few, that have those slider requirements you enjoy having on your page.
- - Convert images to jpg. Image types like gif or png, generaly are bigger, then their jpg equivalent.
- - Use the same size for the images, to avoid unnecessary browser or slider plugin resize.
- - Optimise images to reduce their size as much as possible.