Worst Websites
Not The Daily Sucker – Your print.css file is hurting you
February 16th, 2010 4:04 am by Vincent Flanders
I ran into two articles about problems in using a CSS file for printing:
- Browser Performance Problem with CSS “print” Media Type (December 2009)
- 5c media=print stylesheets (February 2010)
It turns out that if you’re using a print stylesheet (shows up in the format <link href=”print.css” type=”text/css” rel=”stylesheet” media=”print” />), every other file has to wait to load until print.css finishes loading.
To get the full effect of the delay, I created a 583Kb print.css file — which may be the world’s largest print.css file — and placed it in the head of this HTML file. Notice how long the page takes to display (I’ve turned off caching and file compression.).
The following picture shows what happens (click graph for larger example):
The page took 7.42 seconds to load. Page Speed gave the page a score of 81. Yslow gave it a “B,” with a score of 84. These two tools are extremely important and should be in your arsenal.
Optimizing the page. I removed the CSS from the <HEAD> of the document and inserted the Javascript code from Article 1 just before the </BODY> statement.
<script>
window.onload = function() {
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ‘stylesheet’;
cssNode.href = ‘print.css’;
cssNode.media = ‘print’;
document.getElementsByTagName(“head”)[0].appendChild(cssNode);
}
</script>
</body>
</html>
As you can see in the graph below, the document loads much faster (click on the graph for larger example). All files load in 5.97 seconds, but the whole page (everything but the print stylesheet) loads in 2.11 seconds — the visitor quickly sees the page and doesn’t care that the print stylesheet loads last because s/he may never want to print the page and if s/he wants to print the page, it won’t happen immediately.
Page Speed gave this version of the page a score of 85. Yslow gave it a “B,” with a score of 83. Page Speed liked the page 4 points more, but Yslow liked the page 1 point less.
Since nobody on Planet Earth is going to print a document immediately after it loads, it’s safe to use Javascript to load the print stylesheet. What if they don’t have Javascript enabled? See Article 1 for the answer.
Yes, it’s true that nobody is going to have a print stylesheet that’s this large (it’s composed mostly of comments) and the improvements aren’t as important as caching and compressing your site’s files, but it’s good to be aware of what causes roadblocks in displaying your web pages.
Posted in Not a Daily Sucker, Usability, Web Design |