Asynchronous Loading CSS in v1.5

Bootplate is all about being a wicked-fast WordPress theme.  After a lot of review of the work by the Filament Group on their loadCSS.js project, we decided to include a few custom functions in version 1.5 that copies WordPress’ CSS and JS enqueue process, but allows for heavier CSS to be loaded asynchronously (i.e. without waiting for the page to load).

Asynchronous CSS Loading

Referencing CSS files with link[rel=stylesheet] or @import will cause most browsers to delay page rendering while the stylesheet(s) loads. This is a good idea in many cases, but when some stylesheets that are not critical to the initial rendering of a page (above the fold), loadCSS (and upcoming web standards) allows us to load stylesheets asynchronously, so they don’t block page rendering.

loadCSS and Bootplate v1.5

There were a handful of performance improvements in the v1.2 and 1.4 releases, but this one is by far the coolest (in our opinion).

The bootplate_async_css() function has been completely rewritten and uses the new bootplate_file_exists() function to replace PHP’s file_exists() function which can behave unexpectedly.

What all this function-business means to the average Bootplate child theme developer is this: copy the body.css (and body.min.css) files into your child theme’s /css/ directory and Bootplate will automatically detect and load it asynchronously just before the closing </head> tag.  No need to manually overwrite any parent theme functions.

Learn more about the LoadCSS.js project on GitHub and see the updated Child Theme Setup Guide for more detailed (nerdy) instructions.