Playing around with defer and sync WP strategies

- This is a POC

assets/src/js/async-element.js

@@ -0,0 +1,12 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('async-elements loaded.');
+  const elements = ['async'];
+
+  for (const element of elements) {
+    const el = document.createElement('h3');
+    el.className = element;
+    el.innerHTML = `${element} element`;
+    document.querySelector('.page-header-title').insertAdjacentElement('afterend', el);
+  }
+})();

assets/src/js/async-script.js

@@ -0,0 +1,7 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('async-script loaded.');
+  for (const element of [['async', 'green']]) {
+    document.querySelector(`.${element[0]}`).style.color = element[1];
+  }
+})();

assets/src/js/defer-element.js

@@ -0,0 +1,12 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('defer-element loaded.');
+  const elements = ['defer'];
+
+  for (const element of elements) {
+    const el = document.createElement('h3');
+    el.className = element;
+    el.innerHTML = `${element} element`;
+    document.querySelector('.page-header-title').insertAdjacentElement('afterend', el);
+  }
+})();

assets/src/js/defer-script.js

@@ -0,0 +1,7 @@
+(() => {
+  /*eslint-disable no-console*/
+  console.log('defer-script loaded.');
+  for (const element of [['defer', 'purple']]) {
+    document.querySelector(`.${element[0]}`).style.color = element[1];
+  }
+})();

functions.php

@@ -489,3 +489,56 @@ function ($canonical_url, $post) {
         return $options;
     });
 }
+
+wp_register_script(
+    'async-script',
+    get_template_directory_uri() . '/assets/build/async_script.js',
+    array(),
+    '1.0.0',
+    array(
+        'in_footer' => false,
+        'strategy' => 'async'
+    )
+);
+
+
+wp_register_script(
+    'async-element',
+    get_template_directory_uri() . '/assets/build/async_element.js',
+    array(),
+    '1.0.0',
+    // true,
+    array(
+        'in_footer' => false,
+        'strategy' => 'async'
+    )
+);
+
+wp_register_script(
+    'defer-script',
+    get_template_directory_uri() . '/assets/build/defer_script.js',
+    array(),
+    '1.0.0',
+    array(
+        'in_footer' => false,
+        'strategy' => 'defer'
+    )
+);
+
+
+wp_register_script(
+    'defer-element',
+    get_template_directory_uri() . '/assets/build/defer_element.js',
+    array(),
+    '1.0.0',
+    // true,
+    array(
+        'in_footer' => false,
+        'strategy' => 'defer'
+    )
+);
+
+wp_enqueue_script('async-element');
+wp_enqueue_script('async-script');
+wp_enqueue_script('defer-element');
+wp_enqueue_script('defer-script');

webpack.config.js

@@ -19,6 +19,8 @@ const mediaQueryAliases = {
 module.exports = {
   ...defaultConfig,
   entry: {
+    defer_async_script: './assets/src/js/defer-async-script.js',
+    defer_async_elements: './assets/src/js/defer-async-elements.js',
     index: './assets/src/js/app.js',
     style: './assets/src/scss/style.scss',
     post: './assets/src/scss/post.scss',