Preload and preconnect in layout's head

src/routes/_layout.svelte

@@ -74,14 +74,36 @@
     } from 'utils/store'
     // Dependencies
     import lazySizes from 'lazysizes'
+    // Components
+    import AnalyticsTracker from 'utils/AnalyticsTracker'
+    import Transition from 'utils/Transition'
 
     // Variables
     const { page } = stores()
-    let AnalyticsTracker
 
     // Settings
     lazySizes.cfg.lazyClass = 'lazyload'
 
+    /*
+    ** Head stuff
+    */
+    // Preconnect
+    const preconnect = [
+        'https://api.housesof.world',
+        'https://www.googletagmanager.com',
+        'https://stats.g.doubleclick.net',
+        'https://www.google-analytics.com',
+    ]
+    // Preload assets
+    const preload = {
+        fonts: [
+            '/fonts/G-Light.woff2',
+            '/fonts/G-Regular.woff2',
+            '/fonts/G-Semibold.woff2',
+            '/fonts/M-Extralight.woff2',
+            '/fonts/M-Light.woff2',
+        ]
+    }
 
 
     /*
@@ -105,11 +127,6 @@
     if ($locations) {
         $locations.forEach(loc => loc.country = $countries.find(cont => cont.id === loc.country.id))
     }
-
-
-    onMount(async () => {
-        await import('utils/AnalyticsTracker').then(module => AnalyticsTracker = module.default)
-    })
 </script>
 
 <style lang="scss" global>
@@ -118,10 +135,19 @@
 
 <svelte:head>
     <link rel="canonical" href={`https://${$page.host}${$page.path}`} />
+    {#each preconnect as host}
+    <link rel="preconnect" href={host} crossorigin>
+    <link rel="dns-prefetch" href={host}>
+    {/each}
+    {#each preload.fonts as font}
+    <link rel="preload" href={font} as="font" type="font/woff2" crossorigin>
+    {/each}
 </svelte:head>
 
 <main class="housesof" class:is-transitioning={!$pageReady}>
     <slot></slot>
 </main>
 
-<svelte:component this={AnalyticsTracker} {stores} id={process.env.CONFIG.GA_TRACKER_ID} />
+<Transition />
+
+<AnalyticsTracker {stores} id={process.env.CONFIG.GA_TRACKER_ID} />