1-800-530-3992

Automated Frontend Optimization (FEO) With Blaze
Why the frontend bottleneck is the most important performance issue today and what can be done to alleviate it. Introduction t used to be that the answer to most Website performance problems was either to add more hardware or reengineer the backend application code. For most sites, the backend is now the small part of the problem. Pages are generated by the backend quickly but downloading and rendering the frontend code and resources takes a long time. Research shows that for many popular sites it’s the frontend that accounts for over 90% of a users wait time. Content Delivery Networks (CDNs) help address part of this problem by reducing network latency. However, even larger performance gains can be achieved through Frontend Optimization (FEO) techniques that streamline the Web page HTML code and resources.

I

Trends Driving the Frontend Bottleneck A web page’s performance can be split into backend and frontend. Backend time includes generating the page’s HTML and resources. The frontend time includes downloading the resources and processing them in the Browser. There are four important trends making the frontend an important performance issue today and potentially even more important in the years to come: 1. Rich content. Viewing a chart of size vs. time, it goes up and to the right. Since 1995, the average size of a page has grown over 35x, and the number of objects per page has grown 28x. Larger, link heavy pages are driving up frontend load times. 2. Client side code. Not so long ago most sites were fairly simple combinations of HTML and graphics. All the “heavy lifting” was done on the backend. Now almost all sites have some JavaScript code. More sophisticated sites are using AJAX and now HTML5. As we move to replace desktop apps with Web apps, client side code is going to get more sophisticated in order to emulate the rich user experience we’ve come to expect. 3. 3rd party content. Usage of third party sites such as Twitter feeds, Facebook “Like” buttons, Doubleclick ads and Google analytics code is growing rapidly. For some sites, these 3rd party links comprise over 25% of their total requests. 3rd party sites are notorious for blocking or slowing down frontend performance and browser rendering. 4. Mobile browsers. Increasingly visitors are browsing sites on mobile devices with weaker processors and slower connections. Frontend performance is critical for desktop browsers but it’s even more important for the mobile Web.
AUTOMATED FEO WHITEPAPER 1

1-800-530-3992

CDN vs. DSA vs. FEO Content Delivery Networks, Dynamic Site Acceleration and Frontend Optimization are complimentary but different technologies that are sometimes confused with one another. CDNs have been around for some time and do a good job at reducing network latency by caching static objects closer to the user. Many CDN providers have also introduced DSA services to reduce latency for dynamic pages. DSA offers improved routing and TCP optimization on top of basic edge caching. However, both CDN and DSA services address network latency and do little to reduce network activity or streamline the processing of web pages by the browser - often the biggest bottlenecks in modern browsing.
Problem Addressed How it Works

Content Delivery Network (CDN)

Network latency

Files cached in multiple edge caches that are geographically dispersed. Optimize routing. TCP optimization. Compression. Optimize HTML code and page resources

Dynamic Site Acceleration (DSA)

Network latency (especially with dynamic content) Reduce HTTP requests, page size and browser bottlenecks

Frontend Optimization (FEO)

Unlike CDNs and DSA, FEO is focused on changing the HTML and page resources to reduce network usage and browser bottlenecks. FEO makes the content itself faster by dynamically optimizing the HTML code and page resources. FEO reduces the number of page resources required to download a given page and makes the browser process the page faster. CDN and DSA services can then help accelerate the network activity that remains.

AUTOMATED FEO WHITEPAPER

2

1-800-530-3992
Frontend Optimization Techniques FEO is a complex science with many different approaches to speeding up Web pages. However, there are some simple ideas behind many of the optimizations: 1. Reduce number of requests. Each HTTP request for an image, CSS or JavaScript file has an overhead. On mobile devices the overhead of these requests is actually more expensive, time wise, than the size of the page. On desktop browsers, requests are the number two factor governing load time, page size being number one. There are a number of optimization techniques for reducing requests: consolidating multiple images, CSS or JavaScript files, inlining small objects, versioning and loading images on demand are some common techniques. 2. Reduce size of requests. After reducing the volume of requests, the next job is to reduce the number of bytes required for each request. Images often comprise the largest component of any page and therefore will yield the largest pay off from optimization. Many images are larger than they need to be. Optimizing images for smaller screens or resolutions can reduce size without compromising visual quality. Sample image optimizations include adaptive image sizing, lossy and lossless compression. Compressing and minifying text content is also very useful for reducing page size. 3. Accelerate Rendering. Browsers have many blocking behaviors that keep resources from being processed in parallel. In some cases they do so to conform with standards, other times to maintain a commitment to predictable processing, and in many cases it’s simply older browsers working sub-optimally. This is most obvious when using 3rd party tags like ads and analytics, which often slow page loads. FEO can optimize your HTML and page resources to minimize bottlenecks. FEO customizes each page to maximize the potential of each browser. In some cases this means adding features to take advantage of new browser capabilities. In other cases FEO will make changes to overcome deficiencies in older browsers. For example, domain sharding and asynchronous script execution are some of the ways to improve script and connection handling.

AUTOMATED FEO WHITEPAPER

3

1-800-530-3992
Optimization Reduce Requests Reduce Payload Accelerate Rendering

Consolidate CSS, JS and images Just in time image loading Inline small images, CSS, JS Version files for long term cachability Increase cache size using HTML5 local storage Adaptive image sizing by screen size Lossless image compression Lossy compression optimize image quality vs. size Apply GZIP compression Minify code Load scripts asynchronously Preload head section of HTML Use domain sharding

✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

