diff --git a/app/views/layouts/_asset_reconciliation.html.erb b/app/views/layouts/_asset_reconciliation.html.erb
index 58b08f95c..1ce4d9012 100644
--- a/app/views/layouts/_asset_reconciliation.html.erb
+++ b/app/views/layouts/_asset_reconciliation.html.erb
@@ -20,30 +20,29 @@
   var pageCrayons = document.querySelector("meta[name='proper-stylesheet-crayons']");
   var pageViews = document.querySelector("meta[name='proper-stylesheet-views']");
   var pageMinimal = document.querySelector("meta[name='proper-stylesheet-minimal']");
-
   if (headCacheCheck && headCrayons && // If these elements exist, we can proceed.
     parseInt(pageCacheCheck.content) > parseInt(headCacheCheck.content) && // If page cached-at is larger than head cached-at
     (pageCrayons.content != headCrayons.href || // If the head-cached values do not match page-cached, we replace
       pageViews.content != headViews.href ||
       pageMinimal.content != headMinimal.href)
   ) {
-    var head = document.head;
+    var docBody = document.body;
     // Add new stylesheets if we deem we should.
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel = "stylesheet";
     link.href = pageCrayons.content;
-    head.appendChild(link);
+    docBody.appendChild(link);
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel = "stylesheet";
     link.href = pageViews.content;
-    head.appendChild(link);
+    docBody.appendChild(link);
     var link = document.createElement("link");
     link.type = "text/css";
     link.rel = "stylesheet";
     link.href = pageMinimal.content;
-    head.appendChild(link);
+    docBody.appendChild(link);
 
     // Take a breath and then remove the old ones.
     // If we call this immediately it could cause a flash of unstyled comments.
diff --git a/app/views/layouts/_styles.html.erb b/app/views/layouts/_styles.html.erb
index 50e0d6892..73fcdc7e5 100644
--- a/app/views/layouts/_styles.html.erb
+++ b/app/views/layouts/_styles.html.erb
@@ -1,9 +1,3 @@
-<%# We used to inline a good majority of our CSS %>
-<%# We are currently testing a simpler method of just using "traditional" render-blocking CSS  %>
-<%# The trade-off is the potential to render without blocking the page %>
-<%# But if we in-line everything we lose the ability to cache assets for repeat visitors %>
-<%# This is a production test to see how this might affect UX and/or SEO %>
-
-<%= stylesheet_link_tag "crayons", media: "all", id: "main-crayons-stylesheet" %>
-<%= stylesheet_link_tag "views", media: "all", id: "main-views-stylesheet" %>
-<%= stylesheet_link_tag "minimal", media: "all", id: "main-minimal-stylesheet" %>
+<%= stylesheet_link_tag "crayons", media: "all", id: "#{qualifier}-crayons-stylesheet" %>
+<%= stylesheet_link_tag "views", media: "all", id: "#{qualifier}-views-stylesheet" %>
+<%= stylesheet_link_tag "minimal", media: "all", id: "#{qualifier}-minimal-stylesheet" %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 9388d6990..275fb791b 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -22,7 +22,9 @@
       </div>
     <% end %>
     <%= yield %>
-    <%= render "layouts/asset_reconciliation" %>
+    <% if user_signed_in? %>
+      <%= render "layouts/asset_reconciliation" %>
+    <% end %>
   </div>
 </div>
 <%= render "shell/bottom" %>
diff --git a/app/views/shell/_top.html.erb b/app/views/shell/_top.html.erb
index 0395e8816..a30c2c63f 100644
--- a/app/views/shell/_top.html.erb
+++ b/app/views/shell/_top.html.erb
@@ -17,14 +17,7 @@
         <meta name="monetization" content="<%= SiteConfig.payment_pointer %>">
       <% end %>
       <meta name="environment" content="<%= Rails.env %>">
-      <%= render "layouts/styles" %>
-      <style>
-        .home {
-          position: relative;
-          margin: auto;
-          max-width: 1250px;
-        }
-      </style>
+      <%= render "layouts/styles", qualifier: "main" %>
       <% unless user_signed_in? %>
         <%= javascript_packs_with_chunks_tag "base", "Search", defer: true %>
       <% end %>
@@ -63,6 +56,8 @@
         data-deployed-at="<%= ForemInstance.deployed_at %>"
         data-latest-commit-id="<%= ForemInstance.latest_commit_id %>"
         data-ga-tracking="<%= SiteConfig.ga_tracking_id %>">
+        <%# Repeat of stylesheets in <head> to fix rendering glitch: https://github.com/forem/forem/issues/12377 %>
+        <%= render "layouts/styles", qualifier: "secondary" %>
         <div id="body-styles">
           <style>
             :root {
diff --git a/spec/requests/stories_index_spec.rb b/spec/requests/stories_index_spec.rb
index 59538bcc3..7c775302a 100644
--- a/spec/requests/stories_index_spec.rb
+++ b/spec/requests/stories_index_spec.rb
@@ -12,6 +12,8 @@ end
 
 RSpec.describe "StoriesIndex", type: :request do
   describe "GET stories index" do
+    let(:user) { create(:user) }
+
     it "renders page with article list and proper attributes", :aggregate_failures do
       article = create(:article, featured: true)
       navigation_link = create(:navigation_link)
@@ -159,16 +161,22 @@ RSpec.describe "StoriesIndex", type: :request do
       expect(response.body.scan(/(?=class="crayons-story__cover__image)/).count).to be > 1
     end
 
-    it "has necessary asset reconciliation code" do
-      # Ensure code elements are available for fixing assets if necessary.
-      # app/views/layouts/_asset_reconciliation.html.erb
-      # Basic regression test to ensure we don't accidentally remove something we should not.
-      get "/"
-      expect(response.body).to include('<meta name="head-cached-at"')
-      expect(response.body).to include('<meta name="page-cached-at"')
-      expect(response.body).to include('"main-crayons-stylesheet"')
-      expect(response.body).to include('"main-minimal-stylesheet"')
-      expect(response.body).to include("if (headCacheCheck && headCrayons &&")
+    context "when user signed in" do
+      before do
+        sign_in user
+      end
+
+      it "has necessary asset reconciliation code" do
+        # Ensure code elements are available for fixing assets if necessary.
+        # app/views/layouts/_asset_reconciliation.html.erb
+        # Basic regression test to ensure we don't accidentally remove something we should not.
+        get "/"
+        expect(response.body).to include('<meta name="head-cached-at"')
+        expect(response.body).to include('<meta name="page-cached-at"')
+        expect(response.body).to include('"main-crayons-stylesheet"')
+        expect(response.body).to include('"main-minimal-stylesheet"')
+        expect(response.body).to include("if (headCacheCheck && headCrayons &&")
+      end
     end
 
     context "with campaign hero" do