Best practices to optimize commerce site performance [webinar slides]

11 Best Practices to Optimize
Commerce Site Performance
Bob Buffone
CTO & Co-Founder, Yottaa, Inc.

Ilya Mirman
VP Marketing, Yottaa, Inc.

Yottaa Inc.
http://www.yottaa.com

© 2012 Yottaa Inc. All Rights Reserved.

Agenda
1. Does performance matter?
2. Commerce web: performance challenges
3. Key Metrics & reliable measurements
4. Common performance bottlenecks
5. Optimization techniques

Bob: @rockstarapps

Ilya: @IlyaMirman
2

We want to change
the way ecommerce
retailers will operate in
the future

By becoming the
trusted resource
that merchants use
each day to manage
and grow their
business

Retailers don’t need
more charts and
graphs. They need
real intelligence that
drives revenue.

We Capture 100% of the Data
And Have 100% Accuracy
• Exact, not approximate data
• Account for returns, exchanges
and cancelled orders
• Access to all ecommerce data
• Historical orders
• Customer database

Over 6000 merchants trust us to help
them build their online businesses

Across many of the most powerful
ecommerce platforms

Agenda
1. Does performance matter?
2. Commerce web: performance challenges
3. Key Metrics & reliable measurements
4. Common performance bottlenecks
5. Optimization techniques

Bob: @rockstarapps

Ilya: @IlyaMirman
11

User Experience:
Does it Matter?

© 2012 Yottaa Inc. All Rights Reserved. © 2011 Yottaa Inc. All Rights Reserved. 12

The Impact of Speed
Average Impact of One Second Delay in Response Time
Customer
Page Views Conversions Satisfaction
0%

-2%

-4%

-6%
-7%
-8%

-10% -11%
-12%

-14%
• Lost revenues
-16%
-16% • Brand damage
-18%
• More support calls
• Increase costs

Source: Why Web Performance Matters – Gomez, Inc. / Aberdeen Group


Impact of Page Load Delay…


Today’s Performance Challenges
for Commerce Sites


Delivering a Good Experience is Challenging
Data Major Last
CDNs Geography Browsers Users
Centers ISPs Mile

3rd Party Content

Performance Uncertainty

100+ factors can create issues for end-users
© 2012 Yottaa Inc. All Rights Reserved. 17

The Web Has Evolved…
Webpages yesterday = Text + Webpages today = highly distributed applications
Images from the same domain that execute in a browser

Most modern Web pages are complex creations -The
CNN home page, for instance, is built by the browser from
53 static images, 39 dynamic images, 3 Flash files, 30
JavaScript files, 29 HTML files and 7 CSS files - to be
loaded from 18 domains

− Jeff Bezos on Amazon Silk

80%+ web performance is on the front end
− Steve Souders, Google Web Performance expert

Yesterday: Web client = IE Today web client > 4 browsers + smart phones + tablets

Today’s bottleneck: the execution of this distributed
Yesterday’s bottleneck: application (webpage) in a browser that spans
The delivery of the bits across 10+ domains


Commerce Platforms
Site Performance:
• Powerful, flexible, Magento vs. Avg Web Site
Time-to-Interact
extensible 10.0

9.0
• If not managed 8.0
>90% Slower
properly, challenges 7.0

Time-to-Interact (sec)
with: 6.0

5.0
– Performance 4.0

– Scaling 3.0

2.0
– Visibility 1.0

0
Avg Web Site Avg Magento Site
(Sample of (Sample of
3,500 Sites) 2,000 Sites)


Commerce Sites:
Optimization Opportunities
• Server-side Tuning
– Database and server configuration,
PHP acceleration, compiling
options, add hardware, etc.

• But plenty of performance
gains left on the table through:
– Front-end Optimization
This
– Optimized Traffic Routing
Webinar – Edge Caching and Delivery
of Content

nytimes.com – 91.2% Page Execution

www.nytimes.com loads in 5.16 Seconds:
• Page delivery = 0.456/5.16= 8.8%
• Page execution = 91.2%

Source: http://www.yottaa.com/url/www-nytimes-com-4bdad0b4425bdb0c0300025e/page_load


Best Practice
Establish a Performance Baseline #1

