Home / The Price of Increasing Page Weights

The Price of Increasing Page Weights

Last November at Acquia’s inaugural Engage customer conference, web design pioneer Ethan Marcotte gave a 30-minute talk on responsive design -- the influential design concept he pioneers in his 2011 book ‘Responsive Web Design’ -- and the consequences of ever-increasing page weights: the size of a page as measured in bytes, which affects the time it takes for a page to load over connections with varying speeds. In the past several years, the bandwidth needed to load and view a website has increased drastically. According to Marcotte, four years ago the average web page size was 320KB. Flash forward to the fall of 2014, and the average web page size jumped to 1.9MB… and still growing. Marcotte has seen instances of page weights getting into the double digits -- around the 20MB range -- something previously unheard of.

As a retailer competing in a world of visual content and seamless commerce experiences, the obvious goal is to build a beautiful commerce page that is responsive, fast, on-brand, and lightweight. Give the consumer everything they want, nothing they don’t, and make it scalable across platforms so that anyone with access to an internet connection can interact with your content. Seems like a pretty tall task, arguably impossible from some perspectives. Fortunately, Marcotte isn’t of the mind that this is an unsolvable problem. But how do we solve it? Performance budgets and progressive enhancements, to start.

According to an article by Fast Company, sites like Amazon and Google have done calculations directly correlated to page load times, and found the financial implications of a slower site to be staggering. For Amazon, a one second slowdown in page load would result in a whopping $1.6 billions in sales annually, and for Google, just four-tenths of a second slower search results would lose them 8 million searches per day.

Furthermore, the 2014 holiday shopping season delivered a disastrous user experience across the web, during events like Black Friday and Cyber Monday, when the top 50 ecommerce sites all experienced slower load times than last year, and some big name sites like BestBuy and HP went down completely. Catchpoint Systems, a web performance monitoring company concluded desktop webpages were 19.85% slower than the year prior, while mobile webpages were a shocking 57.21% slower. In an era when mobile and tablet shopping is growing at such a rapid rate, this news isn’t good for online retailers.

So what’s the solution? Consumers beg for beautiful, simple, and intuitive online commerce experiences, and those are inherently ‘heavy’ to build. Many designers of luxury sites rely on dynamic, Flash-enabled themes with a heavy graphic component, but that’s simply not a sustainable design style. Graphics, video, and interactive content are commonly what make up the most captivating user experiences, but they’re also what’ll slow down your site the fastest. The more of these elements you incorporate, the more they’ll slow you down. On top of that, consumers also want to be able to shop on their desktops, laptops, tablets, or mobile phones, and this multi-channel approach frequently necessitates the use of responsive design.

Benefit Cosmetics is an example of a business that's already doing some great things. Their site experience is seamless from desktop to mobile, with a beautiful design and cohesive branding. No content is lost across platforms, and the browsing and buying experiences remain intact no matter how you’re experiencing them. They make great use of content, which in turn enables them to present a clean and clear website that loads quickly and works beautifully.

Marcotte introduced the idea of a ‘Performance Budget’ in his talk -- taking into consideration at the beginning of a website redesign the amount of bandwidth you’ll be aiming to use, and then working from the beginning with that goal in mind. Too often businesses plan a redesign around aesthetics, only to arrive at the end with severely compromised functionality.

He also discussed the idea of ‘Progressive Enhancements’ -- building your website using layered web technologies, so that anyone with an internet connection can access the basic content and functionality of your website, but also being able to deliver an enhanced version to viewers with more advanced browsers and access to greater bandwidth.

All of this leads to one simple - yet exceedingly hard to execute - conclusion: don’t make bloated e-commerce pages. Consider your ultimate goal, and work backwards from there to make smart, informed choices, keeping in mind page weights every step of the way. From the social widgets you install to the webfonts you pick to the size and quality of your graphics and the complexity of your scripts -- everything needs to be considered for it’s effectiveness, frequency of use, relative need by the consumer, and ability to contribute to the bottom line.

What are some examples you've seen of retail sites that are beautiful, fast, and accessible?

Photo credit: "Bascula 9" by L.Miguel Bugallo Sánchez (http://commons.wikimedia.org/wiki/User:Lmbuga) - self made, http://commons.wikimedia.org/wiki/Image:Bascula_9.jpg. Licensed under CC BY-SA 3.0 via Wikimedia Commons - http://commons.wikimedia.org/wiki/File:Bascula_9.jpg#mediaviewer/File:Ba...

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.