diff --git a/assets/src/js/async-element.js b/assets/src/js/async-element.js
new file mode 100644
index 000000000..0da1e01a6
--- /dev/null
+++ b/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);
+  }
+})();
diff --git a/assets/src/js/async-script.js b/assets/src/js/async-script.js
new file mode 100644
index 000000000..db51ee7f6
--- /dev/null
+++ b/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];
+  }
+})();
diff --git a/assets/src/js/defer-element.js b/assets/src/js/defer-element.js
new file mode 100644
index 000000000..c9eb74dec
--- /dev/null
+++ b/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);
+  }
+})();
diff --git a/assets/src/js/defer-script.js b/assets/src/js/defer-script.js
new file mode 100644
index 000000000..37a34bb37
--- /dev/null
+++ b/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];
+  }
+})();
diff --git a/functions.php b/functions.php
index 869a93e81..ef04fa215 100644
--- a/functions.php
+++ b/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');
diff --git a/webpack.config.js b/webpack.config.js
index b10ae38f9..40657f06e 100644
--- a/webpack.config.js
+++ b/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',