Akamai Whitepaper: Front End Optimization

White Paper

Front-End Optimization on
the Akamai Intelligent Platform

Table of Contents

Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

WHAT IS FRONT-END OPTIMIZATION?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Feo Implementation And Challenges. . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Automated Front-End Optimization.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Front-End Optimization with Akamai.. . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Overview: How it Works. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Asynchronous Analysis Delivers Speed. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Adaptively Optimized for Each End-user . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
. .

Overcoming Bottlenecks From End-to-End. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Mobile Performance Optimizations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
. .

Benefits of Front-End Optimization with Akamai. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Offload the Headache. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Rely on a Proven Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
. .

The Best Experience for Every User, Every Time. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

APPENDIX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
. .

Sources. .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

December 17, 2012

Front-End Optimization on the Akamai Intelligent Platform 1

Introduction
In the hyperconnected world, Web and mobile application performance
is playing a more critical role than ever in driving user adoption and
engagement. Today’s savvy audiences demand richer, more interactive
experiences that require more data and more processing. In 2012, the
average Web page was more than 11 times larger than in 2003, and 79 times
larger than in 1995.1 Yet consumers continue to expect pages to load faster
than ever before, indiscriminately abandoning sluggish sites. At the same
time, studies have repeatedly shown that enhancing site performance brings
about greater page views, better audience engagement, higher conversion
rates, and even improved SEO rankings.2 Indeed, as little as a few tenths
of a second can make a difference.3
Unfortunately, understanding Web site performance is no small task, particularly as the Internet
and the applications running across it become more and more complex. Today, a surprisingly large
number of factors – including network latencies, communications protocols, device capabilities,
and browser page rendering behaviors – play a role in determining the end-user perception of Web
site performance.

Traditionally, Web performance tuning efforts focused on the application back-end. This is the area
over which Web developers have the greatest control, but, unfortunately, changes made here may
not translate into big improvements for the end-user. This is because back-end time – which includes
the overhead involved in making database calls and generating the HTML page – actually accounts
for only about 10% of user-perceived page load time for the typical Web application today. The
remaining 90% is due to middle mile and front-end latencies. The middle mile refers to the time
it takes for data to travel across the Internet, which can face significant delays due to network
latency, routing problems, and Internet congestion. The front-end includes the time it takes for
data to cross the last mile to the user’s device and then for the browser to render the page.
Web site performance optimization needs to successfully address the 90% problem in order
to deliver the level of responsiveness end-users demand.

How Web site page load time breaks down
10% 90%

Back-end or
Middle Mile Front-end or Last Mile
First Mile
• Database calls •
Retrieving page content, including HTML, •
Delivering content over cable modem,
images, JavaScript, etc., from origin server, cellular network, etc., to end-user
• HTML page
across the Internet (the ‘Long-hair’ across
generation •
Rendering page in the browser
multiple networks and peering points)


What Is Front-End Optimization?
As content and application delivery networks have proven effective at helping sites overcome
middle mile performance issues, front-end performance issues are now coming into focus and being
addressed. Front-end bottlenecks play a growing role in overall site performance as today’s rich and
complex Internet applications make increasing use of embedded objects, sophisticated stylesheets,
client-side code, and third-party content – all of which slow down the rendering of a page. Mobile
sites, with their sluggish networks and weaker device processors, face an even greater front-end
challenge. The need to address these types of performance issues has led to increased awareness
about Front-End Optimization (FEO), a set of best practices designed to reduce front-end delays in
order to improve the end-user experience.

FEO techniques can broadly be grouped into four complementary approaches:

1. Reduce the number of HTTP requests. Before rendering a Web page, browsers first make an
HTTP request for the HTML page, followed by requests for additional resources required to display
the page – such as images, CSS, or JavaScript. The number of requests required for a typical page
has more than tripled in the last 9 years, to a current average of 100 objects per page.5

