Welcome!

AppDynamics the World Leader in APM and DevOps

AppDynamics Blog

Subscribe to AppDynamics Blog: eMailAlertsEmail Alerts
Get AppDynamics Blog via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Blog Feed Post

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

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

http://46zwyrvli634e39iq2l9mv8g.wpengine.netdna-cdn.com/wp-content/uploa... 124w, http://46zwyrvli634e39iq2l9mv8g.wpengine.netdna-cdn.com/wp-content/uploa... 422w, http://46zwyrvli634e39iq2l9mv8g.wpengine.netdna-cdn.com/wp-content/uploa... 624w" sizes="(max-width: 660px) 100vw, 660px" />

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!

http://46zwyrvli634e39iq2l9mv8g.wpengine.netdna-cdn.com/wp-content/uploa... 300w, http://46zwyrvli634e39iq2l9mv8g.wpengine.netdna-cdn.com/wp-content/uploa... 624w" sizes="(max-width: 730px) 100vw, 730px" />

The post How to Trim Page Weight to Boost Page Speed and Increase Conversions [Infographic] appeared first on Application Performance Monitoring Blog | AppDynamics.

Read the original blog entry...

More Stories By AppDynamics Blog

In high-production environments where release cycles are measured in hours or minutes — not days or weeks — there's little room for mistakes and no room for confusion. Everyone has to understand what's happening, in real time, and have the means to do whatever is necessary to keep applications up and running optimally.

DevOps is a high-stakes world, but done well, it delivers the agility and performance to significantly impact business competitiveness.