Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

With a good end-user monitoring solution, you can analyze site performance trends over time, provide in-depth vision into real user sessions, and more.

· Performance Zone
Free Resource

Transform incident management with machine learning and analytics to help you maintain optimal performance and availability while keeping pace with the growing demands of digital business with this eBook, brought to you in partnership with BMC.

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, the 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 that 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!

Evolve your approach to Application Performance Monitoring by adopting five best practices that are outlined and explored in this e-book, brought to you in partnership with BMC.

Topics:
page weight ,performance ,website speed ,page speed

Published at DZone with permission of Jordan Bach, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}