Unfortunately, each new HTTP request can increase unwanted delay in setting up the connection.
For mobile devices, this overhead typically takes more time than downloading the page data
itself. Even for desktop browsers, this overhead is one of the key factors in determining page
rendering times, and reducing the number of requests can greatly improve the user’s perception
of site responsiveness. FEO employs various techniques to achieve this request reduction, including
consolidating multiple files into a single request, caching objects locally using HTML5’s Application
Cache interface, and inlining small objects within the HTML.

2. educe the size of the data. Page weight is often the single largest factor in page download
R
times, so reducing the number of bytes transferred can significantly speed up a site. FEO tech-
niques are designed to reduce page weight without changing visual quality or site functionality.

I
mages are typically the biggest component of page weight and can often benefit from
compression or resizing without compromising quality. Adaptive image compression, where
resizing is optimized based on the end-user’s screen resolution and connection speed, is especially
effective. Text blocks – such as HTML, JavaScript, and CSS files – can also be significantly reduced
in size through techniques such as compression and minification, the process of removing
unnecessary characters such as whitespace and comments.


3. ccelerate page rendering. Different browsers exhibit different page rendering
A
behaviors, many of which prevent pages from rendering as quickly as possible. For
example, browsers often:

• lock other downloads while downloading, parsing, and executing scripts.
B

• imit the number of simultaneous requests for images and other embedded content. Older
L
versions of Internet Explorer and Firefox, for example, are limited to two parallel requests per
hostname. Newer versions increase this limit to 6.

• lock page rendering while stylesheets are downloaded and parsed.
B

F
EO techniques address these problems by re-coding the HTML in a way that distributes the
browser’s work so that the page can begin to render as soon as possible, delaying non-essential
tasks until later. Techniques include using asynchronous JavaScript execution, which helps
prevent scripts from delaying object downloads and page rendering; just-in-time or on-demand
image loading, which loads only images in the current viewable area, deferring others until
the user scrolls; and domain sharding, or retrieving objects from multiple subdomains to work
around browser limitations on concurrent requests. While these techniques work well to
minimize page rendering bottlenecks, they do need to be customized to each browser’s specific
behaviors. In some cases, we may add code to take advantage of newer browser capabilities,
while, in other cases, we may make changes to overcome deficiencies in older browsers.

4. lleviate third-party bottlenecks. Ads, analytics code, social media widgets, and other
A
third-party content now represent a large percentage of total page requests. Unfortunately,
due to the page rendering behaviors discussed above, sluggish third-party content can
significantly slow down a page or even make it appear completely unavailable to the end
user, as the browser may block the progress of a page while waiting for the third-party
content to load.

Websites have no control over the performance of third-party content, but FEO best
practices can alleviate these bottlenecks by decoupling the third-party script execution from
the loading of the page. By making the third-party request asynchronous, FEO ensures that
a slow third-party tag will not negatively impact the loading of the other objects and the
rendering of the page.

For an overview of Akamai FEO optimizations please refer to the appendix.


Feo Implementation And Challenges
FEO evolves constantly as browser and device technology continues to change, but it is hardly a black box
or secret art. Indeed, many FEO best practices are well-documented across the Web on sites like YSlow,
PageSpeed, and Steve Souder’s High Performance Web Sites blog. In theory, this means any Web site
development team can simply implement the techniques and enjoy significant performance improvements
across its site. The reality, however, can be quite different.

First, FEO is complex, making it difficult to implement and costly to maintain. The up-front investment
required to manually retrofit an existing site for FEO can be on the order of many man-years – not in-
cluding the ongoing resources needed to keep the site optimized. Moreover, unless all members of the
development team gain FEO expertise, any implemented optimizations may be lost each time the site itself
is changed or redesigned.

Second, FEO best practices are not one-size-fits-all. Different approaches are relevant in different situations,
and if used incorrectly, FEO techniques can actually hurt performance. For example, domain sharding may
work well for desktop browsers running on fast connections, but it may hurt performance in certain mo-
bile scenarios. The ideal number of domains to use also depends on multiple factors.

