Conditional CSS/JS Loading (Block-Level Lazy Load)

[Castellon-ACM]

Is your feature request related to a problem?

The core strength of GeneratePress and GenerateBlocks is performance. However, some complex block patterns or components (e.g., carousels, tabs, accordions, complex background effects) still load their entire CSS and JavaScript assets on the initial page load, even if they are positioned far down the page (below the fold).

This can negatively impact Initial Load Time and Largest Contentful Paint (LCP), especially on longer pages.

Describe the solution you'd like

We propose adding an advanced option, likely within the Fronblocks Container or relevant blocks, to enable Conditional CSS/JS Loading (or a block-level lazy load) based on viewport visibility.

This feature should work as follows:

1. Block-Level Toggle: A simple switch in the block settings (e.g., under a "Performance" tab) titled "Load assets only when visible in viewport."
2. Asset Handling: When this option is enabled, the plugin's CSS and JavaScript for that specific block instance would only be enqueued and loaded once the block enters the user's viewport, leveraging the Intersection Observer API.
3. Fallback/No-JS Support: Ensure a graceful fallback or static rendering for users with JavaScript disabled, or when the Intersection Observer is not supported.

Describe alternatives you've considered

Currently, the primary alternative is manual code splitting or using separate caching/optimization plugins (like WP Rocket or Perfmatters) which often require complex configuration to achieve this level of granular, block-specific optimization. Integrating this directly into Fronblocks would offer a seamless and user-friendly solution optimized for the GenerateBlocks ecosystem.

Additional context

This feature would significantly improve Fronblocks as a performance-focused extension for GeneratePress, allowing users to build long, complex pages without the typical performance hit associated with heavy block libraries.