Your home page opens with a slider: five big photos fading into each other, each with a headline and a button. Someone told you sliders are bad for speed. Someone else said yours is fine because the speed plugin “handles it”. You would like a straight answer before you rip out the first thing visitors see.
So, do sliders slow down websites? Usually, yes, and often by more than the owner expects. Not all sliders cost the same, though, and the answer is not always to remove yours. Measure it first. The numbers tend to settle the argument faster than any opinion, including ours.
Where a slider’s weight comes from
The slider’s own code
A slider is not just images. Popular WordPress slider plugins such as Slider Revolution, Smart Slider and MetaSlider, and the scripts many themes bundle, such as Swiper, Slick or Owl Carousel, each bring their own JavaScript and CSS. Some also rely on jQuery. That code has to download, then run, before the slider can show anything properly.
Some slider plugins load their files on every page of the site, not just the one page that has a slider. If your blog posts and contact page are carrying slider code they never use, that is pure waste.
Every slide, not just the first
Five slides usually means five large images. Some sliders load all of them as soon as the page opens, so a visitor who never waits for slide two still downloads it. The total can easily be several times the weight of a single hero image.
Effects and extras
Zoom and pan effects, animated text layers, particles, parallax, and video slides all add more code and more work for the browser. Fancy sliders sometimes load extra font files for their headline layers, separate from the fonts the rest of the site uses.
The two ways a slider hurts what Google measures
The main image appears late
In an ordinary hero, the image is in the page’s HTML, and the browser can start fetching it at once. In many sliders, the first slide’s image is placed by the slider’s script, or marked for lazy loading. The browser only discovers it after the script has run. Since the first slide is usually the largest thing on screen, that delay feeds straight into Largest Contentful Paint.
The page jumps
Before the slider’s script runs, the browser often does not know how tall the slider will be. It may show nothing, or show all slides stacked, and then everything snaps into place. The content below shifts down, which counts against Cumulative Layout Shift and makes visitors lose their place. Our guide to fixing cumulative layout shift explains how that metric works.
Do sliders slow down websites like yours? Measure it
General advice only goes so far. Measure your own page before deciding.
- Test the page as it is. Run PageSpeed Insights on mobile a few times and write down LCP, CLS and Total Blocking Time. Note which element it reports as the LCP.
- List what the slider loads. In Chrome’s developer tools, on the Network panel with the cache off, reload and look for files whose names mention the slider plugin or library. Then switch the filter to images and see whether all slides download before you touch anything.
- Check other pages. Open a page without a slider and look for the same files. If they appear, the slider is costing you site-wide.
- Test without it. On a staging copy, replace the slider with its first slide as a plain image and test again. The difference is the slider’s real cost.
If the home page is slow but the slider turns out to be only part of the story, our post on why only the home page loads slowly covers the other usual suspects, such as feeds and widgets.
If you keep the slider, make it lighter
Sometimes a slider stays for good reasons: the owner likes it, the shop rotates offers every week, or a rebuild is planned for later and nobody wants to redesign the home page twice. Image slider speed can be improved a great deal without removing it. In that case:
- Use one slider system. Sites often have a theme carousel, a page builder carousel and a separate slider plugin all loading. Pick one, remove the others.
- Load its files only where it is used. Some slider plugins have a setting for this. Otherwise a script manager plugin, or a developer, can stop the files loading on pages without a slider.
- Make the first slide load immediately. Turn off lazy loading for the first slide and, if the plugin offers it, mark it as high priority. Let the other slides load later.
- Fix the height. Give the slider a set aspect ratio or minimum height so space is reserved before the script runs.
- Cut the number of slides. Three is plenty for most sites. Each one you remove is one fewer large image.
- Drop the effects. A plain fade or slide is lighter than layered animations and zooms.
- Avoid video slides. They bring the full cost of a video into a component that is already heavy.
- Check the mobile settings. Many sliders can show a smaller image, or hide entirely, on phones. Make sure hidden slides are not still being downloaded.
Compress the slide images as you would any other hero image, and size them for the space they fill. The broader image checks are in our overview of which images slow a website down.
Does anyone see slide three?
Speed is not the only question. Usability writers have argued for years that rotating carousels are a weak way to present information: auto-advancing slides move on before people finish reading, and many visitors never wait past the first one. You can check this on your own site. If your analytics tool tracks clicks on slider buttons, compare clicks on slide one with the others. Often the later slides get very little attention.
If that is true for you, the slider is costing speed for messages that are not landing.
Alternatives that do the same job
One strong image and a clear headline
For most business home pages, one carefully chosen photo, a headline that says what you do, and one button does more than five rotating messages. It is faster, it does not jump, and the message cannot scroll away before anyone reads it.
A static row of offers
If you need to promote several things, show them side by side as cards below the main headline. Everything is visible at once, and on phones the cards stack.
A lightweight swipe row
For product rows or testimonials where a carousel really fits, a simple row that people can swipe sideways can be built with very little code, using modern CSS scrolling features. Some block themes and block plugins offer this without a heavy slider library.
Testimonials as plain quotes
A rotating testimonial slider hides most of the quotes. Two or three short quotes shown together are easier to read and do not need any script.
Removing a slider without leaving a mess
- Write down the content of each slide: images, headlines, buttons and links.
- Build the replacement on a staging copy first.
- Remove the slider’s shortcode or block from every page that uses it. A slider plugin’s admin screen sometimes lists where each slider appears.
- Deactivate the plugin and check the site, then delete it. Check that its files no longer load anywhere.
- Clear all caches and test again under the same conditions as before.
If your slider is not slow but simply broken, with slides not moving or images missing, that is a different problem covered in WordPress slider not working. For speed beyond sliders and images, see the website loading speed guide.
Frequently asked questions
Is a slider in a page builder lighter than a slider plugin?
Not necessarily. A page builder’s carousel widget may reuse a library the builder already loads, which can be lighter than adding a separate plugin. But it still loads every slide’s image and has the same layout and main-image problems. Measure both on a test page rather than assuming either is the light option.
Will lazy loading the slides fix the speed problem?
Lazy loading the second and later slides helps, because those images then download only when needed. Lazy loading the first slide makes things worse, since it is usually the main image visitors see. The slider’s scripts and the layout jump are not affected by lazy loading at all.
Do product carousels on a shop page have the same problem?
They have similar costs: a script library, many product images and possible layout shifts. They are often more useful than a hero slider, because shoppers expect to browse a row of products. Keep them below the first view, make sure the images lazy load, and reserve space so the page does not jump.
My slider plugin says it is optimised for speed. Can I trust that?
Treat it as a starting point and test it on your own page. A plugin can be well built and still load several large images and its own scripts. Compare your page with and without the slider on a staging copy. If the difference is small, keep it. If it is large, the label does not matter.
Deciding whether the slider stays is easier with numbers in front of you. Our website speed service starts with an audit of pages like your home page and gives you a prioritised list of fixes, so you can see where the slider ranks before agreeing to any change.
Next in this series: SVG Icons vs Icon Fonts: Is Font Awesome Slowing You?
