The Async CSS Loader Experiment

Script placement: End of head tag
Execution: Immediately, with no timeout
Variation: Inserting link element after the script in the head.
Observed results: Tested in 2022, the styles load in a completely non-blocking manner in every browser except Safari (15.5) and MSIE (11), in which it completely blocks page render and script execution.

This page dynamically inserts via JavaScript running in the <head> a <link rel=stylesheet /> element into the <head>. The linked stylesheet should take slightly over 5 seconds to load.

Because CSS is blocking, and the link is inserted during the initial parse of the page, browsers may not render anything until the CSS is loaded. You can tell whether or not the CSS file is loaded using the indicator below, or by virtue of this text being italic

CSS loading indicator:

Not yet loaded.

A script embedded in this paragraph was executed (but not necessarily rendered) seconds after this small HTML page downloaded. (Technically, after it began downloading, but it is such a small file that it is essentially, usually instantaneous.) Values close to 0 indicate that the stylesheet was not requested in a blocking manner; values over 5s indicate that it was.

return to test suite · tests by alan hogan