Generally, FEO techniques involve balancing tradeoffs among many different considerations. For instance,
one might assume that inlining all content – that is, requesting all page resources in a single download –
is ideal for performance, because it reduces HTTP requests down to one. In reality, this is not optimal for
most situations, as you lose the often-greater performance benefits of being able to cache images or use
just-in-time image loading to reduce page download size and accelerate page rendering. The balancing
point between these tradeoffs can be a complex and moving target, as browser, devices, and networks
evolve – and proliferate – at a rapid pace. Trying to keep site optimizations up-to-date in the face of never-
ending changes, both in the device/browser landscape and within the application itself – is a daunting and
expensive proposition.

Automated Front-End Optimization

In an attempt to address some of the challenges associated with manual FEO implementation, a crop
of young companies are now providing automated FEO technologies, available either as an appliance
to be deployed in front of a site’s servers, or as a service that intercepts and responds to requests on
behalf of the site. These FEO technologies attempt to tackle only the front-end piece of the overall
performance puzzle; they do not address network latency, congestion, and reliability issues that can
severely hamper the delivery of any Web site or application, for example. However, they can work in
conjunction with content and application delivery networks to provide a more comprehensive solution.

Unfortunately, both appliance and service-based FEO solutions often become bottlenecks of their
own. Automated FEO solutions sit in the line of fire, taking the HTML code generated by a site and
modifying it before delivering it to the end-user. Being in the critical path, the reliability, scalability and
performance of the FEO solution is paramount. For service-based solutions, the Web site is at the mercy
of its service provider. For appliance-based solutions, the Web site must architect and plan for capacity
and failover as well as maintain their new boxes. Either way, there is a cost and risk associated.

In addition, these FEO solutions often have integration or compatibility issues with the other
components of the Web site’s overall performance strategy, such as the content or application delivery
network. When cobbling together two disparate solutions, companies are left to fend for themselves if
something goes wrong, troubleshooting in the no-man’s land in between the cracks. These situations
can create support nightmares for the site, particularly with a technology that modifies Web site code
on-the-fly. Thus, stand-alone automated FEO solutions have the potential to provide some performance
benefits without the high cost of manual FEO coding, they do carry a number of risks that make them
far from ideal.


Front-End Optimization With Akamai
Akamai takes an end-to-end approach to solving web site performance, offering a cohesive,
multi-layered performance solution designed to help businesses overcome origin, middle mile, and
front-end bottlenecks automatically and effortlessly. For every end-user request, Akamai’s proven
technologies are dynamically applied in a way that optimizes performance for that unique scenario,
taking into account real-time Web site, network, and end-user conditions. Akamai’s FEO capabilities
are an integrated part of these solutions, working in concert with our other performance, security,
and availability offerings to deliver the best possible experience for every user, on every device, every
time.

Akamai’s FEO capabilities are based on advances pioneered by Blaze, an industry-leading FEO
company that Akamai acquired in early 2012. Blaze’s cutting-edge FEO solution was designed
from the ground up to work in synergy with a distributed content and application delivery network,
providing an ideal architecture for incorporation into the Akamai Intelligent Platform. Built on this
foundation, Akamai is now able to offer a uniquely robust and scalable automated FEO solution
as a seamlessly integrated part of our comprehensive Web performance solutions.

Overview: How it Works

In the diagrams below, we illustrate how Akamai’s FEO works:

Application Origin Part I. First Request

1. ser requests a page
U

2. front-end optimizations
No
2 are available
3
3.
Page is accelerated across
the middle-mile and delivered
4
1 to first-request user without
front-end optimizations
FEO Analysis 4.
Subsequently, page is queued
with the FEO Analysis Engine
to be analyzed

Application Origin
Part II. Offline Analysis

