Tell HN: The CSS that Makes Medium.com Load Really Slowly
4 comments
This is related to Typekit font loading, as outlined here:
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.
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.
Any chance you can dump a net tab trace using Firebug or similar.
Here'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]Here's the full output of Firefox Developer Tools:
http://i.imgur.com/IcVYDCr.png?1
http://i.imgur.com/IcVYDCr.png?1
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
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.
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.
There's a comment thread here on this, but I figured I'd add a top-level comment about it.
Is there a tool that I can use to determine such bottlenecks on my website?
The problem is in this CSS resource:
http://dnqgz544uhbo8.cloudfront.net/_/fp/css/main-base.f4gmHr37dkTU585y-PwfDg.css
Specifically this line:
And specifically this part of that line:
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.