“If you cannot measure it,
you cannot improve it.”
Lord Kelvin


Best Practice
#1

Front End User Experience


Characterizing User Experience


Front End Metrics: A Slice of the Web…
50th percentile 80th percentile 95th percentile
Time to Title (msec) 1,259 2,368 4,647
Time to Render (msec) 2,420 4,071 7,160
Time to Display (msec) 5,168 8,780 15,254
Time to Interact (msec) 6,263 10,643 18,494

500
Time to Interact 100%

450 90%

400 Frequency 80%

350 Cumulative % 70%

300 60%

250 50%

200 40%

150 30%

100 20%

50 10%

0 0%

Time to Interact (sec.)

Source: Yottaa measurement of 3,500 websites, Aug. 2012


Visualizing the User Experience
Page loading screenshots

Video of page loading sequence


FREE TOOL: websitetest.com


Visualizing the User Experience
Yottaa’s Interactive Waterfall


Statistically Significant Testing: Why bother?

• Everyone else is not 10 feet away from
your server 

• The internet is a dynamic beast

• If you want confidence in your decisions,
you need confidence in your measurements


Variability Across the World

Example: Amazon.com


Variability in Connectivity

Connectivity makes a big difference. Think about your experience on your
phone compared to your office.


Variability in Browser

Browser differences can create surprising differences
• Connection Management
• JavaScript Engines
• Rendering Speed


Back End Performance


Back End Performance Metrics

• DNS time (~60 msec):
– The length of time the browser required to resolve host name(s) to IP
addresses
• Connect time (~140 msec):
– The length of time spent creating the initial connection to the site
• Waiting time (~400 msec):
– The length of time spent waiting for the server to begin sending data.
• Time to First byte (~500 msec):
– The length of time before the first byte of data is received from the
server.
• Time to last byte (~700 msec):
– The length of time before the last byte of the initial request is delivered.

A Sample of the Web…

DNS Time (msec) 60 149 413
Connect Time (msec) 144 188 227
Time to First Byte (msec) 533 1,090 2,418
Time to Last Byte (msec) 721 1,412 3,105



Example: Bad DNS Lookup Times

• Reasons
– Bad DNS Provider (Not use IP Anycast)
– Misconfigured TTL or Records
• Finding the problem
– Continuous Monitoring
– Online DNS Tools (www.dnsstuff.com/)
• Fixing it
– Choose a good DNS Provider


Content Size & Complexity


Summary Metrics: A Sample of the Web…

Domains 6 17 33
Asset Count 47 84 152
Asset Weight (Bytes) 690,779 1,557,812 3,393,192
JS Count 8 19 33
JS Size (Bytes) 119,378 346,852 586,442
CSS Count 3 8 16
CSS Size (Bytes) 18,134 60,265 120,000
Image Count 25 48 87
Image Size (Bytes) 318,788 895,948 2,056,237



Continuous Monitoring Best Practice
#1


THINGS THAT MAKE YOUR
WEBSITE SLOW


Lots of Requests

• Product owners want rich websites
– Rich in User Experience
– Rich in Visual Presentation
• Achieving richness requires more
resources to be downloaded to the client
– CSS
– HTML
– JavaScript
– Images


Content Breakdown


More Requests  Slower Performance


Source code of the Website


Combine Scripts & CSS Best Practice
#2
to Reduce Requests

Before optimization we have 26 JS files!
After optimization we have one JS file that provides a huge performance benefit


Combine Images with Sprites Best Practice
#3
to Reduce Requests

