In my last post, I talked about adding stylesheets into my Gulp file, part of my new development process. The follow on to this for me was thinking about whether all of those stylesheets were really needed up front. As I explained in that post, concatenating them and minifying them will certainly reduce the overall filesize, and the number of TCP connections (and therefore time), but what if some of this could be delayed until after the page had even loaded?
This is often referred to as lazy loading. The Filament Group have created a great plugin for this called loadCSS, which can be found on NPM as fg-loadcss. Their description of why you should be using it goes like this…
Referencing CSS stylesheets with
@importcauses browsers to delay page rendering while a stylesheet loads. When loading stylesheets that are not critical to the initial rendering of a page, this blocking behavior is undesirable. The new
The “preload” option is not well supported at all currently, so for the time being at least, a polyfill of this nature is definitely required.
var loadcss = require("fg-loadcss"); var reflink = $("head").children("link[rel=stylesheet]").get(-1); loadcss.loadCSS("https://fonts.googleapis.com/css?family=Indie+Flower",reflink);
This first requires the package (which Browserify will pull in), then finds a reference element (it will insert the <style> tag directly after this one) and then it calls the manual “loadCSS” function with the path to the stylesheet. In my example, this is to a Google Font file.
<noscript> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower"> </noscript>
I didn’t get the chance to cover this in my Optimising your website: A development workflow with Git and Gulp course on Skillshare, but I hope to add it into a future course.