Skip to content

Performance

Jump to bottom
yoshidaman99 edited this page Mar 21, 2026 · 1 revision

Performance

This plugin is built with loading speed as a top priority.

Architecture

No jQuery Dependency

The carousel JavaScript is written in pure vanilla JS. It does not require jQuery, reducing load overhead for sites that don't already load jQuery.

Conditional Asset Loading

Scripts and styles are registered on page load but only enqueued when a carousel widget is actually rendered on the page. Pages without the widget load zero carousel assets.

Page with widget:  Swiper CSS (~7KB) + Carousel CSS (~1.5KB) + Swiper JS (~40KB) + Carousel JS (~1KB)
Page without widget:  0 bytes loaded

Footer Scripts

All JavaScript loads in the footer (wp_register_script with $in_footer = true), ensuring HTML rendering is not blocked.

Lazy Loading

Images

  • All slide images include the native loading="lazy" attribute
  • Swiper's built-in lazy loading is enabled by default
  • loadPrevNext: true preloads adjacent slides for smooth navigation
  • loadOnTransitionStart: true begins loading during slide transitions

Widget Initialization

The carousel initializes on DOMContentLoaded. For Elementor AJAX-loaded content, the Elementor frontend hooks ensure proper initialization.

Observer Mode

Optional MutationObserver can be enabled to detect dynamic DOM changes and reinitialize the carousel automatically. Useful for pages with dynamic content.

GPU Acceleration

  • CSS will-change: transform on the swiper wrapper
  • transform: translateZ(0) for GPU compositing
  • CSS contain: layout style on the container for rendering isolation
  • Swiper uses CSS transforms exclusively (no left/top animations)

File Sizes

File Raw Gzipped
swiper-bundle.min.js 154 KB ~40 KB
swiper-bundle.min.css 18 KB ~5 KB
carousel.min.js 1 KB ~0.5 KB
carousel.min.css 1.5 KB ~0.5 KB
Total 174.5 KB ~46 KB

Tips for Maximum Performance

  1. Disable effects you don't use — Slide is fastest
  2. Keep slides per view reasonable — avoid high counts
  3. Optimize images — use WebP and proper sizing
  4. Disable Observer Mode unless you need it
  5. Use conditional autoplay — pause on hover saves resources
  6. Avoid excessive slide content — heavy slides slow rendering

Clone this wiki locally