Documentation - Performance.

To avoid any visual “flash” (FOUC), Marssel identifies and generates as a priority the styles of the “critical” elements of your page (such as the header, navigation, or footer).

This feature (managed by `getCriticalElements` and `processCriticalElements`) uses a predefined list of selectors header, nav, [role="navigation"] .no-lazy) to find these elements and inject their styles synchronously before the rest of the page.

This ensures that the main structure of your site is styled immediately upon loading, providing a better user experience (LCP). The configuration of critical selectors is done when Marssel is initialized.

For very long pages, it is not necessary to generate styles for elements that are outside the field of view.

When the lazyload: true option is enabled during configuration, Marssel uses an `IntersectionObserver` to only process an element's Marssel classes when it approaches the viewport.

This significantly reduces the size of the initial stylesheet and the processing time on page load, improving Time to Interactive (TTI).

// Initialization example (conceptual)
new Marssel({
    lazyload: true,
    criticalsSelectors: ["header", "footer", ".nav-main"]
});

Marssel implements an intelligent caching system which considerably speeds up subsequent page loadings, particularly effective when navigating between pages or refreshing the same page.

Functioning

The cache automatically saves in sessionStorage:

• Generated CSS rules
• The map of selectors and declarations
• The list of classes already processed

When loading a new page (or refresh), Marssel instantly restores this data from the cache rather than regenerating it, drastically reducing initial processing time.

Compatibility with Lazyload

The cache is designed to work in harmony with lazyload:

• Without lazyload : All styles on the page are cached
• With lazyload : Only classes already loaded (visible) are cached

Verification and Debug

You can check the cache operation via the console:

// Check cache contents
window.debugCache = () => {
    const cache = sessionStorage.getItem('marssel_styles_cache');
    if (cache) {
        const parsed = JSON.parse(cache);
        console.log('📦 Cache trouvé:', {
            version: parsed.version,
            timestamp: new Date(parsed.timestamp).toLocaleString(),
            cssLength: parsed.css.length + ' caractères',
            classesCount: parsed.loadedClasses.length + ' classes',
            selectorsCount: Object.keys(parsed.selectorMap).length
        });

        // View cached classes
        console.log('Classes:', parsed.loadedClasses);
    } else {
        console.log('❌ Aucun cache trouvé');
    }
};

// Clear cache manually
window.marssel.clearStyleCache();

// Check currently loaded classes
console.log(window.marssel.styleManager.loadedClasses);

Automatic cache invalidation

The cache is automatically invalidated in the following cases:

• Changing HTML : If the classes in the DOM have been modified (addition, deletion, modification), the cache is automatically invalidated
• Version change : The cache is invalidated during a Marsel update
• Closing the browser : The cache uses sessionStorage and is deleted automatically

Limitations

• Storage : sessionStorage (≈5MB per domain)
• Performance : Hash check adds ~1-2ms to initial load (negligible)