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
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.