Merge pull request #1448 from sul-dlss/css-defer

Defer non-critical CSS without changing cascade order

app/assets/stylesheets/earthworks.css

@@ -310,9 +310,8 @@ label.toggle-bookmark {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='14' height='14' viewBox='0 0 28 28' aria-label='Email' role='img'%3E%3Ctitle%3EEmail%3C/title%3E%3Cpath fill='%23006cb8' d='M28 11.1v12.4a2.5 2.5 0 0 1-2.5 2.5h-23A2.5 2.5 0 0 1 0 23.5V11.1c.47.51 1 .96 1.58 1.35 2.6 1.77 5.22 3.53 7.76 5.4 1.32.96 2.94 2.15 4.64 2.15h.04c1.7 0 3.32-1.19 4.64-2.16 2.54-1.84 5.17-3.62 7.78-5.39.56-.39 1.1-.84 1.56-1.36zm0-4.6c0 1.75-1.3 3.33-2.67 4.28-2.44 1.69-4.9 3.38-7.31 5.08-1.02.7-2.74 2.14-4 2.14h-.04c-1.26 0-2.98-1.44-4-2.14-2.42-1.7-4.87-3.4-7.3-5.08C1.59 10.03 0 8.26 0 6.84 0 5.31.83 4 2.5 4h23C26.86 4 28 5.12 28 6.5z'%3E%3C/path%3E%3C/svg%3E");
 }
 
-/* Have to use !important because we load leaflet.css after earthworks.  */
 .leaflet-container {
-  background-color: #d4dadc !important;
+  background-color: #d4dadc;
 }
 
 .facet-limit-active {

app/views/layouts/blacklight/base.html.erb

@@ -27,11 +27,19 @@
     </script>
     <%= opensearch_description_tag application_name, opensearch_catalog_url(format: 'xml') %>
     <%= favicon_link_tag %>
+
+    <!-- viewer styles (non-render-blocking; deferred) -->
+    <%= preload_link_tag "https://cdn.skypack.dev/[email protected]/dist/leaflet.css", as: "style", onload: "this.onload=null;this.rel='stylesheet'" %>
+    <%= preload_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.fullscreen.css", as: "style", onload: "this.onload=null;this.rel='stylesheet'" %>
+    <%= preload_link_tag "https://cdn.skypack.dev/[email protected]/ol.css", as: "style", onload: "this.onload=null;this.rel='stylesheet'" %>
+
+    <!-- main app styles -->
     <%= stylesheet_link_tag "geoblacklight", media: "all", "data-turbo-track": "reload"  %>
     <%= stylesheet_link_tag "earthworks", media: "all", "data-turbo-track": "reload"  %>
     <%= stylesheet_link_tag "https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2024-09-04/styles/sul.css" %>
     <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" %>
 
+    <!-- scripts -->
     <% if defined? Importmap %>
       <%= javascript_importmap_tags %>
     <% elsif defined? Propshaft %>
@@ -66,11 +74,5 @@
 
     <%= render partial: 'shared/footer' %>
     <%= render partial: 'shared/modal' %>
-
-    <% # Non-render blocking css should be outside of the head %>
-    <%= stylesheet_link_tag "https://cdn.skypack.dev/[email protected]/dist/leaflet.css" %>
-    <%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.fullscreen.css" %>
-    <%= stylesheet_link_tag "https://cdn.skypack.dev/[email protected]/ol.css" %>
-
   </body>
 <% end %>