diff --git a/defer-css-unoptimized.html b/defer-css-unoptimized.html
index ec892fc..3ea8aba 100644
--- a/defer-css-unoptimized.html
+++ b/defer-css-unoptimized.html
@@ -4,7 +4,35 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Unoptimized</title>
-  <link rel="stylesheet" type="text/css" href="defer-css.css">
+  <style>
+    .accordion-btn {
+      width: 100%;
+      text-align: center;
+      font-size: 18px;
+      cursor: pointer;
+      color: #444;
+      background-color: #add8e6;
+      padding: 19px;
+      outline: none;
+      border: none;
+      border-radius: 2px;
+    }
+
+    .container {
+      display: none;
+      padding: 0 18px;
+      background-color: white;
+      overflow: hidden;
+    }
+
+    h1 {
+      word-spacing: 5px;
+      color: blue;
+      font-weight: bold;
+      text-align: center;
+    }
+  </style>
+  <link rel="preload" as="style" href="defer-css.css" onload="this.onload=null;this.rel='stylesheet'">
 </head>
 <body>
 
diff --git a/defer-css.css b/defer-css.css
index 1ecbbb8..35b407d 100644
--- a/defer-css.css
+++ b/defer-css.css
@@ -1,28 +1,8 @@
 /* Copyright 2018 Google LLC. SPDX-License-Identifier: Apache-2.0 */
-.accordion-btn {
-  width: 100%;
-  text-align: center;
-  font-size: 18px;
-  cursor: pointer;
-  color: #444;
-  background-color: #add8e6;
-  padding: 19px;
-  outline: none;
-  border: none;
-  border-radius: 2px;
-}
-
 .accordion-btn:hover {
   background-color: #87cefa;
 }
 
-.container {
-  display: none;
-  padding: 0 18px;
-  background-color: white;
-  overflow: hidden;
-}
-
 p {
   font-size: 18px;
   font-family: Arial, Helvetica, sans-serif;
@@ -49,16 +29,3 @@ p {
   text-overflow: clip;
   color: #228b22;
 }
-
-h1 {
-  word-spacing: 5px;
-  color: blue;
-  font-weight: bold;
-  text-align: center;
-}
-
-h3 {
-  word-spacing: -5px;
-  background-color: #eee;
-  text-align: center;
-}