1.
FEO Analysis Engine evaluates
page to determine the best
2 ways to optimize it, and
produces optimized
transformation rules
1
2.
FEO Analysis Engine makes
optimized transformation rules
FEO Analysis available across the Akamai
Intelligent Platform


Application Origin Part III. Subsequent Requests
and Continued Analysis

1. nother user requests
A
2 the page

2. kamai applies the pre-cre-
A
ated front-end optimizations
3 and delivers accelerated
1 page with front-end
optimizations applied
FEO Analysis
3. age is continuously
P
monitored and re-analyzed

As always, end-user requests are efficiently routed to a nearby Akamai server. This server may be able
to deliver the requested content straight from cache or will fetch it from the origin server using route,
protocol, and application optimizations to accelerate delivery over the long-haul Internet. The server
also applies the relevant front-end optimizations before delivering the content to the end-user, which
enables speedy page rendering. The end result is an exceptional end-user experience that is rich, reli-
able, and responsive, regardless of device or Internet conditions.

Asynchronous Analysis Delivers Speed

Understanding which front-end optimizations to apply to a dynamic site requires complex and
computationally intensive analysis. Our sophisticated, offline analysis engine does this work
asynchronously, pre-computing transformations to be applied to the various static and dynamically
generated pages of a site. This information is then provided to servers across the Akamai Intelligent
Platform, allowing them to rapidly apply the transformations in real-time as they deliver content to
end-users. By separating the complex analysis from the real-time application of the optimizations,
Akamai delivers cutting-edge FEO capabilities without sacrificing speed.

Adaptively Optimized for Each End-User
To be effective, FEO optimizations need to be customized for the end-user environment, because
different browsers and devices behave differently. For example, browsers differ in their support
for features like asynchronous JavaScript, HTTP pipelining, or the number of simultaneous downloads
they can make, suggesting different optimization behaviors. Images may also be resized differently
for different devices and screen resolutions. In addition, a device connected over a loss-y, high-latency
3G network may benefit from different types of optimizations than a device running over a fast
Internet connection.

Akamai’s platform handles these different situations seamlessly, creating multiple possible optimiza-
tions in the analysis phase, and then intelligently applying the appropriate ones to each request based
on real-time factors such as the end-user’s browser version, device, and network speed. This means we
take advantage of the full capabilities of each user’s specific set up to deliver the best possible experi-
ence – rather than simply settling for the lowest common denominator supported across all browsers
– or targeting only the most popular browsers while leaving other users out in the cold.


Moreover, Akamai continually updates and improves its optimization engine to reflect the
state-of-the-art in FEO innovations as well as the constantly evolving browser and device
landscape. This enables our customers’ development teams to focus simply on creating innovative
content and features, rather than getting bogged down by the ever-changing details around
which versions of which browsers support what features. Your team creates and maintains just
one version of your site; Akamai enables it to work optimally for every single user across
an increasingly heterogeneous end-user environment.

Optimizations Targeted to
Device and Network Conditions

html
Front-End
Developer Optimization
creates and Akamai’s offline
maintains analysis engine
ONE version creates multiple
optimization
transformations

Overcoming Bottlenecks From End-to-End

By integrating FEO capabilities directly into the Akamai Intelligent Platform, these front-end optimiza-
tions work seamlessly with Akamai’s entire suite of offerings, providing complementary performance
benefits that overcome bottlenecks from end-to-end on a platform that is highly secure and proven
to help deliver reliable, consistent web experiences to end-users. FEO has particularly strong synergies
with Akamai’s route protocol and connection optimizations. These capabilities are designed to deliver
every byte faster while Akamai FEO works at the same time to reduce the amount of bytes needed.
This holistic, multi-layered approach to Web site performance is designed to help businesses deliver
exceptional end-user experiences with unmatched performance, reliability, and scale.

End-to-end Performance Benefits with Akamai
Without Akamai: Many requests, many bytes, many long round trips

With FEO : Fewer requests, fewer bytes

