The Async CSS Loader Experiment

Script placement: End of head tag
Execution: Immediately, with no timeout
Variation: Using document.write to draw a link element in the script in the head.
Observed results: Completely blocking in all tested browsers (as of July 2022), including Chromium 101, Firefox 102, Safari 15.5, and MSIE 11.

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