Site Managing Performance

©2016 AKAMAI | FASTER FORWARD™

Metrics, Best Practices and Tools

Website Performance Management

Shawn Miller - Sr. Solution Architect - Managed Delivery Service (MDS)Desmond Tam - Sr. Enterprise Architect - Consulting Services


Agenda

■ Challenges & Pitfalls

■ Metrics - Traps, Gotchas, and Things Easily Missed

■ Approaches, Tools and Strategies

■ How Can Akamai Help?


Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.

Challenges &

Pitfalls


Understand Your Users

Median times only tell part of the story



Traffic

Page Load Time

Akamai Real User Monitoring

Fast Only Matters if Your Application is Scalable


Possible Pain Points

⚠ Origin⚠

⚠ ⚠

⚠⚠ Middle

Mile

⚠ 3rd Party

⚠ Front-End


Information Overload … and Not Enough Time


When Your Metrics Mislead You...

Metrics: Traps, Gotchas, and Things Easily Missed


Measuring Performance

We need benchmarks, so what do we measure?

● Time to First Byte (TTFB)? Fully Loaded? Onload?

● RUM? Synthetic?

● Mobile!

● Single point in time VS regular intervals


Watch Out...


Understand the Measurement

❒ What is happening up to that measurement?

❒ Are you measuring what you expect?

❒ Is it representative of how customers approach your site?

❒ Is the benchmark/metric you are using still valid?

❒ Fixated on one point but missing out on the bigger picture?


W3C Nav Timing


Browsers and Devices


But hey,

Time to First Byte

is pretty solid metric, right?


Time To First Byte

Evolution of CDN - Uncacheable Pages...

Pre-Optimization


Evolution of CDN - Uncacheable Pages...

Pre-Optimization

Time To First Byte

Post-Optimizationexamples with two very different outcomes!


Onload Event

Onload for one application may work better for some but not for others


Metrics

What about user experience?


Was the test configured incorrectly? (i.e. unintended redirects, geo-blocking)

In some cases this is acceptable, in some they’re not.

● What’s representative of real world? ● How do users get to your site?

Navigation - Redirects and Representative Site Configuration


Navigation - Redirects and Representative Site Configuration

Did the page even render?

If something rendered, was it what you expected?

Common culprits

● A/B testing● GEO Redirects● Bot Blocking/Caging!


User Experience While Loading - First Paint / Start Render vs OnLoad vs Fully Loaded


User Experience While Loading - Visual ProgressionSpeed Index

Visually Complete ProgressImage Source: Webpagetest.org, July 2016https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index


User Experience While Loading

Load Time

2.4s

DOM Complete

1.4sSpeed Index

12717

Surely Speed Index?


User Timing

When does the “important stuff” appear on my page?

window.performance.mark('HERO_HAS_ARRIVED');

● User Timing Api: https://www.w3.org/TR/user-timing/


Identifying the Issues

How do you identify the cause?

Who is responsible?

How do you mitigate 3rd party issues (product recommendations, etc)


Identifying the Root CauseWebpagetest.org Browser Dev Tools

● Waterfall● Domain tab● Filmstrips● Calling page (aka “loaded by”)

● Waterfall● Script debugging● Calling page (aka “Initiator”)● Browser emulation


MetricsIt’s not all doom and gloom! Set goals!

● Set Goals○ Revisit the goal and validate if it’s still applicable

● Verify the results!● Educate stakeholders● Enhance reporting with filmstrips/videos etc, where appropriate

● Comparative results to a competitor or a site representative of your goals can be helpful to put things into context


Focus Back on User Experience and Impact to Business

AMOUNT OF TRAFFIC

REVENUE

ENGAGEMENT

PAGE VIEWS

CUSTOMER SATISFACTION

COST

BOUNCE RATE

Source: https://speakerdeck.com/tkadlec/once-more-with-feeling

https://speakerdeck.com/tkadlec/once-more-with-feeling

Tools , Approaches, and Strategies


Choose the Right Tool(s)


