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.
Join the DZone community and get the full member experience.Join For Free
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?
- 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
- Chrome DevTools
- Firefox Network Monitor.
- Google PageSpeed Insights
- Android Remote Debugging
- Safari Remote Web Inspector
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.
- Use image sprites, especially for icon sets.
- 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:
- A Beginner’s Guide to Website Speed Optimization
- Designing for Performance
- The Complete Guide to Reducing Page Weight
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.
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!
Published at DZone with permission of Jordan Bach, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.