Measuring Web Performance

Slide 1

Slide 1 text

Measuring Web Performance Dave Olsen, @dmolsen West Virginia University RWD Summit http://ﬂic.kr/p/7A8xxN

Slide 2

Slide 2 text

slideshare.net/dmolsenwvu

Slide 3

Slide 3 text

introduction about me @dmolsen

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

WHY SHOULD WE CARE ABOUT WEB PERFORMANCE? http://ﬂic.kr/p/4JY1Yr

Slide 6

Slide 6 text

brad’s iceberg © Brad Frost © Brad Frost

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

brad’s iceberg © Brad Frost © Brad Frost © Brad Frost

Slide 9

Slide 9 text

The average weight of a web page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.3 MB

Slide 10

Slide 10 text

RWD sites whose small screen design weighs the same as the large screen design. Source: Podjarny 72%

Slide 11

Slide 11 text

Users expect your mobile site to load as quickly as your desktop site. 71% Source: Gomez

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Mobile first means performance first. (start thinking about performance at the design stage)

Slide 14

Slide 14 text

Over Downloading Download & Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss

Slide 15

Slide 15 text

BREAKING DOWN A REQUEST DNS (1ms) Connecting (61ms) Waiting (199ms) Receiving (790ms)

Slide 16

Slide 16 text

MOBILE OPTIMIZATION FOCUS 1. Reduce requests 2. Reduce asset size 3. Speed-up page render http://ﬂic.kr/p/4zzKee

Slide 17

Slide 17 text

Best request is no request. Worst request is one that blocks the parser. Source: Ilya Grigorik “ ” - Ilya Grigorik @ilyagrigorik

Slide 18

Slide 18 text

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. Concatenate JS & 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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Testing Tools toolbox, tools WEB PERFORMANCE TOOLS http://ﬂic.kr/p/4BZsQJ

Slide 22

Slide 22 text

Diagnostic Tools Automated Tools

Slide 23

Slide 23 text

Diagnostic Tools Automated Tools

Slide 24

Slide 24 text

LEARN TO LOVE THE INSPECTOR

Slide 25

Slide 25 text

FOLLOW ALONG BY OPENING THE DEVELOPER TOOLS IN CHROME

Slide 26

Slide 26 text

SAVE YOURSELF A HEADACHE & DISABLE CACHE WHEN TESTING

Slide 27

Slide 27 text

EXPLAINING THE NETWORK PANEL: RESOURCE SIZE transferred size real size re-order

Slide 28

Slide 28 text

EXPLAINING THE NETWORK PANEL: LATENCY latency + download latency re-order

Slide 29

Slide 29 text

EXPLAINING THE NETWORK PANEL: EVENTS domcontentloaded onload

Slide 30

Slide 30 text

EXPLAINING THE NETWORK PANEL: SAVING HAR FILES FOR COMPARISON save HAR ﬁle locally

Slide 31

Slide 31 text

A narrower, shorter waterfall is the goal.

Slide 32

Slide 32 text

http://ﬂic.kr/p/bMdzZ2

Slide 33

Slide 33 text

Performance http://timkadlec.com/2013/01/setting-a-performance-budget/ http://ﬂic.kr/p/7BBs6e A guide, not a hard & fast limit. Performance tweaks are compromises.

Slide 34

Slide 34 text

EXPLAINING THE TIMELINE PANEL

Slide 35

Slide 35 text

EXPLAINING THE PROFILES PANEL: CSS SELECTORS

Slide 36

Slide 36 text

EXPLAINING THE PROFILES PANEL: CSS SELECTORS

Slide 37

Slide 37 text

EXPLAINING THE AUDITS PANEL

Slide 38

Slide 38 text

PAGESPEED INSIGHTS EXTENSION https://developers.google.com/speed/pagespeed/insights

Slide 39

Slide 39 text

REMOTE DEBUGGING

Slide 40

Slide 40 text

Google Analytics Site Speed http://www.httpwatch.com IE & FIREFOX PERFORMANCE ISSUES

Slide 41

Slide 41 text

Google Analytics Site Speed GOOGLE ANALYTICS’ SITE SPEED

Slide 42

Slide 42 text

PERFORMANCE TESTING PROXIES Mobitest WebPagetest

Slide 43

Slide 43 text

Google Analytics Site Speed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - BEYOND THE BASICS

Slide 44

Slide 44 text

Google Analytics Site Speed CUSTOMIZING WebPagetest: CAPTURING EVENTS AFTER ONLOAD

