4 ms·
Tell HN: The CSS that Makes Medium.com Load Really Slowly
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.
The problem is in this CSS resource:
http://dnqgz544uhbo8.cloudfront.net/_/fp/css/main-base.f4gmHr37dkTU585y-PwfDg.css
Specifically this line:
.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}
And specifically this part of that line:
.wf-loading .post-field.body,
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 ".wf-loading .post-field.body," from the above-mentioned CSS, the page loads instantly.
I figure I could dig some more to see how that CSS class is being used any why it'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's slow prior to changing visibility from hidden. Anyhow, if a developer at either organization could fix this, I'd greatly appreciate it. Maybe some others experience this same bug.
- rpicard 13y agoI've never noticed a problem. I have the same set-up aside from running OS X 10.8.3.
- logn 13y agoThat'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 13y agoIs there a tool that I can use to determine such bottlenecks on my website?
- jermaink 13y agohttps://developers.google.com/speed/pagespeed/ https://developers.google.com/speed/pagespeed/
- dpup 13y agoThis is related to Typekit font loading, as outlined here: http://help.typekit.com/customer/portal/articles/6852-controlling-the-flash-of-unstyled-text-or-fout-using-font-events http://help.typekit.com/customer/portal/articles/6852-contro... 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 13y agoAny chance you can dump a net tab trace using Firebug or similar.
- logn 13y agoHere's the Firefox Developer Tools output for Net, on a page reload immediately after the original page load (which seems to cut down drastically on requests due to caching which makes it easier for me to copy/paste the only 3 lines) [02:27:36.182] GET https://medium.com/ [HTTP/1.1 200 OK 538ms] [02:27:40.346] GET https://use.typekit.net/c/ec2d65/ff-tisa-web-pro:i4:i7:n4:n7,freight-sans-pro:n5:n7.Vdl:K:2,Vdq:K:2,Vdk:K:2,Vdp:K:2,TJD:K:2,TJJ:K:2/d?3bb2a6e53c9684ffdc9a98f7195b2a621af3706c43fd27fb1c2ac857895f9c1aa6e0a150c34a58a8cc268e093140e6a1c68d195f68c7ab5421d37c9f8037314acfccd341c5549953c3a5458d2153cf8598355c0169dde8a5e929e0abaef018efc3172b52ac4ce90d2e52930933d272c500a79829545c0b6ce81c15e104d6e141cf6a16eac595caa6382b0e1d176e5adc9bf2c5223ee5a452e892ca4cc2ddd59f9a101d5108046fb341684043b4aaa0808e0352746b2dd67d4d08453cb5a64ec80e36d899fbceb49c43ffc6ad03f5d251dc23736866 [HTTP/1.1 403 Forbidden 12ms] [02:27:44.154] POST https://medium.com/_/stat/ [HTTP/1.1 200 OK 41ms]
- logn 13y agoHere's the full output of Firefox Developer Tools: http://i.imgur.com/IcVYDCr.png?1 http://i.imgur.com/IcVYDCr.png?1
- dpup 13y agoThanks, 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 13y agoProblem 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.