Improve loading performance of assets (#17)

* [refs #16] Remove @imported CSS

The @import directive creates a very synchronous, sequential way of
downloading CSS, completely removing our ability to parallelise. By
breaking our CSS out into two separate link elements in the HTML, we can
begin to download the files completely side-by-side.

* [refs #16] Move script block above CSS

Inline scripts block on CSSOM construction, which means that they won’t
execute until all discovered CSS is downloaded and parsed. This means
that it’s actually better for performance to place these above any CSS
requests so as not to block them.

* [refs #16] Move Twitter widget into head

Seeing as though we’re loading the Twitter widget.js asynchronously, it
doesn’t need to be defined late/JIT. We can move it up to the head to
get it coming over the wire ASAP, but still ensure that it’s not
blocking anything else.

* [refs #16] Preconnect external origins

There are a few external domains that we hit on every page load; let’s
preemptively open up their connections.

* [refs #16] Remove stray Gaug.es code

I didn’t realise the include for the Gaug.es analytics was included in
so many layouts. Oops! I’ve removed it so that we don’t have it doubled
up on so many pages.

* [refs #16] Preconnect analytics origins

Along with all the other external domains we’ve preconnected, we might
as well do the analytics stuff, too.

_includes/head.html

@@ -4,5 +4,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
-	  <link rel="stylesheet" href="/css/common.css" />
+
+      <link rel="preconnect" href="fonts.google.com" />
+      <link rel="preconnect" href="platform.twitter.com" />
+      <link rel="preconnect" href="track.gaug.es" />
+      <link rel="preconnect" href="d36ee2fcip1434.cloudfront.net" />
+      <link rel="dns-prefetch" href="fonts.google.com" />
+      <link rel="dns-prefetch" href="platform.twitter.com" />
+      <link rel="dns-prefetch" href="track.gaug.es" />
+      <link rel="dns-prefetch" href="d36ee2fcip1434.cloudfront.net" />
+
+    {% include track.html %}
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic" />
+    <link rel="stylesheet" href="/css/common.css" />
+    <script src="//platform.twitter.com/widgets.js" async defer></script>
   </head>

_includes/sidebar.html

@@ -3,7 +3,7 @@
   <div class="wrapper">
 
     <div class="about">
-      <div class="follow"><a href="https://twitter.com/rachelandrew" class="twitter-follow-button" data-size="large" data-show-screen-name="true" data-show-count="true">Follow @rachelandrew</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>
+      <div class="follow"><a href="https://twitter.com/rachelandrew" class="twitter-follow-button" data-size="large" data-show-screen-name="true" data-show-count="true">Follow @rachelandrew</a></div>
       <h1><a href="/">Grid by Example</a></h1>
       <p>Everything you need to learn CSS Grid Layout</p>
 

_layouts/bigpattern.html

@@ -28,7 +28,6 @@ <h1>{{ page.title }}</h1>
     </div>
     <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/code.html

@@ -6,7 +6,6 @@
 
       {{ content }}
 
-      {% include track.html %}
   </body>
 
-</html>
+</html>

_layouts/default.html

@@ -11,8 +11,7 @@
       {{ content }}
       </div>
     </main>
-    {% include footer.html %} 
-    {% include track.html %}
+    {% include footer.html %}
 </body>
 
 </html>

_layouts/example.html

@@ -23,7 +23,6 @@ <h1>{{ page.title }}</h1>
     </div>
     <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/examples.html

@@ -11,7 +11,6 @@
       {{ content }}
     </div>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/home.html

@@ -65,7 +65,6 @@ <h2>GridBugs!</h2>
       </a></div>
     </div>
  {% include footer.html %}  
- {% include track.html %}  
 </body>
 
 </html>

_layouts/learn.html

@@ -190,7 +190,6 @@ <h3>Example code</h3>
 
     </div>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/pattern.html

@@ -24,7 +24,6 @@ <h2>Example on CodePen</h2>
     </div>
     <script async src="//assets.codepen.io/assets/embed/ei.js"></script>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/post.html

@@ -20,7 +20,6 @@ <h1>{{ page.title }}</h1>
       </div>
     </div>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/posts.html

@@ -11,7 +11,6 @@
       {{ content }}
     </div>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/resources.html

@@ -11,7 +11,6 @@
       {{ content }}
     </div>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

_layouts/video.html

@@ -31,7 +31,6 @@ <h4>Become a CSS Layout expert in 2018!</h4>
       <div class="back">⇦ <a href="/video">Back to Video listing</a></div>
     </div>
     {% include footer.html %} 
-    {% include track.html %}
 </body>
 
 </html>

css/common.css

@@ -1,6 +1,5 @@
 @charset "UTF-8";
 /*! Gutenberg reset — adapted from Normalize */
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;