.arrowbutton{
display: block;
height: 23px;
line-height: 22px;
font-size: 12px;
width: 96px;
background: url("<%=
image_path('icons/ico.png') %>")
no-repeat -49px -8px ;color:
#FFFFFF;cursor: pointer;
}


Sprites in Action…

CSS sprite

Yottaa homepage
that leverages the sprite


Employ Data URIs Best Practice
#4
to Reduce Requests

Data URI (Uniform Resource
Identifier) scheme: method for
including data in-line in web
pages – allows normally
separate elements
(e.g., images, style sheets) to
be fetched in a single HTTP
request rather than multiple.


Large Resources

Ways to make your site slow:
• Many of the resources that you need to
load can be made fatter than required
– HTML, CSS, JavaScript – Add lots of
comments and white space
– Images
• Use images that are larger than displayed on the
webpage
• Always use the highest quality settings
• Turn off gzip compression on your server

Large Assets  Slower Performance


Large assets take longer to download


Large assets take longer to download

776KB


Use Lossless Image Compression Best Practice
#7
to Reduce Asset Weight

459 KB 400 KB


Use Lossy Image Compression Best Practice
#8
to Reduce Asset Weight

459 KB 98 KB


Best Practice
Gzip to Reduce Asset Weight #5


Minify Scripts Best Practice
#6
to Reduce Weight
//Get the name of the person
var full_name = “Bob Buffone”; Browsers don’t
//Now make it awesome
care about
full_name += “ is awesome”;
//Everyone must know this fact comments and
$(document).ready(function(){ easy to read code.
alert(full_name);
});

var n=“Bob Buffone”;n+=“ is awesome”;$(document).read(function(){alert(full_name);});


Problem: Serialization
(e.g., 3rd Party Plugins)

• Bloggers love to make their websites slow
using plugins.
– Twitter, Facebook, Google Plus, LinkedIn
– Photo plugins…
• Not utilizing asynchronous loading of 3rd
party resources.


Marketing Loves Social

Social adds LOTS of resources -> 86 JavaScript, images
and CSS.


One Facebook Image…


Best Practice
Load 3rd Party Assets Asynchronously #9

<script src=“connect.facebook.net/en_US/all.js”></script>


Use Domain Sharding for Best Practice
#10
Parallel Processing

3 domains for
asset loading


Use Intelligent Script Loaders Best Practice
#11
for Parallel Processing


Summary: Problems & Resolutions

Issue Resolution
Lots of Requests Reduce # of Requests:
• Combine Scripts and Images
• Combine images with Sprites
• Employ data URIs

Large Assets Reduce Asset Weight:
• Use Gzip
• Minify Scripts
• Use Lossy and Lossless Image Compression

Serialization Parallel Processing:
•Load 3rd Party Assets Asynchronously
•Use Domain Sharding
•Use Intelligent Script Loaders


Web Site Challenges
• Slow web pages
• Unacceptable user experience
Performance • Reduced site conversions
• Poor search engine rankings

• Site outages and page errors
Availability • Inability to serve users across geographies, devices,
browsers, platforms

• Inability to handle high traffic volume, serve users,
Scalability process transactions
• An overloaded site infrastructure.

• Vulnerability to threats from bots, hackers and
Security attacks.


The Yottaa Web Optimization Platform
Features: Benefits: Features: Benefits:
• Content caching • Reduce load on • Global IP anycast • High performance
and edge delivery your infrastructure • Globally distributed DNS service
• IP Anycast routing • Reduce network data centers • Enterprise-grade
• 20+ edge locations latency • Globally redirects traffic management
• Integrates with • Improve user request to closest • DNS Shield
any CDN experience geographic server for protection

Features: Features:
• Payload reduction • Traffic blocking and throttling
• Request reduction • Resource and bot protection
• Parallel processing • Traffic analytics
Web
Benefits: Benefits:
Optimization
• Improve user experience • Improve availability, resiliency
Network and security
• Increase conversions
• “Protection as a Service”
• Increase search
engine rankings • Elastic and adaptive

Features: Benefits:
Benefits:
Features: • See what your
• End user experience • Ensure end user • Multivariate testing users see
monitoring experience and SLA (locations, browsers, • Eliminate
• Intuitive data analysis • Problem detection connection speeds, time) sampling error
and visualizations and timely response • Interactive visualizations: • Deep insights
• Problem detection, • Actionable intelligence page loading sequence, for tuning site
alerting and diagnosis waterfall, assets) performance


Thank You for your time!

yottaa.com

Best practices to optimize commerce site performance [webinar slides]

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Similar to Best practices to optimize commerce site performance [webinar slides]

Similar to Best practices to optimize commerce site performance [webinar slides] (20)

More from Yottaa

More from Yottaa (17)

Best practices to optimize commerce site performance [webinar slides]

Editor's Notes