New Web Accelerator Tutorials Published

We have just published some new tutorials to get you up and running with the latest features of the Sevenval Web Accelerator (WA). The tutorials look at how to use WA for image optimization, content optimization, and request reduction. If you are new to WA, or if you simply want a general, hands-on overview of its most common features, then these tutorials are for you!

The Sevenval Web Accelerator

The Sevenval Web Accelerator can give your website a serious performance boost, without having to make any code changes to your website. It achieves this as a device-aware, caching and optimizing proxy server that sits between your website and your visitors. All you need to do is specify which features you want to enable in a small configuration file. WA will do the rest, serving up the best optimization possible depending on the user’s device. If you want, it’s possible to have really fine-grained control over the optimization process, on a per-page and even a per-tag level, but that’s not for everyone. If you want to just get it set up and running with minimal fuss, then this is possible too.

Measuring performance gains

In writing the new tutorials, we wanted to give a good overview of the capabilities of WA, without jumping into too much detail. It was also important to us that the performance improvements at each step be documented in a transparent way, with well known and recognized free-to-use tools.

First we set up a new, dedicated example site (example-backend.sevenval.com) to run the Web Accelerator against. So, you can follow along the tutorials using this test website and verify the numbers for yourself, or you can plug in your own website directly and see how your own website performance improves. In either case, the tools we used to highlight optimizations are ones that are free and accessible to all:

New test website

  • We used Chrome Developer Tools to measure page and resource sizes, as well as number of network requests. To launch dev tools, just hit `CMD-ALT-I` in your browser, and you will have access to page sizes, resource sizes, network requests and much more. You will then be able to measure directly how your web pages have improved.

Chrome Developer Tools showing image size improvements

  • For an external audit of the performance improvements delivered by WA, we used Google’s PageSpeed Insights tool. At each step, we documented how the page size was reduced, and how the number of network requests required also fell, and used a before and after PageSpeed Insights comparison to highlight the often considerable improvement.

PageSpeed Insights before and after scores

The tutorials are divided into three sections:

  1. Image optimization Arguably one of the most significant web performance improvements that you can make. Images generally make up the largest proportion of web page weight, so optimizing them is one of the first things you should do. This part of the tutorial demonstrates how to configure:
    • Image scaling
    • Image compression
    • Image lazy-loading
  2. Content optimization This part of the tutorial demonstrates how the web page itself, as well as other text resources can be optimized with WA. This includes:
    • Minification of HTML, JavaScript, CSS and SVG markup
    • Filtering of media queries and responsive image markup
    • Reordering of `head` content
  3. Request reduction This last part of the tutorial demonstrates how the number of requests required to deliver a page can be reduced. To achieve this, WA employs the following techniques:
    • Inlining of CSS, JavaScript, and even small images
    • Concatenation and automated script management

While the tutorial gives a brief description of how to configure the most common Web Accelerator features, many of these features are extremely powerful, and are backed up by detailed documentation should you want to fine-tune them even further.

Performance gains

If you activate all of the features described, you should see handsome performance gains. For our test site, we saw the page size drop from 1.3MB and 24 HTTP requests, to just 169KB and 12 requests. The PageSpeed Insights score saw a radical improvement, rising from 49 to 94! The improvements are documented below!

Requests Page size KB PageSpeed Insights (mobile) PageSpeed Insights (desktop)
Original without WA 24 1319 45 49
After Image Optimization 20 211 80 83
After Content Optimization 18 183 81 91
After Request Reduction 12 169 87 94

So what is the impact of all these improvements? First, a much better user-experience: pages load faster, and users don’t need to watch progress bars and spinners. But it’s not just speed! If your site is slow, you impose a real, measurable, financial penalty on your visitors. Looking at https://whatdoesmysitecost.com/ the cost per page view of our example site was ~$0.14.

If a user visits the site daily for even just a single page view, this would cost $4.2/month. For a site with 500K monthly users, the collective cost would be $2.1M!

The Sevenval Web Accelerator reduced the payload of our test site to just 12% of the original. This corresponds to a $0.017 cost per page, or $0.5/month. This is an almost-tenfold saving per page! Scaling things up, the collective cost savings for all users would be ~$1.8M. With WA, everybody wins!

Convinced yet? Then go to the tutorials:

Image Optimization
Content Optimization
Request Reduction