Script Media Type & Preload

Screen Size Specific Load

<link media=”only screen and (max-device-width: 480px)” href=”iPhone.css” type=”text/css” rel=”stylesheet” />

<link media="only screen and (max-device-width: 480px)"
href="iPhone.css" type="text/css" rel="stylesheet" />

On Load Event

Shown below the onload attribute in the link allows the CSS to be processed when it finishes loading.

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

References

• Stackoverflow
• Defer non-critical CSS