title: Bootstrap: slow loading with the glyphicons
body: <p>I gave a try to Bootstrap but I'm bit surprised about one thing is that it seems that the Glyphicons are kinda really slow to be loaded or displayed.</p>
  
  <p>I have the feeling that even the carousel is faster to show up. 
  However, it does not seem that be that slow on other websites.</p>
  
  <p>Therefore, I guess I must have done something wrong, but I do not see a lot of differences with the code used for displaying glyphicons online, is there any way to fix it up?</p>
  
  <p>But so far since I'm trying to run everything locally, it should fast as the light, nope? It takes two seconds for the glyphicons whereas the rest it's instantaneously displayed.</p>
  
  <p>Is there any way to have a better way to measure how fast something can be displayed onto the screen (rather than just using my end-user feeling), please let me know.</p>
  
  <p>Just starting to do web front-end development, please be indulgent.</p>
  
  <p>Here is below the code I am using to display just one <code>glyphicon-home</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
  
          &lt;title&gt;My Page...&lt;/title&gt;
  
          &lt;!-- Bootstrap core CSS --&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet"&gt;
  
          &lt;!-- Favicons... --&gt;
          &lt;!-- For IE 9 and below. ICO should be 32x32 pixels in size --&gt;
          &lt;!--[if IE]&gt;&lt;link rel="shortcut icon" href="favicon.ico"&gt;&lt;![endif]--&gt;
  
          &lt;!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --&gt; 
          &lt;link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180"&gt;
  
          &lt;!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. --&gt;
          &lt;link rel="icon" href="faviconOthers.ico" sizes="196x196"&gt;
  
          &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
          &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
          &lt;!--[if IE 9]&gt;
              &lt;script src="html5shiv - 3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
              &lt;script src="respond - 1.4.2/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  
          &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
          &lt;script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" &gt;&lt;/script&gt;
  
          &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
          &lt;script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" &gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
           &lt;i class="glyphicon glyphicon-home"&gt;&lt;/i&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>