Delay Loading The Print Stylesheet

Update: Deferred downloading of print stylesheets is coming to a future release of WebKit.

Browsers can only download a limited number of files at a time from the same host when loading a web page. This is as low as 2 files on IE 6 & 7.

To allow the page to appear faster a best practise is to prioritise important files like the main CSS, template images and the main content. Since the print stylesheet is rarely used, especially not within the first few seconds of page load I recommend loading this file last.

This isn’t as simple as referencing the file at the end of your HTML since in some browsers the page is not rendered until all CSS is loaded. A JavaScript solution is required. Add the following JS to load on document load.

function LoadPrint() {
  var headTag = document.getElementsByTagName("head")[0];
  var printCss = document.createElement("link");
  printCss.type = "text/css";
  printCss.rel = "stylesheet";
  printCss.href = "/css/print.css";
  printCss.media = "print";
  headTag.appendChild(printCss);
}
<noscript>
  <link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
</noscript>

I’ve avoided using jQuery’s appendTo as during my testing IE7 didn’t like it. Barebones JavaScript will do. Now for the no JavaScript use the noscript tag in the head to load the print stylesheet in the normal position.

The savings won’t be huge but every little helps so why not.

See also: Delay loading your print css - Stoyan Stefanov

Ooooh, ultrawide! 😍