Measuring Web Performance

MeasuringWeb PerformanceDave Olsen, @dmolsenWest Virginia UniversityRWD Summithttp://flic.kr/p/7A8xxN

slideshare.net/dmolsenwvu

introduction about me@dmolsen

What I’ll Talk About

• Quick Intro About Why We Should Care About Web Perf

• Tools for Measuring Web Performance

• Setting Up a Device Lab

• Responsive Design + Server-side Solutions

WHY SHOULD WE CARE ABOUT WEB PERFORMANCE?

http://flic.kr/p/4JY1Yr

brad’s iceberg

© Brad Frost

© Brad Frost

The way in which CSS media queries have been promoted for

mobile hides tough problems and gives developers a false

promise of a simple solution for designing for small screens.

Source: Jason Grigsby on Speakerdeck

“

” - Jason Grigsby @grigs

brad’s iceberg

© Brad Frost© Brad Frost

© Brad Frost

The average weight of a web page today.

Source: HTTP Archive

Images JavaScript

Flash

HTM

LC

SSOther

77%

1.3 MB

RWD sites whose small screen design weighs the same as the large screen design.

Source: Podjarny

72%

Users expect your mobile site to load as quickly as your desktop site.

71%

Source: Gomez

Bounce Rate Conversion Rate Cart Size Page Views

200ms - - - -1.2%

500ms -4.7% -1.9% - -5.7%

1000ms -8.3% -3.5% -2.1% -9.4%

CASE STUDY: MOBILE PERFORMANCE EFFECT ON BUSINESS

Source: Web Performance Today

Mobile first means performance first.

(start thinking about performance at the design stage)

Over Downloading

Download & HideDownload & ShrinkDownload & Ignore

PRIMARY PERFORMANCE ISSUES FOR RWD

Poor Networks

High LatencyVariable Bandwidth

Packet Loss

BREAKING DOWN A REQUEST

DNS (1ms)

Connecting (61ms)

Waiting (199ms)

Receiving (790ms)

MOBILE OPTIMIZATION FOCUS

1. Reduce requests2. Reduce asset size3. Speed-up page

render

http://flic.kr/p/4zzKee

Best request is no request. Worst request is one that

blocks the parser.

Source: Ilya Grigorik

“

” - Ilya Grigorik @ilyagrigorik

Browser cache

The simplest way to reduce requests is to make sure the browser doesn’t need to make them. Make sure assets are bring cached on the browser.

ConcatenateJS & CSS

Combine similar files together in one or multiple larger files to reduce requests. May harm performance too.

Lazy load content

Don’t make requests until necessary. Filament Group’s AJAX Include Pattern or lazyBlock.

data: URI For small images & fonts try embedding them in your CSS file by using the data: URI.

Conditional loading

Use a resource loader like Modernizr.load to conditionally include JavaScript & CSS files.

1. REDUCE REQUESTS

HTML & CSS compression

Use mod_deflate to make sure text-based assets are compressed for transfer.

Image compression

Use a service like kraken.io to optimize images. Also use CSS sprites as appropriate.

Try to avoid images

When possible think about avoiding images. Implement with CSS or Canvas. Or use SVG or Progressive JPEGs.

Minification Use a minifying service to make sure text-based assets are as small as possible. If using PHP use Minify.

MicroJS or, even better,

Vanilla JS

Avoid using bulky frameworks if you’re using them for simple tasks like selectors. Try microjs.com to find libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page.

2. REDUCE ASSET SIZE

Avoid DOM reflows &

repaints

By using JS to modify the DOM you can cause unnecessary reflows & repaints of your browser. They slow down page render time as well as burn battery.

Defer loading of JavaScript

Use HTML5’s script defer & async attributes to delay downloading files. Can also insert script elements into the DOM using the onLoad event.

Lazy load JavaScript

Comment out JavaScript that isn’t required at page load. Uncomment & eval() when required.

Touch beats onClick

While not directly related to page render, by making sure your links use a Touch event rather than an onClick event user interactions will speed up by 300ms.

Avoid SM widgets

Try using simple links to services rather than utilizing the JavaScript widgets. They’re performance hogs.

3. SPEED-UP PAGE RENDER

Testing Tools

toolbox, tools

WEB PERFORMANCE TOOLS

http://flic.kr/p/4BZsQJ

DiagnosticTools

AutomatedTools

DiagnosticTools

AutomatedTools

LEARN TO LOVE THE INSPECTOR

FOLLOW ALONG BY OPENING THE DEVELOPER TOOLS IN CHROME

SAVE YOURSELF A HEADACHE &DISABLE CACHE WHEN TESTING

EXPLAINING THE NETWORK PANEL:RESOURCE SIZE

transferred size

real size

re-order

EXPLAINING THE NETWORK PANEL:LATENCY

latency + download

latency

re-order

EXPLAINING THE NETWORK PANEL:EVENTS

domcontentloaded

onload

EXPLAINING THE NETWORK PANEL:SAVING HAR FILES FOR COMPARISON

save HAR file locally

A narrower, shorter waterfall is the goal.

http://flic.kr/p/bMdzZ2

Performance

http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e

A guide, not a hard & fast limit. Performance tweaks are compromises.

EXPLAINING THE TIMELINE PANEL

