Why

Loading styles or any resources not needed above the fold for reasonably content deliver improves page performance which in-turn improves user experience and improves SEO value.

How

This is a framework free way of loading a stylesheet after the DOM has loaded. A good example candidate is loading font-awesome stylesheet.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const link = document.createElement('link')
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
    link.rel = 'stylesheet'
    document.head.appendChild(link)
  })
</script>

Basic concept is to:

1. create the link as a document element
2. attach the element to the end of the head section

Shout out to these resources:

• https://www.filamentgroup.com/lab/async-css.html