What?

Optimizes CSS asset loading in iframe-based editor canvas to eliminate duplicate network requests across multiple template preview iframes.

Part of woocommerce/woocommerce#60795

Why?

The editor's iframe-based template previews were loading all block assets (CSS files) separately for each iframe, resulting in:

• Hundreds of duplicate HTTP requests when viewing pages with many template previews (even if served from browser cache)
• Browser resource exhaustion with ERR_INSUFFICIENT_RESOURCES errors frequently appearing in console
• Performance degradation and potential hosting execution limits being hit

Example of ERR_INSUFFICIENT_RESOURCES in console:

Example: A page with 10 template preview iframes would make 10 network requests for the same CSS file (even if cached, still consuming browser resources and TCP connections).

Note: While browser memory cache is enabled and returns 304/cached responses, each request still:

• Consumes browser connections and file handles
• Requires cache validation checks
• Can trigger ERR_INSUFFICIENT_RESOURCES when scaled to hundreds/thousands of requests
• Adds overhead to the browser's resource management

This optimization eliminates these requests entirely at the application level, starting the cleanup process to prevent resource exhaustion.

How?

1. Centralized CSS Fetching with Shared Cache

• Introduced fetchCssFile() with URL-level caching (cssUrlCache) to ensure each unique CSS file is fetched only once
• Added in-flight promise tracking to prevent duplicate concurrent requests

2. Inline CSS Injection

• Changed from <link> tags to inline <style> tags in iframes
• CSS is fetched once in the parent document, then injected into each iframe as inline styles
• Eliminates per-iframe network requests while maintaining proper styling

Testing Instructions

1. Open Network tab in browser's devtools
2. Go to Editor > Templates
3. Make sure you use "Grid" view
4. Go through couple of sections in Editor (Active templates, Created templates, Theme templates, Gutenberg, WooCommerce if installed)
5. Expected:
   • The CSS for specific block is fetched up to 2 times total, not fetched over and over again
   • All blocks in preview are styled properly

Testing Instructions for Keyboard

Specific examples - requests decrease

Example for templates including WooCommerce. Obviously the numbers would differ depending on your setup but the important thing is there's significant decrease in number of requests.

Scenario:

1. Refresh the page on Active templates
2. Click through Created templates, TT5, Gutenberg sections
3. Table shows cumulative number of requests at each stage

Gutenberg only:

The difference is extremely more significant when using plugins with multiple blocks anbd custom templates, e.g. WooCommerce

Performance optimisation

I did performance testing with Chrome's Lighthouse tool. Given the cache enabled there's nearly no difference but I still think this step is worth doing before (or along) with other optimisations, like images caching, etc. to further optimise the Editor previews.