How to Trim Page Weight to Boost Page Speed and Increase Conversions [Infographic]

March 09 2017
 

Trimming page weight will boost page speed and increase your company’s reputation and conversion rates, especially for mobile.


One of the best ways to increase website conversions and build customer trust in your online brand is to boost your page speed. However, many businesses fail to make the connection between site performance and increased revenue. More than half of mobile web visitors will abandon sites that take more than three seconds to load, and one in five users who abandon your website will never return. Increasing page speed leads to more visitors and higher conversion rates, and boosts your bottom line. Website performance has many facets, but today we will focus on page weight (sometimes called page size).

What is page weight?

Page weight is the combined size of all elements required to load a web page such as HTML, CSS, JavaScript, images, and custom fonts. Reducing page weight can significantly improve your page speed, especially for mobile visitors.

  • Wireless for 4G LTE speeds can reach up to 12 Mbps.
  • According to the HTTP archive, the average size of a mobile page is 2.2 MB (a nearly 70 percent increase from a year ago) and consists of 92 individual HTTP requests on average.

If we assume an average 4G LTE speed of 8.5 Mbps, every megabyte increase in page weight slows your site down by another second. While modern 4G networks offer plenty of bandwidth, latency of mobile networks is the silent performance killer. Even under favorable conditions, latency can easily add 300ms or more to your TCP round trip time (RTT).

For example, the average mobile page makes 92 HTTP requests. Assuming 20 percent of those requests establish a new TCP connection, your site’s download time will increase by 5.4 seconds. For the average mobile page (2.2 MB), that’s 7.6 seconds total—more than double the 3-second benchmark.

Measuring page speed and page weight

Before you can optimize page speed, you must first establish a performance baseline. Without one, you will fly blind; any optimization efforts you make are just guesses and you won’t know if you’ve improved speed or not. The fastest way to start is with the tools already included in your browser, or with a free online speed test.

Page speed tools

Reducing page weight

Now that we understand the need to reduce page weight, let’s look at some best practices to do that. Each technique deserves its own blog post, but for now we will divide them into three high-level optimization categories.

Reduce file size

  • Optimize images for web and mobile devices.
  • Remove unnecessary characters from custom fonts.
  • Enable gzip compression in your web server configuration.

Reduce HTTP requests

  • Avoid redirects, especially for landing pages.
  • Concatenate CSS and JavaScript files.
  • Use image sprites, especially for icon sets.

Network optimizations

  • Use a content delivery network to reduce latency and RTT.
  • Use responsive and adaptive design techniques to further trim page weight for mobile visitors.
  • Leverage browser caching to avoid downloading resources more than once.

For more in-depth discussions on each of these techniques to reduce page weight, check out these guides:

Continuously monitoring your page speed

Improving page speed isn’t a one-time activity. With new content, new products, and new features, your site is always changing. Each change could add weight and ruin your previous optimization efforts. That’s why it’s critical to routinely monitor all aspects of your site’s performance. With a good End-User Monitoring solution, you can:

  • Analyze site performance trends over time
  • Alert when page load times deviate from established baselines
  • Provide in-depth vision into real user sessions
  • Correlate performance regressions and improvements with business outcomes in real time

Next steps

The results are in: Trimming page weight will boost page speed and increase your company’s reputation and conversion rates, especially for mobile. Armed with tools to measure website performance, techniques to reduce page weight, and solutions to continuously monitor your end-user experience, it’s time for you to take action. Slim down your pages, turbocharge your site’s performance, and leave your competitors in the dust!

Jordan Bach
Jordan Bach is a DevOps engineer and full-stack software developer in Dallas, TX. His favorite technologies include Ansible, Docker, Ruby, Rails, Redis, Vim, Go, Hubot, and Jenkins. When he is not building fantastic products, he enjoys playing guitar, hooping it up, escaping to nature, and smoking ribs low and slow.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form