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>

Answer 1

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.

Eg

@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

Question

1 answers

solution1
1 ACCPTED 2015-09-12 09:04:59

Bootstrap: slow loading with the glyphicons

Question

1 answers

solution1 1 ACCPTED 2015-09-12 09:04:59

solution1
1 ACCPTED 2015-09-12 09:04:59