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

I
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.

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 Network latency Files cached in multiple edge

(CDN) caches that are geographically
dispersed.

Dynamic Site Acceleration Network latency Optimize routing.

(DSA) (especially with dynamic TCP optimization.
content) Compression.

Frontend Optimization Reduce HTTP requests, Optimize HTML code and

(FEO) page size and browser page resources
bottlenecks

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 Reduce Accelerate

Requests Payload 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 pre-
computed 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