Workaround to address Google fonts blocking the page to be rendered

MoTrPAC · Jul 3, 2024 · 832696f · 832696f
1 parent 61de015
commit 832696f
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/public/index.html b/public/index.html
@@ -43,7 +43,13 @@
     <!-- Warm up connection for better performance in loading Google Fonts -->
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <!-- Google Material Icons -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" media="print" onload="this.onload=null;this.removeAttribute('media');" fetchpriority="high">
+
+    <!-- no-JS fallback -->
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    </noscript>
+
 
     <!-- Clarity tracking code -->
     <script type="text/javascript">
@@ -54,9 +60,6 @@
       })(window, document, "clarity", "script", "igkabpsgqm");
     </script>
 
-    <!-- Siteimprove Analytics -->
-    <script async src="https://siteimproveanalytics.com/js/siteanalyze_80352.js"></script>
-
     <title>MoTrPAC Data Hub</title>
   </head>
   <body>
@@ -74,5 +77,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <!-- Siteimprove Analytics -->
+    <script async src="https://siteimproveanalytics.com/js/siteanalyze_80352.js"></script>
   </body>
 </html>