Performance & Best Practices

What the plugin does for you

• Nothing loads for switched-off modules and blocks. Disabled modules register no blocks, scripts or styles (Plugin Settings).
• Styles load only on pages that use a block. Each block brings its own small stylesheet.
• Per-block styling is compiled to minimal CSS. Only values you set produce CSS; identical styles share rules; unstyled blocks add nothing.
• Server rendering. Blocks are rendered as HTML on the server — good for speed and SEO, and content shows even before (or without) JavaScript.
• Tiny, dependency-free scripts, loaded only with the blocks (and features) that need them. No jQuery (except where WooCommerce’s own scripts are used), no chart library.
• Click-to-load embeds. YouTube and Vimeo players load only when a visitor presses play; Google Maps can wait for a click.
• Self-hosted font, loaded only on pages with blocks — or none at all with “Inherit from theme”.
• Responsive images with srcset so phones download smaller files; images below the first screen are lazy-loaded by WordPress.

Which blocks use JavaScript?

No JavaScript at all: Container, Heading, Text Editor, Image, Image Box, Icon, Icon Box, Button, Divider, Spacer, HTML, Shortcode, Accordion, Timeline, Process Steps, Call to Action, Flip Box, Author Box, Dynamic Content, Team Member, Testimonials, Breadcrumbs, Product Search, Store Page, Form Styler, User Profile, Social Icons.

A small script, only on pages that use them: Video, Google Maps, Tabs, Slider, Content Toggle, Counter, Progress Bar, Posts, Gallery, Before / After, Video Gallery, Table of Contents, Products, Product Categories, Add to Cart, Mini Cart, Login Form, Advanced Search, Taxonomy Filter, WhatsApp Chat, Chart, Progress Chart, Statistics Cards. Some of these load their script only for certain settings — see “Loads JavaScript on the site” in each block’s At a glance box.

Best practices

• Switch off modules you don’t use.
• Size images sensibly. Upload images at about twice the displayed width, no bigger; choose a fitting Resolution in Image, Gallery and Posts blocks.
• Keep click-to-load on for videos and use a poster image.
• Use carousels sparingly and avoid autoplay on long pages.
• Limit posts per page and use “Load more” instead of very long lists.
• Chart links: choose the longest “Check for new data” interval that fits your data.
• Prefer the Container’s Gap over many Spacer blocks for consistent spacing.
• Reuse designs as patterns instead of restyling each block by hand.
• Use a page cache (most hosts provide one) — see Compatibility for visitor-specific blocks.