CSS Loading Diagnostic Tests
This directory contains a variety of files that employ various CSS loading techniques.
Most files reference a CSS file that is generated by PHP to include a 5-second server delay to mimic latency.
The delay makes it easier to determine if content is rendered before the CSS loads.
- Link in Head: Does a link to a stylesheet from the head of the page block page rendering?
- Link in Body: Does a stylesheet link in the body of the page block all page rendering, rendering of content that comes after it, or not block at all?
- @import in Head: Does an inline @import reference from the head of the page block rendering?
- @import in Body: Does an inline @import reference from the body of the page block rendering of content below it?
- Rel=preload Test: standard link[rel=preload] with an onload handler to apply as a stylesheet once loaded. This will only work in supporting browsers.
- DOM appendChild: Create a link element and append to the document.
LoadCSS Assisted Loading