0

Still kind of new to fixing website related problems. I found out that after clearing cache in IE 11 and loading my site the Google Fonts is downloading 240 seconds before my webpage is finally loaded. I included image: http://imgur.com/p5mILNV

Could someone tell me what am I doing wrong please?

Thank you!

alessandrio
  • 4,282
  • 2
  • 29
  • 40
LikeMike
  • 9
  • 4
  • Do you want to say that it taking 240 sec to load your webpage in IE11 – kubre May 25 '17 at 16:06
  • @vkubre yes exactly (244.4 sec in total). Other browsers do not have this issue. – LikeMike May 25 '17 at 16:07
  • When I refresh the page then it loads normally but first view is taking over 240 sec always on IE 11. – LikeMike May 25 '17 at 16:19
  • can you post a link to the site? – mlegg May 25 '17 at 16:56
  • @mlegg Yes, sure [link](https://nutikell.com) – LikeMike May 25 '17 at 17:14
  • I'm not sure how fast your internet is, but I have Comcast high speed 163Mbps download and 14 upload, The site came up for me in 5.6 seconds according to https://tools.pingdom.com/#!/bEytot/https://nutikell.com/ Go there and run the test, it gives you tips on how to speed up such as Combine external JavaScript, Parallelize downloads across hostnames, Combine external CSS, Serve static content from a cookieless domain – mlegg May 25 '17 at 23:48
  • @mlegg I think you misunderstood the problem. My site speed is below 2 sec: https://tools.pingdom.com/#!/clGOGK/nutikell.com (I quess I was editing my site when you took the test. However the problem here is with cleared IE cache the Google Fonts (Dosis) is foreced to wait exactly 240 sec. You can try it by deleting all your browsing history in IE 11 (including cache) and then opening my site. – LikeMike May 26 '17 at 00:30
  • If you clear the cache and close the IE and then reopen the link then you see the problem. The site only loads header and then freezes for 240 sec. – LikeMike May 26 '17 at 01:07

1 Answers1

0

IE11 has some issues with Google Fonts, especially fonts over SSL. You can try these solutions:

  1. Web Font Loader: Use the Web Font Loader javascript instead of the default method of adding fonts (CSS way). It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.

Sample usage:

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

If this solution works, you can implement a spesific case just for IE11.

  1. Append style tag: A weird one but it seems to work in some cases.

With the help of jQuery:

$('head').append('<style></style>')
  1. Debug and validate HTML: Third but maybe the most important solution is to check your HTML markup. Parsing errors can cause anything that you can miss. https://validator.w3.org/nu/?doc=https://nutikell.com/ W3 Validator gives 5 errors and a fatal error that you should really fix. As the validator says about fatal error, any browser "Cannot recover after last error. Any further errors will be ignored." That can be IE's problem.

From validation results:

3. [Error]: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 162, column 5; to line 162, column 11
...

5. [Error]: End tag "a" violates nesting rules.
From line 463, column 3; to line 463, column 89
<a href="https://nutikell.com/nutikellad/nutikell-westyx-king/" class="main-thumbnail">

6. [Fatal Error]: Cannot recover after last error. Any further errors will be ignored.
From line 463, column 3; to line 463, column 89

  1. Browser Plugins: IE plugins like script blockers or ad blockers may also delay loading the font files and cause timeout of the request. Check if you have one.

  2. Max http connections: Each browser has a maximum http connections limit in a single time. Your site, for example, has 21 CSS files which is extremely high. You can see it from Firefox's devtools (F12 > Network Monitor > CSS). Maybe IE11 can't fetch all the CSS files at the same time. You may use a task runner to join/minify your CSS files.

  3. Test in other machines: Check out Browserstack to test in an other machine. If you prefer local dev, Microsoft offers free downloads of virtual machines to test IE with.

  4. EOT and WOFF fonts not loading over HTTPS in IE: An old post can give an idea: We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.

If your server is Apache this code below would go in the .htaccess file:

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

There are plenty of solutions for this case in that post. You can also check them.

Emre Piskin
  • 294
  • 5
  • 15