Making responsive CSS load the way it should.
- [c]2012 @scottjehl, Filament Group, Inc.
- Licenses: MIT, GPLv2
The Problem
Loading CSS in an optimized or prioritized fashion is very difficult. In order for a website to load cleanly, all CSS needed for rendering that page layout must be referenced in thehead of a
document. This is because stylesheets loaded in this way will block page
rendering until they are loaded and ready to apply. If a stylesheet is
referenced later in a document, or loaded dynamically via JS, users will
often see a FOUC while that stylesheet loads concurrently with page
rendering. Unfortunately, this limitation can make for a lot of overhead in responsive designs, particularly if a stylesheet contains a large amount of CSS for breakpoints that don't currently apply at a particular viewport size, or worse, CSS that won't ever apply on a particular device. More unfortunate, using separate
link elements with media attributes to reference stylesheets with their intended breakpoints doesn't prevent those stylesheets from downloading and blocking page rendering, even in environments where they don't currently or will never apply. Lastly, if for some reason a stylesheet takes a long time to load, most browsers will let it continue to block page rendering for 30 seconds or more!
0 komentar:
Posting Komentar