Understanding Web
Performance
Tom Barker
Beijing Boston Farnham Sebastopol Tokyo
Understanding Web Performance
by Tom Barker
Copyright © 2018 O’Reilly Media, Inc. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA
95472.
O’Reilly books may be purchased for educational, business, or sales promotional use.
Online editions are also available for most titles (http://oreilly.com/safari). For more
information, contact our corporate/institutional sales department: 800-998-9938 or
corporate@oreilly.com.
Editor: Meg Foley Interior Designer: David Futato
Production Editor: Kristen Brown Cover Designer: Karen Montgomery
Copyeditor: Octal Publishing, Inc. Illustrator: Rebecca Demarest
December 2017: First Edition
Revision History for the First Edition
2017-12-07: First Release
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Understanding
Web Performance, the cover image, and related trade dress are trademarks of
O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the
information and instructions contained in this work are accurate, the publisher and
the author disclaim all responsibility for errors or omissions, including without limi‐
tation responsibility for damages resulting from the use of or reliance on this work.
Use of the information and instructions contained in this work is at your own risk. If
any code samples or other technology this work contains or describes is subject to
open source licenses or the intellectual property rights of others, it is your responsi‐
bility to ensure that your use thereof complies with such licenses and/or rights.
978-1-492-02979-3
[LSI]
Table of Contents
Understanding Web Performance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Easing Friction for Digital Experiences 2
Improving Internal and External Confidence in Company
Expertise and Relevance 3
How Do We Begin? 4
Front-Line Leaders 5
Summary 9
iii
Understanding Web Performance
As technology leaders, we have organizational goals that are tied to
larger business objectives. Maybe we are leading our company’s digi‐
tal transformation, minimizing elements of interactions either
through enhanced customer self-service, or via full automation. Or,
maybe we are tasked with improving brand perception.
Whatever the case, we need to keep track of and, more important,
seek to influence many different key performance indicators (KPIs)
around these goals. We have our front-line managers running down
tactical metrics like time-to-resolution for our production incidents,
or the size and trend of our bug backlogs, or velocity of our sprint
teams. We have our senior leaders tracking against improvements
on our business units’ specialized KPIs as well as delivery against
our stakeholder roadmaps. We identify leading and lagging indica‐
tors that let us know if these specialized KPIs that we are working
toward will move the needle on the larger organizational objective.
But in the middle of all of these quarterly readouts and roadmap
progress meetings there is a key metric that is a leading indicator to
all of those that is rarely talked about at the senior leader level: web
performance.
Web performance, and its close sibling, perception of performance,
has a direct impact on Net Promoter Score and digital adoption via
the following:
• Easing friction for digital experiences
• Improving confidence in company expertise and relevance
1
Simply put, web performance is an indication of the time it takes
your online experience to load for your customers. Perception of
performance is, just like it sounds, how long it seems your experi‐
ence took to load—but the nuance there is that you can conceal a
large amount of inherent latency by making the experience as avail‐
able and interactive as possible as soon as possible, while asynchro‐
nously loading in the longer tail parts of the experience. Another
aspect of performance is runtime performance, which is an indica‐
tion of how smoothly your application runs after it has loaded on
your customer’s machine—think scrolling that stutters or buttons
that aren’t immediately responsive.
If any or all of these are lacking, it makes your site feel unprofes‐
sional and is a direct reflection on your organization and your com‐
pany. It also can be a drag on your larger organizational goals.
Easing Friction for Digital Experiences
Leading indicators are key data points whose change forecasts a
change in the overall system, whereas lagging indicators change as a
result of the overall system change.
For example, imagine that your company is a clothing retailer that
wants its business model to skew more toward online transactions
and less toward having physical locations (which incur higher over‐
head), all while not negatively affecting its overall sales. This is an
example of a digital transformation.
A leading indicator that we can track in this scenario would be
online purchases, whereas a lagging indicator would be store sales
(just by the nature of not likely being collected real time) or even
overall sales when online and store sales can be combined and ana‐
lyzed. If we see online sales not trending upward, we have a good
idea that we aren’t yet starting to gain traction in our organizational
objective.
Why wouldn’t customers be using our site to make their purchases?
We put up surveys, we analyze usage patterns, but are we thinking
about the most important aspect: how fast is our site?
A performant site will ease the friction for digital experiences. If
your site loads and runs slowly, it is more likely to be abandoned by
your customers. In fact, two separate studies by Akamai found the
following:
2 | Understanding Web Performance
• Seventy-nine percent of online shoppers who experience a dis‐
satisfying visit are less likely to buy from the same site again.
• Forty percent of consumers will wait no more than three sec‐
onds for a web page to render before abandoning the site.
In addition to addressing abandonment, web performance will also
improve availability. When a user visits a website, the browser issues
an HTTP request for the site. When the website is slow to load, the
HTTP requests to the web server will begin to accumulate. A web
server has only a finite amount of connections that it can handle at
any given time—based on the size of the HTTP connection pool and
the size of resident memory allocated—and will eventually run out
of available connections. When a web server runs out of available
connections, incoming requests will be turned away and the site will
appear unavailable to users.
Improving Internal and External Confidence in
Company Expertise and Relevance
Slow loading websites and applications give the impression of poor
craftsmanship and lack of attention.
Sites can be slow because they were developed without considera‐
tion or prioritization of performance. This would be an example of
poor craftsmanship (either on the part if the development team or
the stakeholders or both).
Or a site’s performance can degrade over time via software entropy,
in which an accumulation of small changes here and there—adding
a few more linked files as dependencies to download for tracking
purposes, or giving editors an opportunity to add uncompressed
images to a home page—can have a huge impact on performance
over time. This is lack of attention.
Internal employees sense when this happens; they are aware when
the products their company makes are slow, either from their own
firsthand experience or when related to them by friends and family.
When employees feel that their peers are not at their same compe‐
tence level (or higher), or if they feel that their company doesn’t care
about the quality of the products they put out, one of two things
tends to happen:
Improving Internal and External Confidence in Company Expertise and Relevance | 3
• Ambitious, high-performing, highly engaged employees will
seek to fix the issue, even if they do not have direct influence
over the product.
• Everyone else will become disengaged, check out, and lower
their expectations of everything around them, including their
own performance.
Customers also sense these things. Aside from obvious issues like
rising abandonment and lowered conversions, this perception of
lack of attention or expertise can lower a customer’s overall satisfac‐
tion with a company. A slow site implies that the company is neither
focused on customer experience nor technically competent or in
touch with current expectations of an online experience.
How Do We Begin?
Now that we understand and acknowledge the organizational
importance of web performance, how can we as senior leaders make
sure that we are focused on this often-ignored leading indicator?
Annual Goals
As senior leaders, our first step is to craft annual organizational
goals around creating and maintaining performance Service-Level
Agreements (SLAs). This makes tracking performance a priority
with real tangible implications to performance reviews, annual
increases, and bonuses. But the trick for goals to be successful is for
their executive sponsor to be personally invested. We need to know
the data, know the benefits, and be their most vocal and visible
champion. We need to speak at all-hands, at small-hands, at external
events, to the press, and at conferences about our commitment and
how the impacts will benefit customers.
We need to get our employees excited—or at the very least, give
them context about why this is important and to reiterate that this is
not just a check mark to defer until the end of the year.
We also need to track the performance data regularly throughout
the year and show the correlating impacts that it has on other
aspects of the organizational goals. Your company bill-pay site’s load
time just dropped from tens of seconds to under a second?
4 | Understanding Web Performance
Show how online bill-pays spiked because customers were more
willing to use the site instead of calling in or going to a physical
location to pay their bill.
Collect feedback in an app, by taking advantage of quantifiable
measures such as the Net Promoter System,1 to show how customer
perception is changing based on your improved focus on a better
customer experience.
Identify Champions
Those ambitious, high-performing, highly engaged employees that
had been seeking to fix the issues? Identify them and empower
them. They will be your grass roots organizers—your front-line
leaders that craft the tactics of how these goals will be implemented
and drive the execution.
Also look outside your own organization; hire people who have
solved similar problems at other companies. It may be tribal knowl‐
edge that a certain system is slow to call, and over the years internal
staff have just accepted it or found ways to work around it. Someone
with a fresh perspective might suggest a new way of approaching an
old problem.
Speaking of your front-line leaders, how do they now go about
implementing the changes needed to accomplish these goals?
Front-Line Leaders
OK, goals have been set at an organizational level. Now it’s up to the
front-line leaders to implement the tactical changes to make it hap‐
pen. As front-line leaders, how do we do this?
At a high level, here are the steps:
• Establish SLA
• Evaluate current state
• Identify areas of improvement
1 The Net Promoter System is a way to quantify customer sentiment. It creates a numeric
score for you, based on how it categorizes users whose opinions of you range from
detractors to promoters.
Front-Line Leaders | 5
• Execute
• Monitor and maintain SLA
Establish SLA
First, we need to establish an SLA that is realistic for our applica‐
tions. Current literature indicates that all web pages should load in
under two seconds—that is fine for your absolute ceiling, but it is
best to aspire for a subsecond load time.
Even if the data that your page depends on takes longer to load, you
should move to an architecture that allows the painting of a page as
soon as possible, and then asynchronously load the rest of the data.
This will allow you to have a faster perception of performance. I
write extensively about this practice in my book Intelligent Caching
(O’Reilly, 2017)
Evaluate Your Current State and Identify Areas of
Improvement
Next, we need to measure the performance of our current applica‐
tion in production. This lets us know where we stand, and certain
tools will also give us tips on how to improve the results. The easiest
way to immediately see performance numbers in production is to
use a website speed profiler such as WebPageTest (see Figure 1-1) or
Google PageSpeed Tools.
Figure 1-1. Web performance results in WebPageTest
6 | Understanding Web Performance
With a website speed profiler, you feed it the URL of the site that
you want to benchmark, and it will run a performance test to give
you a breakdown of your most pertinent metrics, including the
following:
• Load time
• Time to first byte
• Number of requests needed to build the page
• Total bytes included in page payload
Most website speed profiler tools will also give you steps to improve
your rating, as illustrated in Figure 1-2. These are usually steps that
follow an established pattern:
• Improve caching of content
• Use Content Delivery Networks (CDNs) for offloading origin
hits
• Optimize image sizes
• Eliminate blocking file loads
• Enable HTTP compression
• Minify content
• Eliminate redirects
Figure 1-2. Tips on improving performance results in PageSpeed Tools
Front-Line Leaders | 7
These are all table stakes performance optimizations. In reality,
you’ll need to evaluate your entire infrastructure for things such as
these:
Application architecture
Is your application monolithic? That is, does it make the cus‐
tomer wait while the page is assembled on the server side? A
good indicator of a monolithic site is the presence of a whole
page loader.
Slow APIs
You can optimize your site to respond in double-digit milli‐
seconds, but if all of your data is stuck behind APIs that take
multiple seconds to respond, none of your hard work will mat‐
ter much to the end user.
Infrastructure
Are we still living in a datacenter on physical boxes, are we
scaled appropriately, or do our origins run out of threads/HTTP
connections/resident memory? We can optimize images all we
want, but if our origins are turning away requests, we have big‐
ger problems to solve first.
Monitor and Maintain Your SLA
After we achieve our SLA by running through all of the optimiza‐
tions needed, we then need to maintain that level of performance.
The best way to operationalize the maintenance of your SLA is to
monitor your application’s performance (including identifying
issues such as expensive API calls and memory-intensive transac‐
tions) by investing in an Application Performance Management
(APM) platform. There are several companies with products that
should work for all of your needs; some of the leading ones are New
Relic (Figure 1-3), Dynatrace, or AppDynamics.
8 | Understanding Web Performance
Figure 1-3. New Relic’s APM dashboard
Using an APM is simple; you just install their agent on the machines
that serve your content. The agent monitors performance metrics,
including the following:
• External API response times
• Web transaction times
• Internal middleware transaction times
• Memory utilization
• Errors
These data points are then sent from the agent to the APM platform
where you can craft dashboards to monitor them real time.
Summary
I’ve never sat in a high-level executive summary meeting in which
web performance was one of the KPIs being tracked on the board.
In many cases it was assumed that performance, much like quality,
was good enough or was a tactical goal for the execution team. But
as we just saw, web performance is too important of a leading indi‐
cator to positive customer experience and the success of our digital
transformation for us to not be paying close attention to it, by mak‐
ing it an organizational goal, being personally invested in it, and
building internal champions and competencies around it.
Summary | 9
About the Author
Tom Barker is a software engineer, an engineering manager, a pro‐
fessor, and an author. Currently he is Senior Director of Software
Engineering and Development at Comcast, and an Adjunct Profes‐
sor at Philadelphia University. He is a seasoned author whose works
for O’Reilly include High Performance Responsive Design, Full Stack
Web Performance, A primer on performance of web applications, and
Scaling securely at the frontend.
