

Tell HN: The CSS that Makes Medium.com Load Really Slowly - logn

HN is always filled with great Medium.com links. But for whatever reason, in Firefox 21.0 on my Mac OS 10.7.5 (MacBook Air), every page on their site takes several seconds to load. It always felt like a bug and no other browser on my computer has this slowness. So I did a little digging and some binary-search-like process of elimination to find the culprit.<p>The problem is in this CSS resource:<p>http:&#x2F;&#x2F;dnqgz544uhbo8.cloudfront.net&#x2F;_&#x2F;fp&#x2F;css&#x2F;main-base.f4gmHr37dkTU585y-PwfDg.css<p>Specifically this line:<p><pre><code>  .wf-loading .post-header .post-title,.wf-loading .post-field.subtitle,.wf-loading .post-field.body,.wf-loading .post-meta,.wf-loading .post-author-card,.wf-loading .post-article .caption{visibility:hidden}
</code></pre>
And specifically this part of that line:<p><pre><code>  .wf-loading .post-field.body,
</code></pre>
I verified this by downloading their only two CSS resources locally and along with an HTML page from their site. I edited the HTML to point to my local CSS from their CDN and could reproduce the slowness every time (loading from my local SSD!). When I remove &quot;.wf-loading .post-field.body,&quot; from the above-mentioned CSS, the page loads instantly.<p>I figure I could dig some more to see how that CSS class is being used any why it&#x27;s being used. But I figure this is a good task for someone at Medium.com ... of course this may be a Mozilla bug. And the real defect may be in something that&#x27;s slow prior to changing visibility from hidden. Anyhow, if a developer at either organization could fix this, I&#x27;d greatly appreciate it. Maybe some others experience this same bug.
======
dpup
This is related to Typekit font loading, as outlined here:

[http://help.typekit.com/customer/portal/articles/6852-contro...](http://help.typekit.com/customer/portal/articles/6852-controlling-
the-flash-of-unstyled-text-or-fout-using-font-events)

We digged into it when it came up before, but I'll have another look and try
to get in touch with the Typekit folks.

~~~
dpup
Any chance you can dump a net tab trace using Firebug or similar.

~~~
logn
Here's the full output of Firefox Developer Tools:

[http://i.imgur.com/IcVYDCr.png?1](http://i.imgur.com/IcVYDCr.png?1)

~~~
dpup
Thanks, this is useful. It's weird you are getting a 403 on the typekit
request. It looks like the font-loader probably just times out. Do you happen
to have any extensions that might strip referrer

~~~
logn
Bingo. That's the problem. Sorry, I figured starting Firefox in safe mode
reverted my custom config. I had disabled referrer via about:config's
network.http.sendrefererheader. Changing that value back to '2' (send referrer
headers always) eliminates the problem. I guess only amongst HN readers can
you count on people not sending this header. Anyhow, if TypeKit could not
require this, that would be great. Thanks for looking into this, even though
it might only help .001% of users.

------
logn
Problem solved. Dan at Medium.com figured out that TypeKit doesn't do well
when browsers are configured to not send referrer headers (e.g., in Mozilla,
setting network.http.sendrefererheader to '0').

There's a comment thread here on this, but I figured I'd add a top-level
comment about it.

------
rpicard
I've never noticed a problem. I have the same set-up aside from running OS X
10.8.3.

~~~
logn
That's odd. Maybe it's a Mac bug. I even tried starting Firefox is safe mode
with:

    
    
      /Applications/Firefox.app/Contents/MacOS/firefox-bin -safe-mode
    

... and still the same problem

------
ashokvarma2
Is there a tool that I can use to determine such bottlenecks on my website?

~~~
jermaink
[https://developers.google.com/speed/pagespeed/](https://developers.google.com/speed/pagespeed/)

