Loading CSS without blocking render

http://keithclark.co.uk/articles/loading-css-without-blocking-render/

by traxmaxx • 11 years ago

35 7 11 years ago

keithclark.co.uk

wanda• 11 years ago

There are lazy hacks like using hidden fields.

Then there are guilty hacks like when you find some way to achieve something with three lines of jQuery, but feel (rightfully) guilty for not achieving it from the code-behind or not being able to justify it in your documentation.

And then there are plain ugly hacks that you'll just never, ever use, no matter how cool the result is.

I'm inclined to classify this as a member of the third type.

usingpond• 11 years ago

The author is pretty open about this not being anywhere near ready. It would be better if they were open about the possibility of this loophole being patched up in the spec, making this a pretty useless trick.

amelius• 11 years ago

One of the problems could be that you have javascript running on the page that takes decisions based on the size of fonts. Now if those fonts are loaded asynchronously in the background, your page may end up looking garbled. Unless, of course, the loading of the css triggers a re-evaluation of the javascript code. But this makes the code even more hairy.

AshleysBrain• 11 years ago

Wouldn't a less hacky way be to just download the CSS with Javascript and attach it to the DOM when it's loaded?

c2h5oh• 11 years ago

Less hacky, but not as fast - with this CSS is downloaded as soon as it's encountered in HTML and not when js is run

mavster• 11 years ago

Have you looked into the lazyload attr? https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/ResourcePr...

mdpm• 11 years ago

This would be better as a simple script block with 'defer' and a js GET, with a noscript link tag fallback. This way is likely to fail in so many places.

Loading CSS without blocking render

Related Stories