Slide 45

Slide 45 text

CUSTOMIZING WebPagetest: BLACKHOLES FOR REQUESTS

Slide 46

Slide 46 text

Google Analytics Site Speed CUSTOMIZING WebPagetest: SCRIPTING & CUSTOM VIEWPORTS

Slide 47

Slide 47 text

CUSTOMIZING WebPageTest: VIDEO COMPARISON

Slide 48

Slide 48 text

CUSTOMIZING WebPageTest: VIDEO COMPARISON - SMALL VIEWPORT

Slide 49

Slide 49 text

mobile bookmarklet THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET

Slide 50

Slide 50 text

charlesproxy.com SLOWING THINGS DOWN Throttle Charles

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

TEST & OPTIMIZE JAVASCRIPT WITH JSPERF http://jsperf.com

Slide 53

Slide 53 text

W3C’s NAVIGATION TIMING http://www.w3.org/TR/navigation-timing/ http://www.html5rocks.com/en/tutorials/webperformance/basics/

Slide 54

Slide 54 text

Diagnostic Tools Automated Tools

Slide 55

Slide 55 text

mod_pagespeed AUTOMATES A LOT http://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

Slide 56

Slide 56 text

CodeKit CODEKIT: WEB PERF IN YOUR WORKFLOW Optimize Images Combine & Minify Features http://incident57.com/codekit/

Slide 57

Slide 57 text

DEVICES http://ﬂic.kr/p/cfkZhN

Slide 58

Slide 58 text

charlesproxy.com EMULATING MOBILE DEVICES Emulators BrowserStack

Slide 59

Slide 59 text

eBay MobileKarma.com Cellphone store leftovers Open device labs GET YOUR HANDS ON REAL DEVICES http://ﬂic.kr/p/7972f6

Slide 60

Slide 60 text

OPENDEVICELAB.COM

Slide 61

Slide 61 text

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 Samsung Fascinate + Google Nexus + $438 Example:

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

RESS* can be a scalpel for your responsive designs. REsponsive Design + Server Side Components http://ﬂic.kr/p/a4VsPv

Slide 65

Slide 65 text

One... URL. Set of Mark-up. Deployment. WHY USE RWD

Slide 66

Slide 66 text

futurefriend.ly

Slide 67

Slide 67 text

balloons http://ﬂic.kr/p/h6McT TIME TO PARTY!

Slide 68

Slide 68 text

http://ﬂic.kr/p/8x6b8X NOT SO FAST, MY FRIENDS...

Slide 69

Slide 69 text

Image & Video Media 3rd Party Content One Set of Mark-up CHALLENGES FOR RWD

Slide 70

Slide 70 text

STANDARDS ARE STILL DEVELOPING

Slide 71

Slide 71 text

What is RESS?

Slide 72

Slide 72 text

Responsive Web Design + Server Side Components (I have no idea what becomes of the W, D, or C)

Slide 73

Slide 73 text

- 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. “ ”

Slide 74

Slide 74 text

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. “ ”

Slide 75

Slide 75 text

DESKTOP WEB M-ADVANCED ress.dmolsen.com MOBILE BASIC

Slide 76

Slide 76 text

Infancy http://ﬂic.kr/p/7B7uyp RESS IS IN ITS INFANCY

Slide 77

Slide 77 text

ND data http://weedygarden.net/2012/05/a-case-for-ress/ Large Screen: 136 requests @ 2.7MB Small Screen: 23 requests @ 291K

Slide 78

Slide 78 text

developers and designers http://ﬂic.kr/p/7Ma9n DESIGNERS + DEVELOPERS?

Slide 79

Slide 79 text

Two Possible Solutions Server-side Solutions http://ﬂic.kr/p/9jatna

Slide 80

Slide 80 text

Browser Detection #1

Slide 81

Slide 81 text

Server-side Feature Detection #2

Slide 82

Slide 82 text

• 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

Slide 83

Slide 83 text

- 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. “ ”

Slide 84

Slide 84 text

WEB PERF TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @joshuabixby @yoavweiss @scottjehl just a sampling

Slide 85

Slide 85 text

Doug Gapinski Strategist mStoner @thedougco SPECIAL THANKS TO...

Slide 86

Slide 86 text

QUESTIONS?

Slide 87

Slide 87 text

Dave Olsen Professional Technologist West Virginia University @dmolsen THANKS FOR LISTENING