Measuring Web Performance (HighEdWeb FL Edition)

MeasuringWeb PerformanceDave Olsen, @dmolsenWest Virginia UniversityHighEdWeb Floridahttp://flic.kr/p/7A8xxN

slideshare.net/dmolsenwvu

introduction about me@dmolsen

The Mobile Book

• Covers everything mobile

• Produced by Smashing Media

• Chapters by Peter-Paul Koch, Stephanie Rieger, Brad Frost, Trent Walton, me & others

• Door prize here!

http://the-mobile-book.com

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

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

MOBILE OPTIMIZATION FOCUS

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

render

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

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

FE

P

FE

FE

FE

Best request is no request. Worst request is one that

blocks the parser.

Source: Ilya Grigorik

“

” - Ilya Grigorik @ilyagrigorik

Image compression

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

Compress HTML & CSS

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

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

P

SS

FE

P

FE

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

FE

FE

FE

FE

FE

Testing Tools

toolbox, tools

WEB PERFORMANCE TOOLS

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

DiagnosticTools

AutomatedTools

DiagnosticTools

AutomatedTools

LEARN TO LOVE THE INSPECTOR

DEVTOOLS CAN DO THAT?http://bit.ly/15sWYsx

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

Test the squishy.

default styles vs. min-width vs. max-width

Perform

ance

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

A budget is 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 Touch w/ RetinaSamsung Fascinate +Google Nexus One +

$537

Example:

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

RESS: AN EVOLUTION OF RESPONSIVE DESIGN

http://slidesha.re/KtByzQ

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