Refactor perf issues

src/components/Analytics/Analytics.astro

@@ -14,29 +14,4 @@
 
   gtag('js', new Date());
   gtag('config', 'UA-139582634-1');
-
-  document.addEventListener('click', (e) => {
-    let trackEl = e.target;
-    if (!trackEl.getAttribute('ga-category')) {
-      trackEl = trackEl.closest('[ga-category]');
-    }
-
-    if (!trackEl) {
-      return;
-    }
-
-    const category = trackEl.getAttribute('ga-category');
-    const action = trackEl.getAttribute('ga-action');
-    const label = trackEl.getAttribute('ga-label');
-
-    if (!category) {
-      return;
-    }
-
-    window.fireEvent({
-      category,
-      action,
-      label,
-    });
-  });
 </script>

src/components/BestPracticeHeader.astro

@@ -1,7 +1,7 @@
 ---
-import BestPracticeHint from './BestPracticeHint.astro';
 import Icon from './AstroIcon.astro';
 import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
+import BestPracticeHint from './BestPracticeHint.astro';
 
 export interface Props {
   title: string;
@@ -42,9 +42,6 @@ const isBestPracticeReady = !isUpcoming;
               data-popup='login-popup'
               class='hidden inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
               aria-label='Download Roadmap'
-              ga-category='Subscription'
-              ga-action='Clicked Popup Opener'
-              ga-label='Download Roadmap Popup'
             >
               <Icon icon='download' />
               <span class='ml-2 hidden sm:inline'>Download</span>
@@ -58,9 +55,6 @@ const isBestPracticeReady = !isUpcoming;
               data-auth-required
               class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
               aria-label='Download Roadmap'
-              ga-category='Subscription'
-              ga-action='Clicked Popup Opener'
-              ga-label='Download Roadmap Popup'
               target="_blank"
               href={`/pdfs/best-practices/${bestPracticeId}.pdf`}
             >
@@ -75,9 +69,6 @@ const isBestPracticeReady = !isUpcoming;
           data-popup='login-popup'
           class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
           aria-label='Subscribe for Updates'
-          ga-category='Subscription'
-          ga-action='Clicked Popup Opener'
-          ga-label='Subscribe Best Practice Popup'
         >
           <Icon icon='email' />
           <span class='ml-2'>Subscribe</span>

src/components/Footer.astro

@@ -84,27 +84,18 @@ import Icon from './AstroIcon.astro';
             <a
               href='https://thenewstack.io/category/devops?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
               target='_blank'
-              ga-category='PartnerClick'
-              ga-action='TNS Referral'
-              ga-label='TNS Referral - Footer'
               class='text-gray-400 hover:text-white'>DevOps</a
             >
             <span class='mx-1.5'>&middot;</span>
             <a
               href='https://thenewstack.io/category/kubernetes?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
               target='_blank'
-              ga-category='PartnerClick'
-              ga-action='TNS Referral'
-              ga-label='TNS Referral - Footer'
               class='text-gray-400 hover:text-white'>Kubernetes</a
             >
             <span class='mx-1.5'>&middot;</span>
             <a
               href='https://thenewstack.io/category/cloud-native?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
               target='_blank'
-              ga-category='PartnerClick'
-              ga-action='TNS Referral'
-              ga-label='TNS Referral - Footer'
               class='text-gray-400 hover:text-white'>Cloud-Native</a
             >
           </p>

src/components/Navigation/Navigation.astro

@@ -5,7 +5,7 @@ import AccountDropdown from './AccountDropdown.astro';
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
   <nav class='container flex items-center justify-between'>
-    <a class='flex items-center text-lg font-medium text-white' href='/'>
+    <a class='flex items-center text-lg font-medium text-white' href='/' aria-label="roadmap.sh">
       <Icon icon='logo' />
       <span class='ml-3 hidden md:block'>roadmap.sh</span>
     </a>

src/components/RoadmapHint.astro

@@ -9,7 +9,10 @@ export interface Props {
 const { roadmapId, tnsBannerLink = '' } = Astro.props;
 
 const hasTNSBanner = !!tnsBannerLink;
-const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
+const roadmapTitle =
+  roadmapId === 'devops'
+    ? 'DevOps'
+    : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
 ---
 
 <div
@@ -23,16 +26,13 @@ const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).
 >
   {
     hasTNSBanner && (
-      <div class='px-2 py-1.5 border-b bg-gray-100 hidden sm:block'>
+      <div class='hidden border-b bg-gray-100 px-2 py-1.5 sm:block'>
         <p class='text-sm'>
           Get the latest {roadmapTitle} news from our sister site{' '}
           <a
             href={tnsBannerLink}
             target='_blank'
             class='font-semibold underline'
-            ga-category='PartnerClick'
-            ga-action='TNS Referral'
-            ga-label='TNS Referral - Roadmap'
           >
             TheNewStack.io
           </a>
@@ -52,13 +52,16 @@ const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).
     ]}
   >
     <p class='text-sm'>
-      <span class='text-yellow-900 bg-yellow-200 py-0.5 px-1 text-xs rounded-sm font-medium uppercase mr-0.5'>New</span>
+      <span
+        class='mr-0.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
+        >New</span
+      >
       Resources are here, try clicking nodes
     </p>
 
     <a
       href={`/${roadmapId}/topics`}
-      class='inline-flex items-center justify-center py-1.5 text-sm font-medium rounded-md hover:text-black text-gray-500 px-1'
+      class='inline-flex items-center justify-center rounded-md px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-black'
     >
       <Icon icon='search' />
       <span class='ml-2'>Search Topics</span>
@@ -66,8 +69,12 @@ const roadmapTitle = roadmapId === 'devops' ? 'DevOps' : `${roadmapId.charAt(0).
   </div>
 
   <!-- Mobile - Roadmap resources alert -->
-  <p class='block sm:hidden text-sm border border-yellow-500 text-yellow-700 rounded-md py-1.5 px-2 bg-white relative'>
+  <p
+    class='relative block rounded-md border border-yellow-500 bg-white px-2 py-1.5 text-sm text-yellow-700 sm:hidden'
+  >
     Click roadmap items for resources or visit{' '}
-    <a href={`/${roadmapId}/topics`} class='text-blue-700 underline'> resources list</a>.
+    <a href={`/${roadmapId}/topics`} class='text-blue-700 underline'>
+      resources list</a
+    >.
   </p>
 </div>

src/layouts/BaseLayout.astro

@@ -124,6 +124,7 @@ const gaPageIdentifier = Astro.url.pathname
     />
 
     <link rel='icon' href='/manifest/favicon.ico' type='image/x-icon' />
+    <link rel='dns-prefetch' href='https://api.roadmap.sh/' />
 
     <slot name='after-header' />
     {
@@ -144,11 +145,15 @@ const gaPageIdentifier = Astro.url.pathname
       <Footer />
     </slot>
 
-    <Analytics />
     <Authenticator />
     <PageProgress client:idle />
-    <PageSponsor gaPageIdentifier={briefTitle || gaPageIdentifier} client:load />
+    <PageSponsor
+      gaPageIdentifier={briefTitle || gaPageIdentifier}
+      client:load
+    />
 
     <slot name='after-footer' />
+
+    <Analytics />
   </body>
 </html>