W
ith FEO + DSA: Fewer requests, fewer bytes, faster round trips


Mobile Performance Optimizations

Because of the more restrictive capabilities of its devices and networks, the fast-growing mobile
Web faces a number of unique performance challenges in the last mile, shown in the table below.
Yet consumer expectations remain high: a recent study showed that 71% of mobile users feel sites
should load as quickly on their mobile devices compared to their desktops. 6

Front-End/Last Mile Bottlenecks For Mobile
Cellular Network
Device Limitations Browser Limitations
Limitations
• High latency •
Weak CPUs mean longer script Greater diversity of browsers
•
parse times and slower render- and OS versions to support
• High packet loss
ing
•
Browsers support fewer features
• Short-lived communications
• Small device caches
channel and high overhead for
establishing • Smaller screen sizes and far
greater variation in screen sizes

In this type of environment, FEO can have an enormous benefit. Useful techniques include many
of the optimizations we have already mentioned – such as adaptively reducing image sizes based
on display size or network speed, maximizing use of local device caches, delaying script parsing,
and consolidating resource requests – tuned with mobile-specific parameters, as well as additional,
mobile-specific optimizations such as:

• avaScript Pre-Execution: delivering mostly static pages, with script pre-executed on the server
J
wherever possible

• lick on Touch: Converting hyperlinks to click events to eliminate the 300ms delay associated with
C
standard mobile hyperlink clicks

• ellular Keep-Alive: Keeping mobile connections open longer in between page requests in order
C
to avoid the high overhead of re-establishing a connection

In mobile, it is particularly critical that optimizations are customized for each request. Because the
Akamai Intelligent Platform knows about the end-user’s device, browser, and real-time network
situation, it can apply FEO transformations that can help content providers maximize that user’s
experience based on his or her current environment.

Equally importantly, these FEO capabilities work seamlessly with Akamai’s other mobile technologies,
including the Akamai Mobile Protocol, which improves communication speeds over the slow, lossy
cellular last mile. The seamless layering of these capabilities is designed to result in an unsurpassed
user experience for every user, every time.


Mobile Performance Optimization With Akamai
Content not optimized for
Non-Akamaized sites High-loss, high-latency
the mobile experience
require multiple long-haul mobile networks result
exacerbates sluggishness
Customer round trips across both in numerous retries,
and clogs the already
mobile and IP networks retransmits, and other delays.
Origin overloaded networks.

Mobile Operator Network
GGSN
The Akamai Mobile Protocol
IP Network improves performance over
slow, lossy cellular network
Akamai delivers blazing

Ak
performance for fixed line

am
clients from nearby servers,

ai
relying on the Akamai

M
Protocol and SureRoute

ob
Mobile detection and site delivery
Akamai FEO enables rich,

ile
to ensure optimized from Akamai servers sitting near
mobile-optimized sites that

Pr
communications with mobile gateways means users

ot
the origin. get their first byte and every maximize each user’s device

o
co
and network capabilities.
Terrestrial byte–faster and more reliably.

l
Benefits Of Front-End Optimization With Akamai
Offload the Headache

With Akamai, businesses can enjoy the tremendous benefits of FEO with the virtual flip of a switch.
There’s no big up-front investment, no on-going maintenance nightmare, no struggle to keep up with
the latest browser changes. In fact, there are no changes at all to your Akamaized site. This means
your development team can simply focus on its core mission of developing compelling content and
functionality, while our high performance platform delivers it with the speed and responsiveness your
users expect.

Rely on a Proven Platform

No other FEO solution can match the proven performance, scalability, and reliability of the Akamai
Intelligent Platform. With over 100,000 servers in more than 1,000 networks worldwide, Akamai
has the world’s most pervasive cloud optimization platform – trusted to accelerate as much as a
third of the traffic travelling over the Internet each day. Our FEO capabilities are integrated into
this time-tested platform, delivering a solution that is highly secure and backed by our performance
and uptime SLAs.

