This tweet had me revise a 5 year old experiment on how print CSS affects page loading, especially in the light of mobile browsers.
So I tweaked the test ever so slightly to print out timing info in the document.title and after the page is done.
The test is essentially how does a slow print stylesheet affect the rendering of the page on the screen.
<link rel="stylesheet" href="screen.css" media="screen"> <link rel="stylesheet" href="print.css" media="print">
In the experiment I have screen.css delayed with 5 seconds and print.css delayed 10 seconds.
Results 5 years ago
Browsers blocked rendering waiting for print.css. Some took 10 seconds (downloading print.css and screen.css in parallel), some took 15. Why, oh why? It's a print CSS, you don't need this sh...eet.
Results today
Good guy Opera, doesn't even wait for screen.css. After some timeout, O renders unstyled page and restyles after screen.css arrives. Yes, brave O takes rendering risks this way, all others wait for the screeen.css before styling anything. Still, onload fires in ~10s, so this is bad. All your onload JS code is blocked on a useless print.css
FF blocks rendering on the print.css. Boo! Nothing renders for 10 seconds. And it fires onload after ~10s. Boo-boo! At least it loads both stylesheets in parallel. Galaxy (Android) waits for print.css too. How often do you print from a mobile device? Same in IE8 and IE9. Even more retarded in IE is DOMContentLoaded event also waiting for 10 seconds. speech=less.
Safari, Chrome, Mobile Safari - render after 5 seconds, meaning only after screen.css. There is hope for the humanity. However the onload fires in 15 seconds. So the two CSS files are downloaded sequentially. Kinda makes sense, print.css is low priority and should give way to everything else. Still could start earlier if there are no other downloads competing for precious resources.
So on the wall of shame - IE worst, FF yuck, Webkit bad, O least bad.
Recommendation
Ditch media="print" if you have one! (Hey why isn't this a yslow/pagespeed rule?). Ditch it because in the best case scenario it will only block onload. In the worst case it will block initial paint, onload and DOMContentLoaded. Sitting in front of a white page with no feedback is the worst possible user experience.
Put all (should be minimal anyway) print rules inline in your normal screen stylesheet.
@media print { body {font: fit-to-print} .big-ads, .sidebar, .menu {display: none} }
Comments? Find me on BlueSky, Mastodon, LinkedIn, Threads, Twitter
