NoteAs of this book’s writing, the latest version of Chrome automatically
debounces scroll events.Technique: Reduce image rendering
Not all elements are rendered equally. Browsers have to work overtime when displaying
certain elements. Let’s look at which those are.
Problem
Videos and images are multimedia element types that browsers have to work extra hard to
render. Whereas the dimensional properties of non-multimedia HTML elements can be
computed with ease, multimedia elements contain thousands of pixel-by-pixel data points
that are computationally expensive for browsers to resize, reposition, and recomposite.
Animating these elements will always be less less than optimal versus animating standard
HTML elements such as div, p, and table.
Further, given that scrolling a page is nearly equivalent to animating a page (think of
scrolling as animating the page’s top property), multimedia elements can also drastically
reduce scrolling performance on CPU-constrained mobile devices.
Solution
Unfortunately, there’s no way to “refactor” multimedia content into faster element types,
other than turning simple, shape-based images into SVG elements wherever possible.
Accordingly, the only available performance optimization is reducing the total number of
multimedia elements that are displayed on the page at once and animated at once. Note
that the words at once stress a reality of browser rendering: browsers only render what’s
visible. The portions of your page (including the portions that contain additional images)
that aren’t visible do not get rendered, and do not impose additional stress on browser
processes.
So, there are two best practices to follow. First, if you’re ever on the fence about adding
an additional image to your page, opt to not include it. The fewer images there are to
render, the better UI performance will be. (Not to mention the positive impact fewer
images will have on your page’s network load time.)
Second, if your UI is loading many images into view at once (say, eight or more,
depending on your device’s hardware capabilities), consider not animating the images at
all, and instead crudely toggling the visibility of each image from invisible to visible. To
help counteract how inelegant this can look, consider staggering visibility toggling so that
the images load into view one after another instead of simultaneously. This will help guide
the user’s eye across the loading sequence, and will generally deliver more refined motion
design.