Lazy-loading print stylesheets

By crisp on Tuesday 30 November 2010 00:33 - Comments (13)
Categories: CSS, Tweakers.net, Views: 11.929

The thought crossed my mind before, but I never acted on it: lazy-load your print stylesheets! So now I took the bull by its horns and implemented it for Tweakers.net.

http://tweakers.net/ext/f/IqHL7OjyczDF8olW3ozMcENL/full.jpg

The trouble with print stylesheets is that a browser will always request it up front, but in practice it is rarely used and a browser will wait until the page is fully loaded before printing it anyway, so why not load the print stylesheet after everything else?

Although the savings in page load times will be minimal it still contributes to a faster loading page, and since we already had the necessary javascript functions available it was just a mere 10-minute job.

But I didn't stop there; I realized that a print stylesheet was still lacking for the Tweakblogs, so I implemented it here as well. Not that I would encourage anyone to print out one of my blogposts (save the trees!), but if you do at least it will not print any useless data any more ;)

Happy printing!

Volgende: Crisp Family++ 12-'10 Crisp Family++
Volgende: A moment of reflection 11-'10 A moment of reflection

Comments


By Tweakers user Barleone, Tuesday 30 November 2010 01:04

save the trees!
You had me there; printed your blog and directly put it in the paper recycle bin. :+

[Comment edited on Tuesday 30 November 2010 01:05]


By Duncan McDougall, Tuesday 30 November 2010 01:39

Brillant! Glad to see you've put this idea in practise. It won't go as far as delay until you click the print button. I think the JavaScript to implement this would be a bit too much bloat if it's even at all possible and would disadvantage the offline browsing crowd but I do love how lazy-loading is being used more and more in the web to get the meat up on the screen much quicker.

By Tweakers user Wiethoofd, Tuesday 30 November 2010 02:14

The Direct Messages still seem to be without a print stylesheet.

By Olivier, Tuesday 30 November 2010 03:05

Yes, it's very useful.
On my websites, I've implemented it for something else than printing : sometimes I'm using shadowboxes (or lightboxes, call it like you want), and I load the shadowbox's CSS when the whole page is loaded because the shadowbox won't display until the user click on a thumbnail.

By Tweakers user RobIII, Tuesday 30 November 2010 10:13

Why not put the few rules that are for print-only at the bottom of the main stylesheet? Saves an entire HTTP requests and the main CSS will grow just a few bytes.

I must say I've mostly used a separate print stylesheet too, but lately I'm wondering why I even bother; the few extra lines in the main css add little overhead (especially when using gzip).


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
/* Main CSS here */
#header {
    foo: bar;
}
...
...

/* Print */
@media print {
    #footer, #header { display:none; }
    /* Rest... */
}


Usually the print CSS isn't that large. When it is, then lazy loading would be a good idea indeed.

[Comment edited on Tuesday 30 November 2010 10:44]


By Tweakers user crisp, Tuesday 30 November 2010 10:43

RobIII wrote on Tuesday 30 November 2010 @ 10:13:
[...]
I must say I've mostly used a separate print stylesheet too, but lately I'm wondering why I even bother; the few extra lines in the main css add little overhead (especially when using gzip).
I'd say it depends on the size of the print stylesheet. In the case of Tweakblogs indeed we could just as well add it to the main stylesheet.

There is however an additional usecase for a seperate print stylesheet: we also use it for low-end mobile devices :)

By Tweakers user RobIII, Tuesday 30 November 2010 10:46

crisp wrote on Tuesday 30 November 2010 @ 10:43:
[...]
I'd say it depends on the size of the print stylesheet.
Indeed; I just editted that in but you beat me to it :P
crisp wrote on Tuesday 30 November 2010 @ 10:43:
There is however an additional usecase for a seperate print stylesheet: we also use it for low-end mobile devices :)
True; which makes it clear things are not always black & white ;)

By Duncan McDougall, Tuesday 30 November 2010 14:08

RobIII wrote on Tuesday 30 November 2010 @ 10:13:
I must say I've mostly used a separate print stylesheet too, but lately I'm wondering why I even bother; the few extra lines in the main css add little overhead (especially when using gzip).
Your browser would cache the external stylesheet once but if you include the print css inline on every page you would be downloading it over and over. The cost of inline could outweigh the one time extra server request after a bit of browsing. You're right though, it's definitely not a black & white solution.

By Tweakers user YopY, Tuesday 30 November 2010 19:31

Hm, good plan here - I've been optimizing out a bunch of the Javascript libraries we've stacked up over time, moved them to be lazy-loaded only when needed. Same with (shared) CSS, which is now dynamically loaded. Either lazy-loading the print.css file or putting it at the bottom of the main CSS would save another request. I'm probably going to go with the @media approach though, it just hides some navigation elements on a page.

By Tweakers user Barleone, Wednesday 1 December 2010 01:02

Duncan McDougall wrote on Tuesday 30 November 2010 @ 14:08:
[...]
Your browser would cache the external stylesheet once but if you include the print css inline on every page you would be downloading it over and over.
I bet you are missing a point here. ;)
It's
main.css AND print.css
versus
main.css including printstyles

[Comment edited on Wednesday 1 December 2010 01:03]


By Tweakers user RobIII, Wednesday 1 December 2010 01:28

Barleone wrote on Wednesday 01 December 2010 @ 01:02:
[...]

I bet you are missing a point here. ;)
It's
main.css AND print.css
versus
main.css including printstyles
I'm afraid YOU might be missing the point ;)

Duncan is, correctly, stating that once the print.css is loaded (and served with the correct cache headers etc.) consecutive pageviews will not require an extra HTTP request.

He is also arguing that, when the print rules are in the main.css you will be downloading the "added weight" over-and-over, which is where I have to disagree (a little): If you serve the main css with the same cache headers then the same thing would apply as with the print.css; the request will be made only once so the added weight won't be downloaded over-and-over.

Also, when using gzip I think the added weight would be (in most cases, by my guesstimate) negligible but as stated before your mileage may vary depending on the actual print rules.

When using a smart "cache-busting" technique (like t.net does) you should, in both cases, not really "suffer" from a print stylesheet at all. The lazy-loading thing is a nice third option, but I do wonder if it's really worth the trouble (especially because you need a non-JS (<noscript>) fallback too, and thus now have 2 places instead of one place to change stuff when you're digging in code).

[Comment edited on Wednesday 1 December 2010 02:01]


By Tweakers user Civil, Wednesday 1 December 2010 18:52

RobIII wrote on Wednesday 01 December 2010 @ 01:28:
[...]

Duncan is, correctly, stating that once the print.css is loaded (and served with the correct cache headers etc.) consecutive pageviews will not require an extra HTTP request.
Duncan is refering to "including the print CSS inline on every page, not to include it in de main css file. Including CSS inline will result in downloading it over and over again.

By Paul Irish, Tuesday 21 December 2010 03:14

Print stylesheets now have deferred downloading priority in webkit:
http://trac.webkit.org/changeset/73938
Cheers!

Comments are closed