2 ms·
The flash of unstyled content, even on slow shitty connections, is unnecessary and entirely my point. If you include a style tag with some bare minimum CSS (or
by giantrobot 6y ago
The flash of unstyled content, even on slow shitty connections, is unnecessary and entirely my point. If you include a style tag with some bare minimum CSS (or even all your CSS) there will be no unstyled flash because the browser's already got CSS for the document.
A 50KB page, about ten pages worth of text (20kb) and the rest markup and CSS, will load in under two seconds on a shitty 3G connection. There will be no unstyled flash and even on super low end devices first paint will happen a fraction of a second after the document finishes loading. You can do a lot of nice styling in 20kb of CSS. You could even include some inline SVG graphics/logo out of that budget.
With compression which every browser supports you've got an even large budget because you can easily see 2:1 compression ratios on text with just GZip.
If you include explicit sizes for things like image and video tags (width and height attributes) the browser won't need to reflow the layout as those resources lazy load in after the page load. There's no popping or things "getting in the way" if you don't write your page like an asshole or pretend you don't know anything about the content ahead of time. Anymore browsers support explicit lazy loading and media source sets. Not using those sorts of features is just laziness or ignorance on the part of web devs.
My first experiences on the Internet were at the end of a shitty dial-up connection with at best a quarter second of latency. Those experiences have stuck with me and I'm appalled and even a bit offended when a "web page" is larger than a copy of Doom. It's especially egregious when a page weighs that much to display a couple paragraphs of text.
Edit: fixed autocorrect typo