It’s been fairly well documented that the average size of webpages has been growing by leaps and bounds, with images making up the majority of the size. Based on my own stats for 160+ HigherEd responsive sites, images account for 73% of the total download. And when you’re dealing with a long-form page like www.ND.edu, images can account for even more (92% to be exact). In a situation like this, finding ways to cut down on the number of images, or deferring the loading of images, can result in a huge impact on not just the download size, but load-time as well.
ND.edu was built (good or ill) with three major breakpoints in mind: mobile, tablet, and desktop. We did this so we could really focus during our two month deadline on optimizing for our mobile users. So from day one, our mobile payload has been pretty light:
- 260 KB
- 25 Requests (13 Images)
In the year and a half since we launched this version of ND.edu, we had limited time to optimize as much as we’d like. Initially we focused on the two carousels at the top, only loading the front-most image and delaying the rest until the user chose to interact with them. But that still left us with a lot of content images. So when the time came to really get into optimizing, we were working from the following baseline for our desktop size:
- 2.4 MB
- 132 requests (117 images)
Potential Areas to Optimize
We’ve made a habit of tracking everything on our sites using Google Analytics Event Tracking. Because of this, we know how many of our visitors were seeing which images. So if we start at the top of the page and start scrolling down, naturally visitors start dropping off.
News and Events
24 images (646.5 KB total) viewed by 21.4% of visitors
6 images (208.3 KB total) viewed by 8.9% of visitors
14 images (406.9 KB total) viewed by 6.5% of visitors
4 images (140 KB total) viewed by 4.1% of visitors
Faith & Service
9 images (328.1 KB total) viewed by 3.5% of visitors
Now heading all the way back to the top of the page to the feature location sidebar (click on “Learn More” below the location name in the top right).
26 images (169 KB total) viewed by 0.25% of visitors
noscript tags, so they get images, but not the optimization.
As you may recall from above, we started with 132 requests and 2.4 MB. We also had a loadtime that averaged 4.9s and a WebPagetest score that looked like this:
After the optimization, we were down to 39 requests and 364 KB (changes by the day). The loadtime also dropped to an average of 1.8s. Additionally, our WebPagetest score improved to this:
Natually, if a user decides to scroll all the way down the homepage, as well as interact with every section of the page, they’ll still end up with the full payload. But for those that don’t, they get a much improved experience. Our next step is to update our lazy-loading script to better handle mobile images. Currently we’re passing most of them through a server-side image optimization service by Sencha. Similar services include imgble and ReSRC.it.
If you’re interested in trying your hand at lazy-loading images, here’s a handy case study on Smashing Magazine by Anders Andersen and Tobias Järlund. You may also want to check out this post by the BBC News developers on how they handle images.
Good luck and happy optimization.
NOTE: The total size on www.ND.edu depends a lot on the primary feature image. Since this article was originally posted, we updated to a new image that refuses to compress well, which is resulting in larger than 400 KB total download size. So as that image changes, so will these results.