Async Css Loading

CHANGELOG.md

@@ -4,6 +4,18 @@ All notable changes to the Nynaeve theme will be documented in this file.
 
 For project-wide changes (infrastructure, tooling, cross-cutting concerns), see the [project root CHANGELOG.md](../../../../../CHANGELOG.md).
 
+## [2.0.14] - 2025-11-24
+
+### Added
+- **Speed Optimization: Async CSS Loading** ([filters.php:77-110](app/filters.php#L77-L110))
+  - Makes non-critical stylesheets non-render-blocking using `media='print' onload` technique
+  - Applies to classic WooCommerce styles, WooCommerce Blocks styles, and Slick carousel CSS
+  - **Impact**: Unblocks render on pages that use these styles
+  - Browser loads CSS without blocking first paint, then swaps to `media='all'` on load
+
+### Documentation
+- Created `docs/nynaeve/SPEED-TWEAKS.md` - Comprehensive speed optimization guide with 6 optimization strategies
+
 ## [2.0.13] - 2025-11-24
 
 ### Removed

app/filters.php

@@ -73,3 +73,38 @@ function my_acf_json_save_point($path)
  * @return string Empty string to remove the legend
  */
 add_filter('gform_required_legend', '__return_empty_string');
+
+/**
+ * Make non-critical stylesheets non-render-blocking
+ * Uses the "print media" technique to load CSS asynchronously
+ *
+ * @param  string  $html  The link tag HTML
+ * @param  string  $handle  The stylesheet handle
+ * @return string Modified HTML
+ */
+add_filter('style_loader_tag', function ($html, $handle) {
+    // List of non-critical stylesheets to load asynchronously
+    $async_styles = [
+        // Classic WooCommerce styles
+        'woocommerce-layout',
+        'woocommerce-smallscreen',
+        'woocommerce-general',
+        'wc-brands-styles',
+        // WooCommerce Blocks styles
+        'wc-blocks-style',
+        'wc-blocks-vendors-style',
+        // Other
+        'slick-carousel',
+    ];
+
+    if (in_array($handle, $async_styles, true)) {
+        // Change media to print, swap to all on load
+        $html = str_replace(
+            "media='all'",
+            "media='print' onload=\"this.media='all'\"",
+            $html
+        );
+    }
+
+    return $html;
+}, 10, 2);

app/setup.php

@@ -204,6 +204,7 @@
  */
 if (class_exists('WooCommerce')) {
     // Theme support calls moved to 'after_setup_theme' hook above
+    // Note: WooCommerce CSS is made non-render-blocking via async loading in filters.php
 
     /**
      * Get WooCommerce mode from theme options