By Tim Kadlec CHAPTER 4usual and unusual Suspects
For any item included on your page, do whatever you can to minimize its
impact on page weight and load time. Among the greatest offenders are
uncompressed images. Thankfully, they’re also one of the easiest to fix.
Image optimization can be automated into a build process, using excellent
tools such as the ImageOptim Command Line Interface^24. If you don’t
have a formal build process, or the mere sight of a terminal window sends
shivers down your spine, you can just as easily use GUI-based tools such
as ImageOptim^25 and ImageA lpha^26 to drastically reduce the size of your
image files simply by dragging and dropping.
Social network sharing buttons are another common source of bloat.
To avoid their excessive heft by default, you can lazy-load the code for the
buttons only after the user makes it clear they want to make use of them.
The Filament Group’s SocialCount^27 is an excellent example of this tech-
nique. By default, the buttons are simply CSS with a small image. When
the user takes action (for example, hovers over a button) the actual sharing
script for that network is dynamically loaded and added to the button.
While jQuery-based, the functionality it performs is simple enough that
you could easily adopt it for your own framework, or even for vanilla JavaS-
cript.
You can apply that same sort of thinking to other components on your
page that may not be as obvious to you at first glance. In his excellent
article, Deploying JavaScript Applications^28 , Alex Sexton talked about delaying
the load of entire sections of code until the user has taken an action that
requires that code.
The example he provided was the Hugo Boss site. If a customer clicks
on the “Write a Review” button, a modal box appears for them to rate the
24 http://jamiemason.github.io/ImageOptim-CLI/
25 http://imageoptim.com/
26 http://pngmini.com/
27 http://filamentgroup.com/lab/socialcount/
28 http://smashed.by/javascript-apps