Measuring Web Performance - HighEdWeb Edition
-
Upload
dave-olsen -
Category
Technology
-
view
106 -
download
0
description
Transcript of Measuring Web Performance - HighEdWeb Edition
![Page 1: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/1.jpg)
Measuring Web PerformanceDave Olsen, West Virginia UniversityHighEdWeb, October 6
@dmolsen, dmolsen.com
![Page 2: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/2.jpg)
Dave OlsenProfessional TechnologistWest Virginia University
About Me
@dmolsen
![Page 3: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/3.jpg)
What I’ll Talk About
• Quick Intro About Why We Should Care About Web Perf
• How to Add Performance to Your Workflow
• Setting Up a Device Lab
![Page 4: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/4.jpg)
Why Should You Care About Web Performance?
Part Une:
![Page 5: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/5.jpg)
The average weight of a home page today.
Source: HTTP Archive
Images JavaScript
Flash
HTM
LC
SSOther
77%
1.5 MB
![Page 6: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/6.jpg)
“RWD makes your website mobile friendly.”
The marketing of responsive web design...
![Page 7: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/7.jpg)
RWD sites whose small screen design weighs the same as the large screen design.
Source: Podjarny
72%
![Page 8: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/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 Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/9.jpg)
Over Downloading
Download & HideDownload & ShrinkDownload & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High LatencyVariable Bandwidth
Packet Loss
![Page 10: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/10.jpg)
Current Dev Practices + Desktop First RWD
Web Performance Blues
![Page 11: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/11.jpg)
RWD could also mean responsible web design.
Start with the small screen & its
constraints.
![Page 12: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/12.jpg)
Mobile first means performance first.
First Steps
![Page 13: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/13.jpg)
Adding Web Performance to Your Workflow
Part Deux:
![Page 14: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/14.jpg)
Web Perf Optimization Tenets Reduce requests. Reduce asset size.
Reduce page render time.
![Page 15: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/15.jpg)
Introducing the TeamBecause performance is a team effort.
![Page 16: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/16.jpg)
Introducing the Team
“Dave”full stack dev
“Adam”front-end dev
Any resemblance to real persons, living or dead, is purely coincidental. Serious.
![Page 17: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/17.jpg)
Parts of a Project
The Six Parts of a Project*1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
* - For the purposes of this talk.
![Page 18: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/18.jpg)
First Steps
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
![Page 19: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/19.jpg)
The New Project Should...1. Look cool2. Have pizzazz3. Use brand colors ...
99. Be fast98. Look good on an iPhone
First Steps
![Page 20: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/20.jpg)
Set a Performance Budget
First Steps
A budget is a guide, not a hard & fast limit. Performance tweaks are compromises.
http://timkadlec.com/2013/01/setting-a-performance-budget/
![Page 21: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/21.jpg)
First Steps
Learn to Love the Inspectorhttp://bit.ly/15sWYsx
![Page 22: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/22.jpg)
First Steps
Save Yourself a Headache &Disable Your Cache When Testing
![Page 23: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/23.jpg)
1. First Steps2.Design & Production3. Programming4.Testing5. Deployment6.Monitoring
Design & Performance
The Six Parts of a Project
![Page 24: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/24.jpg)
Design & Performance
Things to Keep in Mind...
Images are the devil. Consider using CSS, sprites, symbol fonts, & SVG.
display: none; is definitely the devil.
Lots of things are the devil. Just understand the trade-offs when using
social widgets, web fonts & CSS.The “devil” talk is tongue-in-cheek. Serious.
![Page 25: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/25.jpg)
Responsive Images
Most solutions are silly & verbose.
Focus on properly formatting images. Lazy load them & don’t
worry about “high DPI.”
Addy Osmani’s Tool Listhttp://addyosmani.com/blog/image-
optimization-tools/
![Page 26: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/26.jpg)
Design & Performance
Explaining the Network Panel:The Waterfall
![Page 27: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/27.jpg)
Design & Performance
Explaining the Network Panel:Resource Size
transferred size
real size
re-order
![Page 28: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/28.jpg)
Design & Performance
latency + download
latency
re-order
Explaining the Network Panel:Latency
![Page 29: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/29.jpg)
Design & Performance
domcontentloaded
onload
Explaining the Network Panel:Events
![Page 30: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/30.jpg)
Design & Performance
save HAR file locally
Explaining the Network Panel:Saving Files for Comparison
![Page 31: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/31.jpg)
Best request is no request. Worst request is one that
blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik @ilyagrigorik
“
”
Design & Performance
![Page 32: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/32.jpg)
Corollary: The next best request is the one not parsed.
Source: My brain
- Me @dmolsen
“”
Design & Performance
![Page 33: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/33.jpg)
Design & Performance
Your goal when using the Network Panel is to shorten & compress the waterfall by focusing on the
critical path.
Focus on delivering content that’s above the fold.
Remember, test the squishy too.
![Page 34: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/34.jpg)
Design & Performance
Explaining the Profiles Panel:CSS Selectors
![Page 35: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/35.jpg)
Design & Performance
Explaining the Profiles Panel:CSS Selectors
![Page 36: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/36.jpg)
CodeKit
CodeKit: Web Perf in Your Workflowhttp://incident57.com/codekit/
Design & Performance
![Page 37: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/37.jpg)
Programming & Performance
The Six Parts of a Project1. First Steps2. Design & Production3.Programming4.Testing5. Deployment6.Monitoring
![Page 38: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/38.jpg)
Programming & Performance
Things to Keep in Mind...
JavaScript libraries are devils. Consider using microjs.com or vanilla JS.
Defer loading of JavaScript. Use onTouch events when appropriate.
Reflow & repaints are the devil.
The “devil” talk is tongue-in-cheek. Serious.
![Page 39: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/39.jpg)
Programming & Performance
Explaining the Timeline Panel
![Page 40: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/40.jpg)
Test & Optimize Performance with jsPerfhttp://jsperf.com
Programming & Performance
![Page 41: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/41.jpg)
Responsive Design + Server-sidehttp://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design
http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design
![Page 42: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/42.jpg)
Testing
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
![Page 43: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/43.jpg)
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insights
Testing
![Page 44: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/44.jpg)
Remote Debugging
Testing
![Page 45: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/45.jpg)
Google Analytics Site Speed
http://www.httpwatch.comIE & Firefox Performance Issues
Testing
![Page 47: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/47.jpg)
Google Analytics Site Speed
http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - Beyond the Basics
Testing
![Page 48: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/48.jpg)
Google Analytics Site Speed
Customizing WebPagetest:Capturing Events After onLoad
Testing
![Page 49: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/49.jpg)
Customizing WebPagetest:Blackholes for Requests
Testing
![Page 50: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/50.jpg)
Google Analytics Site Speed
Customizing WebPagetest:Scripting & Custom Viewports
Testing
![Page 51: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/51.jpg)
Customizing WebPageTest:Video Comparison
Testing
![Page 52: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/52.jpg)
Customizing WebPageTest:Video Comparison - Small Viewport
Testing
![Page 53: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/53.jpg)
charlesproxy.com
SLOWING THINGS DOWN
ThrottleCharles
Testing
![Page 54: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/54.jpg)
Using Charles Proxyhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
Testing
![Page 56: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/56.jpg)
Deployment
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5.Deployment6.Monitoring
![Page 57: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/57.jpg)
Deployment
Finally getting to “traditional” performance techniques...
Performance can’t simply be tacked onto the end of a project.
![Page 58: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/58.jpg)
Concatenate files within reason.
Minify files as appropriate.
Make sure the server supports file compression & cache headers.
Deployment
Things to Keep in Mind...
![Page 59: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/59.jpg)
mod_pagespeed Automates a Lothttp://developers.google.com/speed/pagespeed/mod
Deployment
![Page 60: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/60.jpg)
The Six Parts of a Project
Monitoring
1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
![Page 61: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/61.jpg)
Google Analytics’ Site Speed
Monitoring
![Page 62: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/62.jpg)
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insights
Monitoring
![Page 63: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/63.jpg)
Setting Up a Device LabPart Trois:
![Page 64: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/64.jpg)
eBay MobileKarma.com Cellphone store leftoversOpen device labs
GET YOUR HANDS ON REAL DEVICES
http://flic.kr/p/7972f6
![Page 65: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/65.jpg)
OpenDeviceLab.com
![Page 66: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/66.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 67: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/67.jpg)
WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@tameverts @yoavweiss@scottjehl
just a sampling...
![Page 68: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/68.jpg)
Questions?
![Page 69: Measuring Web Performance - HighEdWeb Edition](https://reader033.fdocuments.us/reader033/viewer/2022052504/54c75a064a795966738b4569/html5/thumbnails/69.jpg)
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsen
Thanks for Listening
Illustrations by Graham Curry