The Best Experience for Every User, Every Time

Akamai’s layered, integrated approach to performance means that we are able to apply the right
tools at the right time for each site, across nearly every scenario. Our device-targeted front-end
optimizations work in synergy with our site and application acceleration services to deliver
unparalleled speed from end-to-end – in a process that is as seamless to our customers
as it is to their end-users.


Appendix
For businesses looking to deliver the fastest, most engaging • n-demand Image Loading – Pages are often much larger than
O
user experiences possible, Aqua Ion offers a fully-automated the size of the browser window, especially on a small mobile screen.
solution for situational performance by including Akamai And yet, the browser will load all the images on the page regardless
Front-End Optimization (FEO). Akamai FEO applies optimiza- of which ones are visible to the end-user. Akamai FEO’s On-demand
tions based on sophisticated analysis of the web application as Image Loading optimization will cause a page to only load the images
well as real-time conditions specific to the end-user’s environ- that are visible within the current viewport. As the user scrolls down,
ment, such as browser, device, network speed and usage of new images are loaded on demand. On-demand Image Loading helps
third-party services. Akamai Front-End Optimization: improve page load time and also reduces bandwidth for cases where a
user doesn’t actually scroll down a page.
Reduces requests
• TML5 Advanced Cache – Caching previously downloaded page
H
Each client HTTP request and server response combination rep-
elements on users’ browsers is one of the best ways to improve
resents at least one round-trip on the network. Depending on
performance of repeat views. However, since the cache size on mobile
the user’s network, device and proximity to the origin server,
browsers is very small, few files last in the cache until the user returns
a single round-trip request can take seconds to complete. A
to the site. Even on desktop browsers, users cycle through their cache
single web page can require dozens of HTTP requests before it
in days. Akamai FEO cache optimization leverages a new capability in
can render content, with requests often delaying one another
HTML5 to bypass the shared browser cache and create a dedicated
due to a limited number of connections. To reduce round-trips,
cache for each site.
Akamai FEO uses several techniques to eliminate unnecessary
requests such as consolidating multiple CSS and JavaScript files Reduces bytes
and using new caching features in HTML5.
The math is simple: the larger a web page (measured by bytes), the lon-
Optimizations that contribute to reducing requests include: ger it will take a browser to render the content. Akamai FEO keeps file
size in check by adjusting image formats, improving cache management,
• ile Versioning – Many sites only cache content for a few
F
compressing files, and removing metadata from files, such as comments,
hours due to concerns about old content used from the
whitespaces and image metadata. Akamai FEO also helps avoid exces-
cache when new content is available. This practice all but
sively large images, maintaining image quality at the edge of what the
eliminates the enormous performance benefit of caching for
user can perceive, on a small and large screen.
users returning to a site later – a very common occurrence.
Akamai FEO uses a technique called File Versioning to solve Optimizations that contribute to page-size shrinkage include:
this problem, by giving each file a unique name. If a resource
changes, the old file will be not be referenced anymore, and • ompression – Compression is an effective way to reduce page sizes
C
so all content can be cached indefinitely. and resources without impacting their content. HTML, JavaScript and
CSS files are textual and compress very well, as do AJAX responses.
• daptive Consolidation – Web pages hold dozens or
A Compression can often reduce 60%-80% of the total page size.
hundreds of resources, each requiring an HTTP transac- Akamai FEO automatically compresses all text content, and sometimes
tion to be fetched from the server. These transactions have even images, while ensuring compressed content is only served to
considerable overhead, are time consuming, and cannot be clients that support it.
done all at once. Consolidation is the technique of combin-
ing multiple resources into one. Akamai FEO applies smart • ossless Image Compression – Images often hold significant amounts
L
consolidation of JavaScript and CSS files, reducing the overall of metadata, ranging from where a picture was taken to layering of its
page size and accelerating load time. graphics for easy future editing. In addition, images are often saved in
the format most suited for image editing software – not for the web.
• daptive Consolidation – While simple consolidation
A Image Compression removes metadata and uses the optimal image
reduces the number of HTTP requests for first time visitors, format for the web, resulting in smaller file sizes with no difference in
it often leads to more bytes downloaded. The same CSS image quality.
JavaScript files are included in many different combinations
across a website’s pages. Each combination is consolidated • esize images to HTML dimensions – HTML and CSS designs are often
R
into a separate package, resulting in the same content being out of sync with the management of images. Files are often uploaded
downloaded multiple times. Akamai FEO uses Adaptive Con- to a Content Management System without knowing the size they’ll
solidation to fetch multiple files with one request, but cache be displayed in, and the same image is often used in multiple sizes.
each resource separately, thus avoiding redundant down- Akamai FEO makes sure the browser will not download a large im-
loads. The result is the optimal number of requests, without age, just to have it resized by the browser due to styles and markups.
increasing the payload. Such images will be resized ahead of time, avoiding downloading of
redundant bytes.
• nlining – Many of the external images and scripts on a
I
page are small. Often so small, that the HTTP overhead to • inification – HTML, JavaScript and CSS files contain comments and
M
fetch them exceeds their own size. Inlining is the technique whitespace that, while useful to developers, are not needed for the
of embedding these resources directly into the page or re- page’s operation. Minification is the process of removing such compo-
sources that references them. The overall page size decreases nents and reducing the total download size. Akamai FEO automatically
with the reduced HTTP overhead, and the inlined resources minifies all page resources, reducing the size of pages without modify-
are processed faster. Akamai FEO automatically embeds ing their functionality.
resources into pages and CSS files based on size and other • esponsive Images – Most images are formatted for desktop brows-
R
considerations. ers on larger screens. Such images are unnecessarily large for mobile
devices. Akamai FEO’s responsive images technology automatically
delivers an optimally-sized image for the phone, tablet or desktop
browser that requested it, resulting in much faster page load, with no
perceived difference to the user.