This is just a partial list of potential FEO techniques. You can find more information on FEO approaches in Even Faster Web Sites: Performance Best Practices for Web Developers by Steve Souders or using tools like YSlow or PageSpeed.

AUTOMATED FEO WHITEPAPER

4

1-800-530-3992

Manual vs. Automated Approaches Despite the potential for large performance gains, not many sites have invested in frontend optimization. This is sometimes due to lack of knowledge but more often due to the high cost of implementation. FEO projects compete for the same scarce engineering resources that are focused on adding more functionality. Also, implementing FEO requires an upfront investment to retrofit sites and an ongoing investment to keep it optimized. For example, one major airline site recently hired a team of 3 consultants for 6 months to implement a modest list of optimizations. In another case, a media site implemented a series of optimizations. The site was then redesigned and the optimizations were wiped out. It’s not just Website designs that are constantly changing; browsers are also evolving at a rapid pace. The way you optimize for one browser might not work for another. Some optimizations like domain sharding sometimes hurt mobile performance where they would benefit desktop browsing. Keeping track of the constant browser changes and tuning the site for each one can be costly. In order to reduce FEO time and cost concerns, new technologies are now available that will automatically optimize pages. These technologies dynamically transform HTML and page resources to apply FEO best practices as users browse the site. Automated FEO is typically applied after the page has been dynamically generated by the server and can handle both static and dynamic sites. Blaze’s Cloud Based FEO Solution Blaze is an automated solution for frontend optimization. Blaze supports over 40 optimizations and is constantly being updated to add new ones. Blaze is a cloud based solution that requires no code changes, no software and no hardware. Blaze Architecture Blaze sits between the Web server and the user. After the server dynamically generates the HTML, it is routed through Blaze where a series of pre-computed optimizations are applied. The user then receives the “Blazed” or modified page in their browser.

AUTOMATED FEO WHITEPAPER

5

1-800-530-3992

The Blaze Agent sits in the line of fire and dynamically transforms each HTML page request to the origin server. The Blaze Analysis Center (BAC) has two jobs: 1) analyze pages for the site and create a set of transformation instructions for the Blaze Agent and 2) create new optimized resources and push these to the CDN edge. For example, assuming Blaze applied a CSS consolidation optimization, the following steps would be performed: 1. BAC analyzes a page and sees there are 5 CSS requests. 2. BAC creates a new CSS file that consolidates the content from the original 5 CSS files. 3. BAC passes the CSS transformation instructions to the Blaze Agent. 4. Blaze Agent sees a request for the original HTML page and applies the precomputed transformation instructions. In this case, it searches for references to the original 5 CSS requests and replaces with a reference to the newly modified CSS file. 5. The new CSS file is served from the CDN edge along with other requests for static objects. Offline Analysis, Online transformation In order to maximize speed, Blaze separates the analysis of pages from the real time application of the optimizations. Calculating optimizations is computationally expensive so the BAC works offline to create transformation instructions and site resources. The Blaze Agent applies the pre-computed instructions in real time and doesn’t delay the delivery of pages as it tries to calculate how to optimize. Optimizing Dynamic Content Blaze handles dynamic content in two ways: 1) it applies page transformations after the server has already dynamically generated a page and 2) it transforms elements within a page, not the page as a whole. Using these techniques, even pages that have personalized or changing content can be optimized dynamically.

AUTOMATED FEO WHITEPAPER

6

1-800-530-3992
Optimizing for Mobile Devices Mobile phones and tablets are a growing part of every site’s traffic. Blaze has the ability to customize optimizations for different device profiles. Blaze will not change how the page looks but it will tailor the optimizations to maximize performance for a given device. For example, on a mobile device with a 3” screen you don’t need an image that is optimized for a 24” monitor. Blaze creates 5 differently sized images from the original and delivers the one that best matches the screen size of the requesting device.

Testing and Evaluating Blaze Blaze is simple to test on your site. There’s no need to deploy Blaze to the production site or impact the live site in any capacity. Each site is given a special URL that allows you to browse the site through a Blaze proxy that applies the optimizations. Using this method you can test the performance of the “Blazed” site and validate that all pages look and function as they did before. Deployment and Integration Once you’ve tested the site, deploying Blaze is fast and simple. To integrate Blaze with your site you need to route requests to your HTML pages through the Blaze Agent. This is typically done by changing the routing rules in the CDN configuration to make Blaze the origin server for HTML requests. Requests to your site resolve to the CDN, which then routes through Blaze and ultimately onto the origin server. Blaze performance engineers assist with the setup and configuration to ensure a smooth deployment. Blaze Configuration The Blaze administration console is a Web application that allows you to configure Blaze optimizations for your site. Among other functions, the administration console allows you control: 1. Turning Blaze off or on. 2. What URLs you want optimized – some or all. 3. What optimizations should be applied.
AUTOMATED FEO WHITEPAPER 7

1-800-530-3992

Turning on or off specific optimizations is as easy as checking a box. Select the optimizations you want applied and all subsequent requests be optimized accordingly. Conclusion The Web frontend is the single most important performance issue for most sites today. A CDN combined with a frontend optimization solution can help to alleviate this bottleneck and make the site run more efficiently at the same time. FEO has the potential to double performance of most sites but takes time and effort to implement manually. Automated technologies such as Blaze can provide instant optimization at a fraction of the cost of manual coding efforts. To see how fast your website would be with Blaze fill out a free website speed report and see a before / after comparison: http://www.blaze.io/website-speed-test/

AUTOMATED FEO WHITEPAPER

8