5 years later: print CSS still sucks

April 25th, 2012. Tagged: CSS, performance

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}
}

Tell your friends about this post: Facebook, Twitter, Google+

28 Responses

  1. Thanks Stoyan, YSlow will definitely punish such performance heresy:
    https://github.com/marcelduran/yslow/issues/30

    BTW, media=”print” should also be penalized by *YSlow Green Ruleset* (WIP) for trashing out the environment and putting trees down :-)

  2. Interesting read, thanks!

    Have you any idea why the browsers would behave like this? Surely it would make far more sense to download it in the background on page load without blocking page load? I can’t see that being any extra effort for the browser.

  3. Hey Stoyan!

    What’s the benefit of putting @media print {} rules into a media-less stylesheet when it also blocks? Shave 5-6 set up / tear down packets? If I still have to wait for all my friends to go to dinner, it doesn’t matter how they carpool :P .

    I think it may be reasonable to defer any link[media=print] downloads until you actually require them (are printing) as I assume 99% of websites we visit we *don’t* print, but I guess your focus is simply load time (in which case you can start a request after onload).

    P.S. Does @media print work in IE6-8? http://caniuse.com/#search=@media seems to conflict with http://blogs.msdn.com/b/ie/archive/2005/06/10/428149.aspx (I assume caniuse is only referring to the CSS 3 versions). If it’s not, perhaps this is why authors use instead (if it *does* work)?

  4. Any idea why any broweser even downloads the resource at all before they are in a print media state?

  5. @Dan I meant putting the print rules in the same css file, in other words having 1 instead of two files

    @Daniel, @Callum, I dunno, it kind of makes sense if you load a page and then disconnect and then print. Still IMO the print css should be lazy-loaded (after onload event handlers finish)

  6. I just wanted to clarify—since it’s not explicitly mentioned in the post—that specifying @media print {} inside a link[media=screen] won’t work. (At least, it won’t in Chrome. I haven’t bothered to test any other browsers.) Remember to remove the media attribute from the link element if there are print styles within that are to be used.

  7. Markus, do you see the same slowdowns if the print style sheet is embedded in a separate <style type=”text/css” media=”print”>…</style> element, or does that approach have the same benefit as putting @media print {…} into a media=”all” (or no-media) style sheet? I would expect the benefit, but browsers often surprise me.

  8. Er, sorry, I meant “Stoyan”, not “Markus”. I’m not sure what happened there. Sorry!

  9. Eric, I haven’t tested inline style media="print" but there should be no issues, since it doesn’t involve another HTTP request

    The problem I was discussing was about the extra HTTP request for a print.css and how it needlessly interferes with things unrelated to printing. And we know that another HTTP request can and *will* make things worse, because it’s a jungle out there :)

  10. Right, that was my assumption. Is it okay with you if I grab a copy of your test page and create some variants, just to be sure?

  11. @Stoyan, nice catch!
    Have you filled bug reports for this erroneous behaviour to browsers? Or only to YSlow ?

  12. It’d be interesting to track print events (onbeforeprint, etc) on a big site. I feel like had someone been tracking this for years, the trendline of people printing out things has died in a BIG way as mobile has been capturing most use cases.

  13. @Paul Irish you will wonder WHO prints the most. Often its “dinosaur” stakeholders or vip clients (and their secretaries).. Though there are some use cases, like airline tickets, where web-page printing is still alive.

  14. [...] Stefanov的部落格一探究竟,一開始就看到5 years later: print CSS still sucks這篇,5年後print [...]

  15. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  16. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  17. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  18. [...] on the (mobile) Web. You should probably listen to it (and definitely click throught the links).“5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a [...]

  19. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  20. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  21. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  22. Hello! You’ve got a great site! I will for sure return to get updates.

  23. [...] recently remembered how browsers block rendering because of print stylesheets, I speculated that all the nonsense media will also block rendering. Unfortunately I was [...]

  24. [...] fear not. The workaround is to put your print-specific CSS at the bottom of your normal CSS like [...]

  25. An impressive share! I have just forwarded this onto a friend who was doing a insufficiently inquiries taking place this. And he actually prearranged me dinner due to the fact that I stumbled upon it for him… lol. Hence let me alter this…. Merit for the meal!! Except yeah, gratitude for spending some calculate to natter on the subject of this matter at this juncture proceeding your web site.

  26. Hi Stoyan.

    Was the stylesheet prefaced with the @media query as well?

    Also I think what might trigger blocking is styles not related to the print media being present in the stylesheet.

    Otherwise yes, this is a bottleneck that needs resolution.

  27. [...] “5 years later: print CSS still sucks”You might think that linking to a separate print style sheet would be a good idea from a performance point of view. Stoyan Stefanov did a little bit of research and yes, you guessed right, linking to a separate print style sheet is very bad for performance. This doesn’t mean you shouldn’t create a print style sheet (you just shouldn’t link to it separately). [...]

  28. […] Print CSS still sucks […]

Leave a Reply