EXPLAINING THE PROFILES PANEL:CSS SELECTORS

EXPLAINING THE PROFILES PANEL:CSS SELECTORS

EXPLAINING THE AUDITS PANEL

PAGESPEED INSIGHTS EXTENSIONhttps://developers.google.com/speed/pagespeed/insights

REMOTE DEBUGGING

Google Analytics Site Speed

http://www.httpwatch.comIE & FIREFOX PERFORMANCE ISSUES

Google Analytics Site Speed

GOOGLE ANALYTICS’ SITE SPEED

PERFORMANCE TESTING PROXIES

MobitestWebPagetest

Google Analytics Site Speed

http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BASICS

Google Analytics Site Speed

CUSTOMIZING WebPagetest:CAPTURING EVENTS AFTER ONLOAD

CUSTOMIZING WebPagetest:BLACKHOLES FOR REQUESTS

Google Analytics Site Speed

CUSTOMIZING WebPagetest:SCRIPTING & CUSTOM VIEWPORTS

CUSTOMIZING WebPageTest:VIDEO COMPARISON

CUSTOMIZING WebPageTest:VIDEO COMPARISON - SMALL VIEWPORT

mobile bookmarklet

THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET

charlesproxy.com

SLOWING THINGS DOWN

ThrottleCharles

USING CHARLES PROXYhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/

TEST & OPTIMIZE JAVASCRIPT WITH JSPERFhttp://jsperf.com

W3C’s NAVIGATION TIMINGhttp://www.w3.org/TR/navigation-timing/

http://www.html5rocks.com/en/tutorials/webperformance/basics/

DiagnosticTools

AutomatedTools

mod_pagespeed AUTOMATES A LOThttp://developers.google.com/speed/pagespeed/mod

  add_head  combine_css   convert_jpeg_to_progressive   convert_meta_tags   extend_cache   flatten_css_imports   inline_css   inline_import_to_link   inline_javascript   rewrite_css   rewrite_images   rewrite_javascript   rewrite_style_attributes_with_url

Default Filters

CodeKit

CODEKIT: WEB PERF IN YOUR WORKFLOW

  Optimize Images  Combine & Minify

Features

http://incident57.com/codekit/

DEVICES

http://flic.kr/p/cfkZhN

charlesproxy.com

EMULATING MOBILE DEVICES

EmulatorsBrowserStack

eBay MobileKarma.com Cellphone store leftoversOpen device labs

GET YOUR HANDS ON REAL DEVICES

http://flic.kr/p/7972f6

OPENDEVICELAB.COM

Base on:WiFi-capable, Analytics

Rank, OS, Screen Dimensions, & Cost

Suggested focus: iPod Touch, mid-level

Android, high-end Android, a tablet, Blackberry,

Windows Phone 7

HOW TO DECIDE WHICH TO GET

iPod TouchSamsung Fascinate +Google Nexus +

$438

Example:

ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)

RESS* can be a scalpel for your responsive designs.

REsponsive Design + Server Side Components

http

://fli

c.kr

/p/a

4VsP

v

One...

URL.Set of Mark-up.

Deployment.

WHY USE RWD

futurefriend.ly

balloons

http://flic.kr/p/h6McT

TIME TO PARTY!

http://flic.kr/p/8x6b8X

NOT SO FAST, MY FRIENDS...

Image & Video Media3rd Party Content

One Set of Mark-up

CHALLENGES FOR RWD

STANDARDS ARE STILL DEVELOPING

What is RESS?

Responsive Web Design +Server Side Components

(I have no idea what becomes of the W, D, or C)

- Luke Wroblewski @lukew

http://www.lukew.com/ff/entry.asp?1392

In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side.

“

”

http://www.lukew.com/ff/entry.asp?1509

- Luke Wroblewski @lukew

• If you want layout adjustments across devices.• And optimization at the component level to

increase performance or tune user experience.• You trust server-side device detection with

sensible defaults.

“

”

DES

KTO

P W

EBM

-AD

VAN

CED

ress.dmolsen.com

MO

BILE BA

SIC

Infancy

http://flic.kr/p/7B7uyp

RESS IS IN ITS INFANCY

ND data

http://weedygarden.net/2012/05/a-case-for-ress/

Large Screen: 136 requests @ 2.7MB

Small Screen: 23 requests @ 291K

developers and designers

http://flic.kr/p/7Ma9n

DESIGNERS + DEVELOPERS?

Two Possible Solutions

Server-sideSolutions

http://flic.kr/p/9jatna

Browser Detection#1

Server-side Feature Detection#2

• Requires server-side languages.

• Server-side feature detection so it can be spoofed.

• RESS isn’t a silver bullet.

• Data needs to be separated from layout.

CHALLENGES FOR RESS

- Jon Arnes Sæterås @jonarnes

http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

It is not only the design of the web site and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain.

“

”

WEB PERF TWEEPS TO FOLLOW

@ilyagrigorik

@andydavies

@souders @patmeenan

@stoyanstefanov

@joshuabixby @yoavweiss@scottjehl

just a sampling

Doug GapinskiStrategistmStoner

@thedougco

SPECIAL THANKS TO...

QUESTIONS?

Dave OlsenProfessional TechnologistWest Virginia University

@dmolsen

THANKS FOR LISTENING