Bootstrap: slow loading with the glyphicons

Question

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.

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.

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?

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.

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.

Just starting to do web front-end development, please be indulgent.

Here is below the code I am using to display just one glyphicon-home:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <title>My Page...</title>

        <!-- Bootstrap core CSS -->
        <!-- Latest compiled and minified CSS -->
        <link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <!-- Favicons... -->
        <!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
        <!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->

        <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180">

        <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
        <link rel="icon" href="faviconOthers.ico" sizes="196x196">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if IE 9]>
            <script src="html5shiv - 3.7.2/html5shiv.min.js"></script>
            <script src="respond - 1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" ></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" ></script>
    </head>

    <body>
         <i class="glyphicon glyphicon-home"></i>
    </body>

</html>

I know I'm annoying, but: `Just for debugging purposes. Don't actually copy these 2 lines!` — Hexaholic, Sep 12 '15 at 06:18
@Hexaholic well technically-speaking this(these) line(s) are commented but anyway it's fixed now, no impact so far and I haven't tried yet to run that page on IE 9 (but this is not working anymore with IE11). — Natalie Perret, Sep 12 '15 at 06:23
Erratum: much slower with IE11 now, I mean without the debugging stuff. — Natalie Perret, Sep 12 '15 at 06:30
@James Jithin the loading is a bit faster, but I remember seeing this sort of comments before: "Note: The JavaScript could also be included in the head area, but this is not optimal. The browser loads the website step-by-step from top to bottom. When the JavaScript comes too early, this could slow down the loading of the entire web page. That's why it is usually better to have the JavaScript at the very end." — Natalie Perret, Sep 12 '15 at 08:08
@EhouarnPerret, this post answers well http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup — James Jithin, Sep 12 '15 at 08:11
@JamesJithin thanks for the link, one of the first versions of the document was using defer and scripts in the head, anyway it seems like no matter head, body, async or defer, performances are pretty much the same. I found a couple of examples running smoothly offline and online gonna analyze what's wrong with my snippet. — Natalie Perret, Sep 12 '15 at 08:20
Would you like to try loading the page on another machine or on a mobile to check if there is a difference. — James Jithin, Sep 12 '15 at 08:25
In any of the case, you may check the resource which takes time to load. You can use debugging tools on the browser. — James Jithin, Sep 12 '15 at 08:30

score 1 · Accepted Answer · answered Sep 12 '15 at 09:04

I found out what was the wrong, the bottom line resided in the bootstrap.min.css.

Reason is that a while ago I used an online bootstrap customizer cause at that time I havent installed any CSS preprocessor yet. It was enough to change a couple of colors.

However, I did not know that the customizer added a couple of links about where to get certain fonts online which I would rather like to avoid since I'm in China and some websites are really slow to access.

E.g.

@font-face{font-family:'Glyphicons Halflings';
src:url(http://bootstrap-live-customizer.com/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot);

Bootstrap: slow loading with the glyphicons

1 Answers1