Fixes #350: Use WP 6.3 core method to async load assets

web/app/themes/gds/app/Providers/AsyncStyleLoaderServiceProvider.php

@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Providers;
+
+use Illuminate\Support\ServiceProvider;
+
+class AsyncStyleLoaderServiceProvider extends ServiceProvider
+{
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        add_filter('style_loader_tag', [$this, 'styleLoaderTag'], 999, 2);
+    }
+
+    /**
+     * Load styles asynchronously.
+     */
+    public function styleLoaderTag(string $html, string $handle): string
+    {
+        if (is_admin()) {
+            return $html;
+        }
+
+        $strategy = wp_styles()->get_data($handle, 'strategy');
+        if ($strategy !== 'async') {
+            return $html;
+        }
+
+        $dom = new \DOMDocument();
+        $dom->loadHTML($html);
+        /** @var \DOMElement $tag */
+        $tag = $dom->getElementsByTagName('link')->item(0);
+        $tag->setAttribute('media', 'print');
+        $tag->setAttribute('onload', "this.media='all'");
+        $tag->removeAttribute('type');
+        $tag->removeAttribute('id');
+        $html = $dom->saveHTML($tag);
+
+        return $html;
+    }
+}

web/app/themes/gds/app/Providers/PerformanceServiceProvider.php

@@ -21,6 +21,7 @@ public function register()
 
         add_action('wp_enqueue_scripts', [$this, 'replaceWithModernJquery']);
         add_action('wp_enqueue_scripts', [$this, 'maybeRemoveJquery'], 100);
+        add_action('wp_enqueue_scripts', [$this, 'asyncLoadScripts'], 100);
         add_action('wp_print_styles', [$this, 'dequeueAssets'], 100);
     }
 
@@ -56,6 +57,32 @@ function_exists('is_checkout') && (is_checkout() || is_cart()),
         }
     }
 
+    public function asyncLoadScripts(): void
+    {
+        // Async styles
+        collect([
+            'dashicons',
+            'debug-bar',
+            'shc-show-env',
+            'wp-block-library-theme',
+            'wp-smart-crop-renderer',
+        ])->each(fn (string $handle) => wp_style_add_data($handle, 'strategy', 'async'));
+
+        // Async scripts
+        collect([
+            'genero-cmp/js',
+        ])->each(fn (string $handle) => wp_script_add_data($handle, 'strategy', 'async'));
+
+        // Deferred scripts
+        collect([
+            'admin-bar',
+            'debug-bar-js',
+            'moxiejs', // gravityforms
+            'plupload', // gravityforms
+            'gform_gravityforms_utils', // gravityforms
+        ])->each(fn (string $handle) => wp_script_add_data($handle, 'strategy', 'defer'));
+    }
+
     /**
      * Replace core jQuery with theme's jQuery.
      */

web/app/themes/gds/app/setup.php

@@ -20,9 +20,8 @@
  * @return void
  */
 add_action('wp_enqueue_scripts', function () {
-    wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), [], null, true);
+    wp_enqueue_script('sage/app.js', asset('scripts/app.js')->uri(), [], null, ['strategy' => 'defer']);
     wp_add_inline_script('sage/app.js', asset('scripts/manifest.js')->contents(), 'before');
-
     if (is_single() && comments_open() && get_option('thread_comments')) {
         wp_enqueue_script('comment-reply');
     }

web/app/themes/gds/config/assets.php

@@ -40,36 +40,4 @@
             // 'bundles' => get_theme_file_path('public/entrypoints.json'),
         ]
     ],
-
-    'deferred_scripts' => [
-        'sage/vendor.js',
-        'sage/app.js',
-        'sage/editor.js',
-        'comment-reply',
-        'wp-embed',
-        'debug-bar-js',
-        'admin-bar',
-        'debug-bar',
-        'wp-genero-cookieconsent/js',
-        'moxiejs', // gravityforms
-        'plupload', // gravityforms
-    ],
-
-    'async_scripts' => [
-        'sage/fontawesome.js',
-        'sage/gds.js',
-    ],
-
-    'async_styles' => [
-        // 'sage/fonts.css',
-        'dashicons',
-        'debug-bar',
-        'ptam-style-css',
-        'ptam-style-css-editor',
-        'shc-show-env',
-        'wp-block-library-theme',
-        'wp-smart-crop-renderer',
-        'wp-genero-cookieconsent/css/library',
-        'wp-genero-cookieconsent/css',
-    ],
 ];