Lazy Loading Stylesheets and Fonts.

Stylesheets can become very large and slow down the speed at which your web pages render. This is especially true when they include large libraries or several fonts.

Using some JavaScript you can allow your site to load the basics first then download your fancy stylesheets and JavaScripts. The best thing is, it's really easy! If you're adapting an existing app you might need to do some architectural changes but the concept is the same.

Getting Setup

1. Make a directory named lazyload
2. Within lazyload create a directory named resources
3. Within resources, create 2 directories, css and js
4. Within the css and js directories, create index.css and index.js
5. Create an index.html file in the root directory, lazyload.
   5a. Use this pastebin to fill index.html https://pastebin.com/abHHvBBc

This project can be run from within Chrome, Firefox or Safari on your PC, no server required. Just click on index.html in your file browser.

Getting Started

In index.html we have the standard stuff but include a tag that might be unfamiliar to some, noscript. From MDN:

The HTML noscript element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.

Therefore in the event that the browser our guest is using doesn't allow or support JavaScript it will load the style element. As long as JavaScript is enabled it will be ignored by the browser.

CSS

In index.css, put the following code:

body{
    font-family: font-family: 'Saira Extra Condensed', sans-serif;
}

This will make all of the text on the page either Saira Extra Condensed or Sans Serif when the former is unavailable. Saria Extra Condensed looks like this:

If you load up index.html at this point you'll notice that the text isn't the same as in that picture.

JavaScript

In order to lazy load the font we'll write some JavaScript. Notice that in the index.html file, we load the JavaScript at the end of the page in the footer element. That means that after the entirety of the content is loaded and parsed, this JavaScript file will be downloaded and run.

<footer>
    <script src="resources/js/index.js"></script>
</footer>

So, since we're putting our JavaScript at the very bottom of the page, users will be able to start reading without having to wait for our lazy loaded assets.

In index.js we'll need to add the following code:

const fontTag = document.createElement('link');

fontTag.rel = 'stylesheet';
fontTag.type = 'text/css';
fontTag.href = 'https://fonts.googleapis.com/css?family=Saira+Extra+Condensed';

document.getElementsByTagName('head')[0].appendChild(fontTag);

First we create a <link>element using document.createElement. Next we add the attributes to the element then append it to the head element.

That's it! You're done

Closing Statements

Lazy loading stylesheets and fonts is pretty simple and can have a big impact on the speed of rendering your web page. The same logic can be applied to JavaScript or even images with a little more work.