CODEWITHSUNDEEP
htmlcsswebfonts
23tux
23tux

Reputation: 14736

Page view calls for hosted fonts

A lot of commercial font sites like myfonts.com do page view tracking with CSS like this:

@import url("//hello.myfonts.net/count/123456");

When I look into Chromes network tab, I see that the call to this URL takes about 100-250ms (depending if https or http). This seems a lot to me, because it happens on every CSS parsing.

I'm wondering if this calls have some negative performance issues when loading a site? (blocked loading or rendering of CSS, timeouts when the URL is not accessible or a poor internet connection on mobile...)

I'm not too deep into chromes performance tools, but I think that there must be a way to analyze if this call blocks something when loading a page.

Upvotes: 1

Views: 453

Answers (1)

23tux
23tux

Reputation: 14736

I figured it out by myself. I used this code

@import url(http://localhost/wait.php)

<?php
// wait.php
sleep(10)
?>

And the browser waits indeed the 10 seconds before rendering the page. It loads other requests to JS files... asynchron, but the rendering is blocked.

There would be two possible solutions

  • Don't use any commercial fonts (we are going to replace our commercial fonts with open source / free fonts)
  • Or: Put the page view code on the bottom of the page

e.g.

  <style>
    @import url("//hello.myfonts.net/count/123456");
  </style>
</body>

This way the browser can render the content and when it's nearly done, it fires the page view count for your commercial fonts.

Btw: Depending on http / https and your location it takes about 50-300ms to fire this page view counts.

Upvotes: 1

Related Questions