Real User Monitoring (RUM)

• Real world• All wireless carriers/local

ISPs• All end-users’ locations,

pages visited & browsers/devices

End User Experience Fidelity

Synthetic Monitoring - Backbone

• Clean room environment• Over Internet backbone• Limited # of pages, locations

& browsers/devices

Synthetic Monitoring - Last

Mile / Mobile

• Clean room environment• Over limited # of wireless

carriers/local ISPs• Limited # of pages,

locations & browsers/devices

MajorISPs

Real Customers / Employees

Operational Experiential

LocalISPs

Mobile Carriers

Understand RUM vs Synthetic Testing


Goals: Setting Performance Budgets

“A quantitative expression of a plan for a defined period of time.”

Wikipedia


Example Performance BudgetMEASURE MAXIMUM TOOL NOTES

Total page load time 2 seconds WebPagetest, median from five runs on 3G

All pages

Total page load time 2 seconds Real user monitoring tool, median across geographies

All pages

Total page weight 800 Kb WebPagetest All pages

Speed Index 1,000 WebPagetest using Dulles location in Chrome on 3G

All pages except home page

Speed Index 600 WebPagetest using Dulles location in Chrome on 3G

Home page

Source: Performance budget at Etsy by Lara Callendar Hogan: https://codeascraft.com/2014/12/11/make-performance-part-of-your-workflow/

https://community.akamai.com/external-link.jspa?url=https%3A%2F%2Fcodeascraft.com%2F2014%2F12%2F11%2Fmake-performance-part-of-your-workflow%2F

https://community.akamai.com/external-link.jspa?url=https%3A%2F%2Fcodeascraft.com%2F2014%2F12%2F11%2Fmake-performance-part-of-your-workflow%2F


Stick to the Budget!

1. Optimize an existing feature or asset on the page.

2. Remove an existing feature or asset from the page.

3. Don’t add the new feature or asset.

Source: Tim Kadlec

https://timkadlec.com/2013/01/setting-a-performance-budget/


Too much of a good thing...

Each carousel adds below-the-fold content

“Greatest drawbacks of carousels …people often immediately scroll past these large images.”

http://www.nngroup.com/articles/designing-effective-carousels/


Avoid Being the Cop or the Janitor


Create a Performance Culture

EDUCATE CELEBRATECOMMUNICATE


A/B Testing


Trending vs Direct Comparison

Page Load: 36.1% ⤵

DOM Complete:36% ⤵


Use Descriptive Statistics to Quantify RUM


Comparing RUM Metrics


Apply Front-End Best Practices

MINIFY & COMPRESS

OPTIMIZE IMAGES

CSS FIRST

JS BOTTOM

ASYNC SCRIPTS

AVOID REDIRECTS

DOMAIN SHARDING

REDUCE REQUESTS

How Akamai Can Help


How Akamai can Help

☑ Leverage Akamai Luna Reports and RUM

☑ Akamai Assessment Services

☑ Akamai Managed Delivery Service


Make Use of Akamai Data

Log Delivery Service

Cloud Monitor

Luna Portal Reports Spreadsheet Analysis

Luna Portal Reports

Raw Export


Akamai Assessment Services

1 2 3Event Primer 360º Assessment Custom Consulting Services

We Offer...


Especially When It Involves ...

Visualization of the InternetBarrett Lyon / The Opte Project

http://www.opte.org/faq/


Managed Delivery Service

Monitoring / Alerting

• 24 x7 Monitoring (Hourly sampling)

• Triage Changes• Alert to issues• Recommend Next Steps• Help Mitigate issues

Optimizing

• Monitor & Analyzeo Configuration - Feature

Enablement & Optimizationo URL Content Structure

• Recommend Optimizations• Help with Optimization

Reporting

• Trend Reports • URL RUM data insights• Alert & Action Summary

Detect and Mitigate Issues Proactive

Gain Insight

Weekly

Optimize

Monthly

Offload 24x7 performance management of business critical URLs to Akamai experts....


QUESTIONS

?? ?