Bloating your code

Why are websites getting fatter?

David Hsieh
Bloated image via Shutterstock

Web obesity is becoming an epidemic. Websites have increased about 25 percent from a year ago, with today’s site averaging 2,162 KB. In the past five years, websites have grown 208 percent. If the web obesity epidemic continues, there is no telling what will happen.

By having a fatter website, the user experience is richer – higher quality images, more content, personalised features, increased functionality, etc. that are all contributing to the page growth. Furthermore, continuous delivery and lean development methodologies means more changes are coming faster.

All of these changes are useful, but are at the cost of performance. In fact, every added kilobyte makes a website slower. If nothing is done to these bloated websites, the problem will continue to escalate, leading to frustrated users, increased site abandonment and decreased conversions.

Here are five key factors that contribute to website obesity and dramatically affect latency.

1. Content

As webpages grow, content overload is hurting desktop performance. According to HTTP archive, the total transfer size of websites (an indicator of how heavy a website is) has grown by an average of 5 percent annually and there are no signs of website weight slowing down.

At this same growth rate, by late 2017, the average page will be 3 MB. That same content will be pushed to a mobile device, resulting in even slower performance.

2. High-resolution images

With the growing need for visual stimulation and instant gratification, images now account for 62 percent of an average page’s total size. More specifically, the transfer size of images (an indicator of heaviness attribution to images) has grown by more than 200 percent over the last five years while the total image requests have stayed relatively flat over the same time period according to HTTP archive.

Interestingly, the use of images on the web is exploding. But it’s not the number of images, rather the size of the image that is increasing. For example, big, beautiful images allow online shoppers the ability to see enough intricate detail to convert and make a purchase. But they have a downside – big images add to a website’s waistline and can kill performance.

3. Dynamically generated HTML

Allowing web publishers to dynamically change the content of a webpage as a user interacts has its perks. In fact, 53 percent of consumers tend to make higher-value transactions with retailers that have a more personalised experience.

The tradeoff: an increased dependence on dynamic HTML to create a more personalised experience, which can contribute to increased website weight.

4. Responsive design

Amidst the different devices are hundreds of ways images and pages can be resized to fit different screens. Websites built with responsive frameworks such as Bootstrap and Angular are adaptive, have all the code in one place, use a single URL for all devices, and above all, provide for a better user experience.

The ugly truth is that responsive designs add to the page complexity of a website, require a complete rewrite of the frontend stack, and contribute to heavy page weight. A responsive page still requires the browser to download a large HTML file, run certain scripts, load CSS files, and download images, all of this leading to a bloated Document Object Model and performance problems that could hinder conversions.

5. Third party JavaScript code

The use of ads, social sharing widgets, analytics and other third-party code has increased dramatically over the years. According to HTTP archive, 40 percent of a website’s code is from third parties, on average and this will only increase over time.

In an effort to keep up with the times, web pages are getting stuffed with third party code, a heavy contributor to slower page load times. With all of these contributors to website obesity, doing nothing is not an option.

The problem: Fat mobile sites on thin data connections

The shift to mobile also presents its own unique challenges. Nearly half of all e-commerce traffic is driven from mobile devices. However, mobile performance latency over mobile connections and Wi-Fi networks are still slow and congested.

Although mobile traffic has increased by 25 percent, mobile conversions have plummeted by 73 percent over the same time period. Consequently, the average response time on mobile is 5.78 seconds – 28 percent slower than a year ago. If nothing is done to improve web performance, these issues are a potentially disastrous combination. Compound that with the “Mobilegeddon” phenomenon, which favours faster load times on mobile devices to get top billing in Google’s search algorithms, and the results are disastrous.

What those extra pounds could mean for your business

Having a hefty website could have radical performance implications that directly impact revenue. For e-commerce sites, conversion rates drop by up to 50 percent when “browse” pages increase from one to six seconds. More telling is that 68 percent of people will not wait more than five seconds for a page to load on a mobile device. And what’s worse is more than 75 percent of customers left for a competitor’s site due to slow speed at peak traffic times.

Equally important is application performance and its impact on designing, building, and delivering web applications. In other words all of the content that a developer is responsible for – HTML, JavaScript, Images, etc. all have a significant impact on performance.

Watching your weight

Face it – websites are growing. Take preventive measures to ensure your website is healthy by keeping web performance at the top of your priorities. Ways to stay healthy include:

  1. Quantify and continuously monitor performance activity. Use an Application Performance Monitoring (APM) tool to measure performance and know which indicators to focus on and which ones provide meaningful outcomes – Time to First Byte, Start Render, Page Load Times, and DOC Complete to name a few.
  2. Cleanse your scripting code. Take out all unnecessary third party plugins and unused scripting code or find lightweight plugins that accomplish the same task, but don’t add significant page weight.
  3. Optimise your images. Determine the best image compression, format, and quality levels for each individual image to reduce file sizes and improve download times. Outputting the right image for web and mobile application delivery across thousands of images is hard work and therefore, using an automated image optimisation service is key.
  4. Implement an intelligent Content Delivery Network. Accelerate and optimise the delivery of content to provide the best end user experience. Use a content delivery network that not only provides network acceleration, but also provides application acceleration capabilities and continuously optimises application performance.

By taking these preventive measures to slim down your website, you can improve performance – without sacrificing customer satisfaction. Don’t fall victim to website obesity. Take immediate action to improve web performance.


David Hsieh

David Hsieh brings more than 25 years of tech industry marketing experience to his role as CMO of Instart Logic. A leader in web experience optimisation, Instart Logic combines speed, security and scale to transform cloud application delivery for leading performance-driven organisations.

Inline Feedbacks
View all comments