January 30, 2018
This final post in our web performance series will focus on design performance. If you haven’t had a chance to read the other two in the series, you can check them out below:
- Part 1: Web Server Tweaks to Make Your Users Happy: Site Performance
- Part 2: Benefits of Performance Budgets and Real User Monitoring: Site Performance
- Part 3: Images: Design Performance and Perception: Site Performance (You are Here!)
A great site design should not only look good, but also perform well. The balance of resizing a design for various browsers and devices is as much an art as the technology behind it. There is a lot of pressure to keep up with the latest technology and techniques as a developer or designer.
Automating performance and design techniques can result in a happy user.
Your typical user is not visiting a site looking for great design and performance. A user’s expectation is often low for an optimized experience. However, optimizing a site can result in higher revenues.
Larger sites often suffer from not having an optimized experience because it requires manual effort. We’ll cover some clever automation tools later on.
Since the dawn of the web, images have blessed and haunted a user’s experience. I can still recall in college going from the all-text world of gopher over to http and Netscape Navigator 1.0. Moving from an environment with no images to having images with http was a pretty big step.
Image performance has not changed much since the first slow-loading interlaced GIF. We still face challenges with bandwidth, load performance, and image format wars. The challenges of the image optimizations haven’t changed much since the beginning.
Image Load Performance
One aspect of images most people don’t understand is how much CPU power it takes to decode an image. Those CPU cycles translate over to a period of time, which in turn affects page load and performance. A page with many unoptimized images that resize, animate, or fade can result in a bad experience.
A common mispractice is to use the same, large desktop image on smaller mobile screens. Although this will work, it requires your phone/tablet/device to use more CPU power. The browser may have to redraw that image more than necessary because it was never resized.
A few new cloud services help automate how images get resized and served in the proper image format:
Rendering performance doesn’t end with images. Performance influences how we should utilize CSS and animation on objects. Paul Lewis at Google does a great write up on rendering performance.
Image Format War
There was a long spread where we only had the GIF/JPEG duo. It seems only in the past few years we have access to some new image formats that we can actually use. The image war continues because big companies that think they have the best solution. Here is a great walkthrough of the history of the some of the competing file formats.
As of this writing, Google’s Webp seems to hold the most promise by providing the best of PNG, GIF, and JPEG. Mozilla is still contemplating if they will support Webp. There is little hope support will exist for Safari- and Microsoft-flavored browsers.
Companies like Cloudinary and Imgix serve the most efficient format to the browser. These services shine with a large site, like an ecommerce store.
If you are working on a smaller site, you don’t have to use a third party. If you are working on a one-off theme for a client, you can fallback by using a format like Webp. CSS-Tricks covers Webp fallback techniques in depth.
The State of Vector Formats
SVG (scalable vector graphics) offer great options for performance compared to bitmap images. The resolution independence of SVGs is the shining feature of this vector format. Even on high-resolution devices, the SVG format will look crisp and clean with no extra file weight.
SVG currently also has some shortcomings. A full page of SVG animations can completely choke. Many gradients or complex paths can be also be CPU intensive. There are, however, animation libraries that are getting better for SVG animations.
Here are a few popular SVG animation libraries to look at:
Here are some good resources that cover best practices and performance of SVGs:
- SVG on the Web — A Practical Guide
- Sitepoint, “Is Using SVG Images Good for Your Website’s Performance?”
- CSS-Tricks, “High Performance SVGs”
The challenges of image performance haven’t changed since the beginning. It will be interesting to see what the next ten years will bring. For now, we should continue to optimize our images and understand the impact images have on our users. SVG holds the most promise of changing the users experience over the next few years.