• ntelligent Image Quality – The improvements in digital pho-
I • treaming Consolidation – If you consolidate 10 JavaScript files into
S
tography often lead to web page images saved at a higher one, you make the first one significantly slower. When downloading
pixel density than what most displays can support. Such JavaScript and CSS, browsers do not process the content until the
images make the pages bigger and thus hurt the user experi- entire file is downloaded. As a result, consolidating resources, while
ence, while the user cannot appreciate the higher quality it reduces HTTP requests, sometimes makes the page slower. Akamai
picture. Akamai FEO optimizes the pixel density to reduce FEO combines IFrames and its Async optimizations to overcome this
size without a perceptible impact on quality. problem, processing incoming JavaScript and CSS as it arrives, without
Accelerates rendering additional HTTP requests.

Processing a web page is a complicated process. Browsers em- • nvoke Click On-Touch – Most touch screen browsers fire an ontouch
I
ploy complex logic during load time, making decisions such as event roughly 300 milliseconds before firing an onclick event, in order
which files to download serially vs. in parallel, which resource to distinguish between pinch, zoom, and other touch operations.
types block rendering, and how to manage their connections. Akamai FEO’s Invoke Click On-Touch leverages the ontouch event to
At the same time, they need to parse and execute compli- simulate fast clicks, even on a touchscreen, resulting in a significantly
cated HTML, CSS and JavaScript code, which is often not well more responsive page. This method applies to iPhone, iPad, and An-
defined. droid devices.

