Measuring Web Performance (HighEdWeb FL Edition)
-
Upload
dave-olsen -
Category
Technology
-
view
113 -
download
0
description
Transcript of Measuring Web Performance (HighEdWeb FL Edition)
![Page 1: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/1.jpg)
MeasuringWeb PerformanceDave Olsen, @dmolsenWest Virginia UniversityHighEdWeb Floridahttp://flic.kr/p/7A8xxN
![Page 2: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/2.jpg)
slideshare.net/dmolsenwvu
![Page 3: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/3.jpg)
introduction about me@dmolsen
![Page 4: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/4.jpg)
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
![Page 5: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/5.jpg)
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
![Page 6: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/6.jpg)
WHY SHOULD WE CARE ABOUT WEB PERFORMANCE?
http://flic.kr/p/4JY1Yr
![Page 7: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/7.jpg)
brad’s iceberg
© Brad Frost
© Brad Frost
![Page 8: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/8.jpg)
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
![Page 9: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/9.jpg)
brad’s iceberg
© Brad Frost© Brad Frost
© Brad Frost
![Page 10: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/10.jpg)
The average weight of a web page today.
Source: HTTP Archive
Images JavaScript
Flash
HTM
LC
SSOther
77%
1.3 MB
![Page 11: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/11.jpg)
RWD sites whose small screen design weighs the same as the large screen design.
Source: Podjarny
72%
![Page 12: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/12.jpg)
Users expect your mobile site to load as quickly as your desktop site.
71%
Source: Gomez
![Page 13: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/13.jpg)
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
![Page 14: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/14.jpg)
Mobile first means performance first.
(start thinking about performance at the design stage)
![Page 15: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/15.jpg)
Over Downloading
Download & HideDownload & ShrinkDownload & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High LatencyVariable Bandwidth
Packet Loss
![Page 16: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/16.jpg)
MOBILE OPTIMIZATION FOCUS
1. Reduce requests2. Reduce asset size3. Speed-up page
render
http://flic.kr/p/4zzKee
![Page 17: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/17.jpg)
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
![Page 18: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/18.jpg)
Best request is no request. Worst request is one that
blocks the parser.
Source: Ilya Grigorik
“
” - Ilya Grigorik @ilyagrigorik
![Page 19: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/19.jpg)
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
![Page 20: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/20.jpg)
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
![Page 21: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/21.jpg)
Testing Tools
toolbox, tools
WEB PERFORMANCE TOOLS
http://flic.kr/p/4BZsQJ
![Page 22: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/22.jpg)
DiagnosticTools
AutomatedTools
![Page 23: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/23.jpg)
DiagnosticTools
AutomatedTools
![Page 24: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/24.jpg)
LEARN TO LOVE THE INSPECTOR
![Page 26: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/26.jpg)
FOLLOW ALONG BY OPENING THE DEVELOPER TOOLS IN CHROME
![Page 27: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/27.jpg)
SAVE YOURSELF A HEADACHE &DISABLE CACHE WHEN TESTING
![Page 28: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/28.jpg)
EXPLAINING THE NETWORK PANEL:RESOURCE SIZE
transferred size
real size
re-order
![Page 29: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/29.jpg)
EXPLAINING THE NETWORK PANEL:LATENCY
latency + download
latency
re-order
![Page 30: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/30.jpg)
EXPLAINING THE NETWORK PANEL:EVENTS
domcontentloaded
onload
![Page 31: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/31.jpg)
EXPLAINING THE NETWORK PANEL:SAVING HAR FILES FOR COMPARISON
save HAR file locally
![Page 32: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/32.jpg)
A narrower, shorter waterfall is the goal.
![Page 33: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/33.jpg)
http://flic.kr/p/bMdzZ2
Test the squishy.
default styles vs. min-width vs. max-width
![Page 34: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/34.jpg)
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.
![Page 35: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/35.jpg)
EXPLAINING THE TIMELINE PANEL
![Page 36: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/36.jpg)
EXPLAINING THE PROFILES PANEL:CSS SELECTORS
![Page 37: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/37.jpg)
EXPLAINING THE PROFILES PANEL:CSS SELECTORS
![Page 38: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/38.jpg)
EXPLAINING THE AUDITS PANEL
![Page 39: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/39.jpg)
PAGESPEED INSIGHTS EXTENSIONhttps://developers.google.com/speed/pagespeed/insights
![Page 40: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/40.jpg)
REMOTE DEBUGGING
![Page 41: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/41.jpg)
Google Analytics Site Speed
http://www.httpwatch.comIE & FIREFOX PERFORMANCE ISSUES
![Page 42: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/42.jpg)
Google Analytics Site Speed
GOOGLE ANALYTICS’ SITE SPEED
![Page 43: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/43.jpg)
PERFORMANCE TESTING PROXIES
MobitestWebPagetest
![Page 44: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/44.jpg)
Google Analytics Site Speed
http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BASICS
![Page 45: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/45.jpg)
Google Analytics Site Speed
CUSTOMIZING WebPagetest:CAPTURING EVENTS AFTER ONLOAD
![Page 46: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/46.jpg)
CUSTOMIZING WebPagetest:BLACKHOLES FOR REQUESTS
![Page 47: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/47.jpg)
Google Analytics Site Speed
CUSTOMIZING WebPagetest:SCRIPTING & CUSTOM VIEWPORTS
![Page 48: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/48.jpg)
CUSTOMIZING WebPageTest:VIDEO COMPARISON
![Page 49: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/49.jpg)
CUSTOMIZING WebPageTest:VIDEO COMPARISON - SMALL VIEWPORT
![Page 50: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/50.jpg)
mobile bookmarklet
THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET
![Page 51: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/51.jpg)
charlesproxy.com
SLOWING THINGS DOWN
ThrottleCharles
![Page 52: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/52.jpg)
USING CHARLES PROXYhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
![Page 53: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/53.jpg)
TEST & OPTIMIZE JAVASCRIPT WITH JSPERFhttp://jsperf.com
![Page 54: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/54.jpg)
W3C’s NAVIGATION TIMINGhttp://www.w3.org/TR/navigation-timing/
http://www.html5rocks.com/en/tutorials/webperformance/basics/
![Page 55: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/55.jpg)
DiagnosticTools
AutomatedTools
![Page 56: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/56.jpg)
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
![Page 57: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/57.jpg)
CodeKit
CODEKIT: WEB PERF IN YOUR WORKFLOW
Optimize Images Combine & Minify
Features
http://incident57.com/codekit/
![Page 59: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/59.jpg)
charlesproxy.com
EMULATING MOBILE DEVICES
EmulatorsBrowserStack
![Page 60: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/60.jpg)
eBay MobileKarma.com Cellphone store leftoversOpen device labs
GET YOUR HANDS ON REAL DEVICES
http://flic.kr/p/7972f6
![Page 61: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/61.jpg)
OPENDEVICELAB.COM
![Page 62: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/62.jpg)
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:
![Page 63: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/63.jpg)
ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
![Page 64: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/64.jpg)
RESS: AN EVOLUTION OF RESPONSIVE DESIGN
http://slidesha.re/KtByzQ
![Page 65: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/65.jpg)
WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@joshuabixby @yoavweiss@scottjehl
just a sampling
![Page 66: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/66.jpg)
Doug GapinskiStrategistmStoner
@thedougco
SPECIAL THANKS TO...
![Page 67: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/67.jpg)
QUESTIONS?
![Page 68: Measuring Web Performance (HighEdWeb FL Edition)](https://reader036.fdocuments.us/reader036/viewer/2022062511/54c75a104a7959fa518b45f6/html5/thumbnails/68.jpg)
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsen
THANKS FOR LISTENING