June 1, 2016

Let’s Talk About:

The Page Weight Conundrum

In 2015, the average size of a single web page surpassed the 2MB mark and has only increased since then. Images comprised roughly 2/3 of that total size, and a quarter of sampled sites contained between 21 and 40 image requests per page. For devices with an inferior connection, loading a page of that size can be arduous, especially when factoring in mobile latency issues

As web professionals, we're responsible for the performance of the sites we design and build, and image optimization is an area ripe for improvement! New image formats, HTML specifications, and browser capabilities make the delivery of optimized images much more achievable. We're now much closer to a native responsive solution and can start implementing these improvements today!

In a recent engagement, we worked with the National Trust for Historic Preservation to optimize page load by using advanced caching techniques and an on-the-fly image processor, with most pages fully loading in 1.5 seconds or less, while maintaining the same image quality.

Read About SavingPlaces.org

Community Thoughts on The Page Weight Conundrum...

  1. 1. Web performance is user experience Page load time also has a significant impact on mobile users’ experience. My team at Etsy found an increased bounce rate of 12% on mobile devices when we added 160KB of images to a page.
  2. 2. Managing Mobile Performance Optimization Considering the current preference for rich design, it’s unfortunate that images are often the culprit of heavy page size. But image-led design is still possible if each is optimized and compressed before and after export to the right format.
  3. 3. Why We Need Responsive Images It is extremely rare where one optimization lets us knock off such a significant amount of page weight, but here we are staring one such technique right in the face. 72% less image weight.

Related Articles

Responsive Images with srcset & Craft

Easy Responsive Background Images in Craft and WordPress

Speed Up Rails By Starting on the Front

Washington DC Metro
105 West Broad Street
4th Floor
Falls Church, VA 22046

Durham, NC
309 E. Chapel Hill Street
4th Floor
Durham, NC 27701

Boulder, CO
1915 Broadway
Boulder, CO 80302