By Christian Heilmann CHAPTER 3JavaScript is good at testing for support and then loading resources on
demand. We just don’t use it enough for that. Right now, we find ourselves
with more and more solutions that first load large amounts of high-end
resources because caching will improve the experience as the user moves
through the site. This is wasteful as it doesn’t help the users who will never
benefit from that high-end experience. It might not seem to be a problem
at all for us, with fast connections, big screens and powerful processors.
But this is not what we build for (unless you’re creating developer tools)
and we should ensure that our work is tested on low-power machines and
mobiles and flaky connections. The more we can delay loading unnec-
essary content or subsequently storing it on the user’s device, instead of
repeatedly loading it, the better our solutions will be.
Personally, I find progress bars and animations to be admissions of
failure. No one enjoyed them in Flash intros and they drive us nuts on
YouTube, so why should I have to wait a few minutes because you want to
preload everything, instead of analyze how I interact with your code?
So let’s think before adding the 12 unnecessary fonts on the first page,
the CSS framework that we use to create a two-column layout, and the
kitchen sink JavaScript library we use to add a single event handler to a
button.
Let’s check the available screen space before loading content that will
only need to be hidden because there is no room for it. Let’s not load images
before the user actually scrolls them into view (to avoid causing unsightly
shifting of content, keep a box with the same size in place, then replace it
with the image). Let’s not add background music just because we think users
will want it — let’s wait till they are really happy to hear it.
There is natural downtime in the interaction with our apps. For ex-
ample, people will spend some time entering data into forms. So why not
use that time to load additional resources? A focus handler on the first text
field could trigger a nice-to-have resources download. If the user never
enters the form, nothing needs to happen.