2021-01-01

Simple Yet Significant T...

Author: @csswizardry on Twitter

Simple Yet Significant T…

rw-book-cover

Simple yet significant thing all developers should keep in mind: CSS resources (fonts, background images) are not requested by your CSS, but by the DOM node that needs them [Note: slight oversimplification, but the correct way to think about it.] (View Tweet)
It’s not until the browser finds e.g. an H1 that needs Open Sans that it will dispatch the request. Ergo, it’s often the speed of the DOM that determines CSS-resource discovery, and not the speed of the CSS itself. (View Tweet)
While there is no catch-all fix for this, it does help to explain why you might see waterfalls like this: It looks like the font was requested by the JS, right? But actually, the JS was blocking the discovery/construction of the DOM node that needed the font. (View Tweet)
I’m not really sure what you’re meant to do with that information, but, err… have a nice weekend! (View Tweet)
People asking about or suggesting ‘fixes’. There is no fix because this isn’t a problem—it’s clever design, but design developers are seldom aware of. (View Tweet)

rw-book-cover

Simple yet significant thing all developers should keep in mind: CSS resources (fonts, background images) are not requested by your CSS, but by the DOM node that needs them [Note: slight oversimplification, but the correct way to think about it.] (View Tweet)
It’s not until the browser finds e.g. an H1 that needs Open Sans that it will dispatch the request. Ergo, it’s often the speed of the DOM that determines CSS-resource discovery, and not the speed of the CSS itself. (View Tweet)
While there is no catch-all fix for this, it does help to explain why you might see waterfalls like this: It looks like the font was requested by the JS, right? But actually, the JS was blocking the discovery/construction of the DOM node that needed the font. (View Tweet)
I’m not really sure what you’re meant to do with that information, but, err… have a nice weekend! (View Tweet)
People asking about or suggesting ‘fixes’. There is no fix because this isn’t a problem—it’s clever design, but design developers are seldom aware of. (View Tweet)