title: Best Performance for Importing <head> Tag Contents
body: <p>I'm trying to determine the best way to go about importing a head.html file into the <code>&lt;head&gt;</code> tag for every webpage. I want to do this so that all resources are located in one file, to minimize bloat in other files, and also to provide an import for the header/footer on every page.</p>
  
  <p><strong>head.html</strong></p>
  
  <pre><code>&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Sample&lt;/title&gt;
  &lt;link rel="icon" type="image/png" href="images/sample.png"&gt;
  
  &lt;link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css"&gt;
  &lt;link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/bootstrap-social.css" rel="stylesheet" type="text/css"&gt;
              &lt;link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;script type="text/javascript" src="scripts/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  
   &lt;script&gt;
       $(function () {
           $("header").load("header.html");
           $("footer").load("footer.html");
       });
   &lt;/script&gt;
  </code></pre>
  
  <p>I've already considered JavaScript loading, but it's bad practice to import a JavaScript file right off the bat. Running the site through <a href="https://developers.google.com/speed/pagespeed/insights/" rel="nofollow">Google's PageSpeed Insights</a>, it's suggested that you "<a href="https://developers.google.com/speed/docs/insights/BlockingJS" rel="nofollow">Remove Render-Blocking JavaScript</a>".</p>
  
  <p><strong>index.html head tag w/ JavaScript</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;script type="text/javascript" src="scripts/jquery-2.1.4.min.js"&gt;&lt;/script&gt; &lt;!-- Blocking JavaScript --&gt;
      &lt;script&gt;
          $(function () {
              $("head").load("head.html");
          });
      &lt;/script&gt;
  &lt;head&gt;
  </code></pre>
  
  <p>I've also tried using HTML imports. This seems to work alright on desktop, other than the fact that an import brings in a full HTML document when rendered, wrapping the contents of my file in <code>&lt;html&gt;&lt;head&gt;&lt;body&gt;</code> tags. This is annoying and it is non-functional on my Android phone.</p>
  
  <p><strong>Rendered index.html head tag w/ HTML import</strong></p>
  
  <pre><code>&lt;head&gt;
      &lt;link rel="import" href="head.html"&gt;
          &lt;html&gt;
          &lt;head&gt;
              &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
              &lt;title&gt;Sample&lt;/title&gt;
              &lt;link rel="icon" type="image/png" href="images/sample.png"&gt;
  
              &lt;link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"&gt;
              &lt;link href="//fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css"&gt;
              &lt;link href="//fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"&gt;
              &lt;link href="css/bootstrap-social.css" rel="stylesheet" type="text/css"&gt;
              &lt;link href="css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  
              &lt;script type="text/javascript" src="scripts/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  
              &lt;script&gt;
                  $(function () {
                      $("header").load("header.html");
                      $("footer").load("footer.html");
                  });
              &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;&lt;/body&gt;
      &lt;/html&gt;
  &lt;/head&gt;
  </code></pre>