Unfortunately, the browser doesn’t know sites in advance and • avaScript Pre-Execution – Executing JavaScript on mobile devices can
J
is forced to employ generic logic when processing a page. This be slow. On average, mobile browsers take ten times longer than
logic changes between old and new browsers, is limited by desktop browsers to process JavaScript. When JavaScript Pre-Execution
backward compatibility and is not customized to a site. is enabled, Akamai FEO executes much of the embedded JavaScript
offline and provides the requesting browser with a mostly static page.
Akamai FEO combines the knowledge it has of a site, learned Even fast-changing scripts and interaction scripts are made faster by
by automated analysis, inspection and user configuration, to “statifying” other scripts which generate content. Using this method
identify the best way to load that page. Techniques like defer- reduces the amount of JavaScript that either the client or browser will
ring print stylesheets, keeping social buttons from blocking need to execute at page-request time, lessening some of the mobile
rendering and prefetching the next page are used to guide the device’s processing burden.
browsers into doing the right thing. As a result, users can get
a truly fast user experience, attuned to their needs. • age Prefetching – This optimization loads page content ahead of time
P
based on users’ browsing patterns. For example, say 60% of visitors
Optimizations that contribute to accelerate rendering include to a home page click the “Hot Deals” link. While a visitor views that
the following: home page, Akamai FEO can hint to the browser to load the “Hot
• synchronous JavaScript and CSS – When processing a page,
A Deals” page without waiting for the user to request it. Then when the
browsers usually process JavaScript and CSS files as blocking user does click the link, the “Hot Deals” page will display immediately.
resources. This means images and other resources further Akamai continually updates and improves its FEO optimization engine to
down the page aren’t downloaded until the JavaScript and reflect the state-of-the-art in FEO innovations as well as the constantly
CSS files are fully downloaded and executed. Even rendering evolving browser and device landscape. This enables our customers’
is delayed until all CSS and preceding JavaScript is fetched development teams to focus simply on creating innovative content and
and run. Akamai FEO’s Async JavaScript and CSS processing features, rather than getting bogged down by the ever-changing details
optimization modify the way scripts and style sheets are em- around the latest FEO optimizations and which versions of which brows-
bedded into the page, making the browser process scripts, ers support what features.
style sheets and other resources in parallel. This improves
load time, and makes the page start rendering much earlier,
while still not showing unstyled content.


1 http://www.websiteoptimization.com/speed/tweak/average-web-page/
2 http://www.gomez.com/pdfs/wp_why_web_performance_matters.pdf
3 “For Impatient Web Users, an Eye Blink is Just Too Long to Wait”, New York Times, February 29, 2012
4 http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
5 http://www.websiteoptimization.com/speed/tweak/average-web-page/
6 http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers

Akamai® is the leading cloud platform for helping enterprises provide secure, high-performing user experiences on any device, anywhere. At the core of the company’s solutions
is the Akamai Intelligent Platform™ providing extensive reach, coupled with unmatched reliability, security, visibility and expertise. Akamai removes the complexities of connecting
the increasingly mobile world, supporting 24/7 consumer demand, and enabling enterprises to securely leverage the cloud. To learn more about how Akamai is accelerating the
pace of innovation in a hyperconnected world, please visit www.akamai.com and follow @Akamai on Twitter.

Asia Pacific Headquarters 1 Raffles Place, #16 – 61 One Raffles Place, Singapore 048616 Tel +65.6593.8700 Fax +65.6593.8799
European Headquarters Pfingstweidstrasse 60, 8005, Zurich, Switzerland Tel +41.43.210.91.00 Fax +41.43.210.91.01
North American Headquarters 8 Cambridge Center, Cambridge, Massachusetts, United States 02142 Tel +1.617.444.3000 Fax +1.617.444.3001

©2012 Akamai Technologies, Inc. All Rights Reserved. Reproduction in whole or in part in any form or medium without express written permission is prohibited. Akamai and the Akamai wave logo are registered
trademarks. Other trademarks contained herein are the property of their respective owners. Akamai believes that the information in this publication is accurate as of its publication date; such information is subject
to change without notice.

Akamai Whitepaper: Front End Optimization

Recomendados

Recomendados

Más contenido relacionado

Más de Akamai Technologies

Más de Akamai Technologies (20)

Último

Último (20)

Akamai Whitepaper: Front End Optimization