The Critical Path to Performance: User Journeys
-
Upload
keynote-systems -
Category
Technology
-
view
1.212 -
download
1
description
Transcript of The Critical Path to Performance: User Journeys
![Page 1: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/1.jpg)
The Critical Path to Web
Performance Focusing on User Journeys
![Page 2: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/2.jpg)
Today’s Talk
Performance matters… always?
everywhere?
The nexus of business performance and
user journeys
When good transactions can go bad
The next frontier: real user journeys
Real user transaction performance:
Keynote’s perspective
Top of the World by Izzard, on Flickr
![Page 3: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/3.jpg)
http://www.mit.edu/~velten/press/content/videos/bottlefast.mov
![Page 4: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/4.jpg)
Site Performance From the User Perspective
Physical Psychological
Keynote Mobile User Study, 2012
![Page 5: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/5.jpg)
Site Performance = Business Efficiency
http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/ http://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/ SFSV WebPerformance Group 20120216 - Walmart RUM
60% faster ->
14% improvement in
donation conversions
Average page load for converted
population is 47% faster than the
average for non-converted
2.2 sec reduction in page load ->
15% in download conversions
![Page 6: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/6.jpg)
Measuring Speed to Transaction
Keynote Brokerage Performance Index http://www.keynote.com/keynote_competitive_research/performance
_indices/broker_index/broker.html
![Page 7: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/7.jpg)
Broken bridge by Klobetime, on Flickr
![Page 8: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/8.jpg)
Cache Header Settings
The fastest way to load an asset onto a web
page is to not have to make a network
request for it at all
- Cache header settings enable a web browser to use an
element out of the browser cache with confidence that
the copy is still “fresh”
- Without appropriate headers, or with misconfigured
headers, the browser must send a conditional HTTP
request to the server to see if the element can be used
from cache or if a fresh copy needs to be sent instead
HTTP 304 Not Modified responses are an
indicator that cache headers are harming
page load performance
A case study
- A site home page loads 8 JPEG images that are used on
other pages on the site
- All are static images served from a very fast server
- If only the Home Page is viewed, the performance of
these images is quite fast
- However, if a site visitor explores the site, these same
images are used in the design of other pages
- The cache header settings are not set properly
- Conditional requests are made
- The browser ends up using the elements out of cache
![Page 9: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/9.jpg)
Cache Header Settings
On a multi-page transaction through this
site, the Features & Options page has two
conditional HTTP requests
- Result in HTTP 304 Not Modified responses
- Caused by cache header problems
- In this case, the two assets load early in the page,
so the extra delays are potentially impacting the
user experience of other content on the page
Home Page
Features & Options
![Page 10: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/10.jpg)
Cache Header Settings
In this case, an image that should be cacheable was accidentally
set with a Cache-Control header “private” and “max-age=0”
- There is nothing special about this image – it is simply a gradient used for
background shading
- This misconfigured header causes unexpected and unnecessary delay
Features & Options
![Page 11: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/11.jpg)
Data URIs
Data URIs are a great way to improve
performance, especially for mobile
websites
- Each asset encoded as a data URI avoids an HTTP
request-response round trip over the internet
- Not only does this avoid latency, but it reduces the number of
bytes transferred in HTTP headers
- In the case of a secure page, the site may avoid having
to establish an additional SSL connection
- The limited number of parallel threads/downloads in the
browser can be used to load other assets more quickly
A case study
- Products page had been loading 17 PNG image files
- Small thumbnail images of products in current
inventory
- All were replaced with data URIs in the base page
HTML response
- The performance of the Products page improved, albeit
slightly
- These same thumbnail images, however, were being
used on other pages on the site, including a page that
lets you design a custom version of the products
![Page 12: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/12.jpg)
Changes to the Products page
The structure of the Products page changed significantly in March
- Although the overall number of assets on the page has not substantially changed, most page content is now being
loaded in data URIs returned in the initial base page response
- One external PNG and one Omniture call load separately
- Ensuring the consistency of the ASPX response time is now critical
Products
New York AT&T
Apple iPhone 4
Data URIs
Products
San Francisco AT&T
Apple iPhone 4
![Page 13: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/13.jpg)
Customize Your Product Page Was Not Changed
The structure of the Customize Your Product page changed significantly in March
- Prior to March 22, there were only five new HTTP requests
- Most page content (including the 17 PNG image files) was already in the in-session browser cache
- Starting on March 22, with the change to the Products page, many new HTTP requests now have to be made
Customize Your Product
San Francisco Verizon
Motorola Droid X
Customize Your Product
San Francisco Sprint
HTC TouchHD
![Page 14: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/14.jpg)
Data URIs – Tradeoffs
We can see the tradeoff in the high-speed, low-latency network connection data
- Many small product thumbnail images were loaded as data URIs, encoded directly in to the base page HTML
response
- This has improved the performance of the Products page
- However, the Customize Your Product page, which was using many of the same images directly out of the in-session
browser cache, is now slower on average
Products
LAN
Customize Your Product
LAN
![Page 15: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/15.jpg)
Real Users Aren’t Robots
Synthetic tests have draw-backs
- Fixed number of “agent” locations and browser types/versions
- Last mile performance measurement can be expensive
- Website visitors take detours
- What are the most common paths being traversed by actual
users?
- What is the performance of those paths?
- When an issue is identified, its impact to actual users is unknown
- Scripts can only generate a limited variability of interactions
- Scripts need maintenance
![Page 16: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/16.jpg)
Real User Monitoring to the Rescue!
Browser RUM can help fill in the gaps
- Reveals actual user impact when slow downs occur
- Last mile performance, across all browsers used
- Inclusive of all the variations in visitor paths and behavior
- No scripting!
Not so fast…
- Noise
- Resource level detail
![Page 17: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/17.jpg)
Better Together
RUM + synthetic complement each other
- Page performance anomaly detection and diagnosis
- Drill from RUM browser events at the page level to
waterfalls generated by corresponding synthetic tests
- User impact assessment
- Quantify real user population impacted by performance
issues identified in synthetic tests
- Synthetic test optimization
- Identify high usage, low performance pages to monitor
synthetically
- Optimize “agent” locations
- Identify high usage user path variations to monitor
synthetically Splash! by jfournierphoto, on Flickr
![Page 18: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/18.jpg)
Keynote’s Approach
Hybrid Synthetic + RUM
- Browser-based real user monitoring
- “Model” transactions
- Real user paths
- Fuzzy logic pattern matching
- Comparative analysis
- Demo: Real User Perspective
![Page 19: The Critical Path to Performance: User Journeys](https://reader034.fdocuments.in/reader034/viewer/2022051611/54b5d2bc4a7959f12a8b467a/html5/thumbnails/19.jpg)
Thank You
Aaron Rudger, [email protected] / @arudger
Ken Harker, [email protected]
David Azaria, [email protected]