search

TechAtNYU / tech-nyu-site

https://techatnyu.org
8 stars 5 forks source link

FOUT is worse #57

Closed ethanresnick closed 9 years ago

ethanresnick commented 9 years ago

Something that cloudflare's doing to load more things in parallel is causing the page to render before the proper font has downloaded, which looks awful. Can we configure this behavior through Cloudflare? (If not, there's probably something we can do through typekit's loader)

AbhiAgarwal commented 9 years ago

cc @thebyrd (he did the Cloudflare setup)

It seems like everything else is loading much before the fonts.

thebyrd commented 9 years ago

For starters, don't load 11 fonts. Even when we do them in parallel, the load time is +900ms. I've worked with Typekit before and it was a lot faster, so there's probably something you can do on that end.

You can add a data attribute to the typekit script tags to make them block https://support.cloudflare.com/hc/en-us/articles/200168136-How-do-I-use-Rocket-Loader-with-TypeKit-

sjkaliski commented 9 years ago

Cloudflare just highlighted the real issue: any content that's above the fold shouldn't be rendered with JavaScript, especially if the payload is that large.

ethanresnick commented 9 years ago

@thebyrd Ok, I added the data-attribute. Hopefully that'll do the trick. But @AbhiAgarwal, can you check the githook? Because the changes don't seem to be auto-deploying.

@sjkaliski The js that does the layout seems to finish executing well before the font loads, so I don't think it's the bottleneck. I might be able to shrink the number of fonts we're loading, though, by making different kits for different tech@nyu sites.

AbhiAgarwal commented 9 years ago

No githook yet! My laptop charger is lost so I won't be able to make any changes until I get one tonight. Will make sure to update you then

On Monday, March 2, 2015, Ethan notifications@github.com wrote:

@thebyrd https://github.com/thebyrd Ok, I added the data-attribute. Hopefully that'll do the trick. But @AbhiAgarwal https://github.com/AbhiAgarwal, can you check the githook? Because the changes don't seem to be auto-deploying.

@sjkaliski https://github.com/sjkaliski The js that does the layout seems to finish executing well before the font loads, so I don't think it's the bottleneck. I might be able to shrink the number of fonts we're loading, though, by making different kits for different tech@nyu sites.

— Reply to this email directly or view it on GitHub https://github.com/TechAtNYU/tech-nyu-site/issues/57#issuecomment-76768001 .

Abhi

ethanresnick commented 9 years ago

@AbhiAgarwal kewl

thebyrd commented 9 years ago

@ethanresnick cloudflare caches everything. Ping me on slack when it's redeployed and I'll clear the cache.

AbhiAgarwal commented 9 years ago

@ethanresnick I've enabled the githook. It should work now!

ethanresnick commented 9 years ago

@thebyrd just did! i'm going to add some more notes about this in the cloudflare issue too.