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} />

src/template.html

@@ -10,20 +10,6 @@
     <link rel="icon" type="image/png" sizes="64x64" href="/img/favicon.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/img/siteicon.png">
 
-    <link rel="preconnect" href="https://api.housesof.world" crossorigin>
-    <link rel="dns-prefetch" href="https://api.housesof.world">
-    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
-    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
-    <link rel="preconnect" href="https://stats.g.doubleclick.net" crossorigin>
-    <link rel="dns-prefetch" href="https://stats.g.doubleclick.net">
-    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
-    <link rel="dns-prefetch" href="https://www.google-analytics.com">
-    <link rel="preload" href="/fonts/G-Light.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="/fonts/G-Regular.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="/fonts/G-Semibold.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="/fonts/M-Extralight.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="/fonts/M-Light.woff2" as="font" type="font/woff2" crossorigin>
-
     %sapper.base%
     %sapper.head%
     %sapper.styles%