0
Measuring Web
Performance
Dave Olsen, West Virginia University
HighEdWeb, October 6
@dmolsen, dmolsen.com
Dave Olsen
Professional Technologist
West Virginia University
About Me
@dmolsen
What I’ll Talk About
• Quick Intro About Why We
Should Care About Web Perf
• How to Add Performance to
Your Workflow
• Set...
Why ShouldYou Care
About Web Performance?
Part Une:
The average weight of a home page today.
Source: HTTP Archive
Images JavaScript
Flash
HTML
CSS
Other
77%
1.5 MB
“RWD makes your website
mobile friendly.”
The marketing of
responsive web design...
RWD sites whose
small screen design
weighs the same as the
large screen design.
Source: Podjarny
72%
The way in which CSS media
queries have been promoted for
mobile hides tough problems
and gives developers a false
promise...
Over Downloading
Download & Hide
Download & Shrink
Download & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High...
Current Dev Practices
+ Desktop First RWD
Web Performance Blues
RWD could also mean
responsible web design.
Start with the
small screen & its
constraints.
Mobile first means
performance first.
First Steps
Adding Web Performance
to Your Workflow
Part Deux:
Web Perf Optimization Tenets
Reduce requests. Reduce asset size.
Reduce page render time.
Introducing the Team
Because performance is a team effort.
Introducing the Team
“Dave”
full stack dev
“Adam”
front-end dev
Any resemblance to real persons, living or dead, is purely...
Parts of a Project
The Six Parts of a Project*
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6...
First Steps
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitor...
The New Project Should...
1. Look cool
2.Have pizzazz
3.Use brand colors
...
99. Be fast
98. Look good on an iPhone
First ...
Set a Performance Budget
First Steps
A budget is a guide, not a hard & fast limit.
Performance tweaks are compromises.
htt...
First Steps
Learn to Love the Inspector
http://bit.ly/15sWYsx
First Steps
Save Yourself a Headache &
Disable Your Cache When Testing
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
Design & Performance
The Six Parts ...
Design & Performance
Things to Keep in Mind...
Images are the devil. Consider using
CSS, sprites, symbol fonts, & SVG.
dis...
Responsive Images
Most solutions are silly & verbose.
Focus on properly formatting
images. Lazy load them & don’t
worry ab...
Design & Performance
Explaining the Network Panel:
The Waterfall
Design & Performance
Explaining the Network Panel:
Resource Size
transferred size
real size
re-order
Design & Performance
latency + download
latency
re-order
Explaining the Network Panel:
Latency
Design & Performance
domcontentloaded
onload
Explaining the Network Panel:
Events
Design & Performance
save HAR file locally
Explaining the Network Panel:
Saving Files for Comparison
Best request is no request.
Worst request is one that
blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik
@ilyagrigor...
Corollary: The next best request
is the one not parsed.
Source: My brain
- Me
@dmolsen
“
”
Design & Performance
Design & Performance
Your goal when using the Network
Panel is to shorten & compress
the waterfall by focusing on the
crit...
Design & Performance
Explaining the Profiles Panel:
CSS Selectors
Design & Performance
Explaining the Profiles Panel:
CSS Selectors
CodeKit
CodeKit:Web Perf in Your Workflow
http://incident57.com/codekit/
Design & Performance
Programming & Performance
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deploy...
Programming & Performance
Things to Keep in Mind...
JavaScript libraries are devils. Consider
using microjs.com or vanilla...
Programming & Performance
Explaining the Timeline Panel
Test & Optimize Performance with jsPerf
http://jsperf.com
Programming & Performance
Responsive Design + Server-side
http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design
http://www...
Testing
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitoring
PageSpeed Insights Extension
https://developers.google.com/speed/pagespeed/insights
Testing
Remote Debugging
Testing
Google Analytics Site Speed
http://www.httpwatch.com
IE & Firefox Performance Issues
Testing
Testing
WebPagetest
http://www.webpagetest.org
Google Analytics Site Speed
http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics
WebPagetest - Beyond the ...
Google Analytics Site Speed
Customizing WebPagetest:
Capturing Events After onLoad
Testing
Customizing WebPagetest:
Blackholes for Requests
Testing
Google Analytics Site Speed
Customizing WebPagetest:
Scripting & Custom Viewports
Testing
Customizing WebPageTest:
Video Comparison
Testing
Customizing WebPageTest:
Video Comparison - Small Viewport
Testing
charlesproxy.com
SLOWING THINGS DOWN
ThrottleCharles
Testing
Using Charles Proxy
http://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
Testing
Testing
BrowserStack
http://browserstack.com
Deployment
The Six Parts of a Project
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitori...
Deployment
Finally getting to “traditional”
performance techniques...
Performance can’t simply be
tacked onto the end of a...
Concatenate files within reason.
Minify files as appropriate.
Make sure the server supports file
compression & cache heade...
mod_pagespeed Automates a Lot
http://developers.google.com/speed/pagespeed/mod
Deployment
The Six Parts of a Project
Monitoring
1. First Steps
2.Design & Production
3.Programming
4.Testing
5.Deployment
6.Monitori...
Google Analytics’ Site Speed
Monitoring
PageSpeed Insights Extension
https://developers.google.com/speed/pagespeed/insights
Monitoring
Setting Up a Device Lab
Part Trois:
eBay
MobileKarma.com
Cellphone store leftovers
Open 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-...
WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@tameverts @yoavweiss@scottjehl
ju...
Questions?
Dave Olsen
Professional Technologist
West Virginia University
@dmolsen
Thanks for Listening
Illustrations by Graham Curry
Upcoming SlideShare
Loading in...5
×

Measuring Web Performance - HighEdWeb Edition

3,756

Published on

Today, a Web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our websites look good across that spectrum of devices we may forget that we need to make sure that our websites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet. In this session, we’ll look at the tools that can help you understand, measure and improve the performance of your websites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply. This presentation builds upon Dave Olsen’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

Published in: Technology, Design
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,756
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
46
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Transcript of "Measuring Web Performance - HighEdWeb Edition"

  1. 1. Measuring Web Performance Dave Olsen, West Virginia University HighEdWeb, October 6 @dmolsen, dmolsen.com
  2. 2. Dave Olsen Professional Technologist West Virginia University About Me @dmolsen
  3. 3. 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
  4. 4. Why ShouldYou Care About Web Performance? Part Une:
  5. 5. The average weight of a home page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.5 MB
  6. 6. “RWD makes your website mobile friendly.” The marketing of responsive web design...
  7. 7. RWD sites whose small screen design weighs the same as the large screen design. Source: Podjarny 72%
  8. 8. 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
  9. 9. Over Downloading Download & Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
  10. 10. Current Dev Practices + Desktop First RWD Web Performance Blues
  11. 11. RWD could also mean responsible web design. Start with the small screen & its constraints.
  12. 12. Mobile first means performance first. First Steps
  13. 13. Adding Web Performance to Your Workflow Part Deux:
  14. 14. Web Perf Optimization Tenets Reduce requests. Reduce asset size. Reduce page render time.
  15. 15. Introducing the Team Because performance is a team effort.
  16. 16. Introducing the Team “Dave” full stack dev “Adam” front-end dev Any resemblance to real persons, living or dead, is purely coincidental. Serious.
  17. 17. Parts of a Project The Six Parts of a Project* 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring * - For the purposes of this talk.
  18. 18. First Steps The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  19. 19. The New Project Should... 1. Look cool 2.Have pizzazz 3.Use brand colors ... 99. Be fast 98. Look good on an iPhone First Steps
  20. 20. 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/
  21. 21. First Steps Learn to Love the Inspector http://bit.ly/15sWYsx
  22. 22. First Steps Save Yourself a Headache & Disable Your Cache When Testing
  23. 23. 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring Design & Performance The Six Parts of a Project
  24. 24. 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.
  25. 25. 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 List http://addyosmani.com/blog/image- optimization-tools/
  26. 26. Design & Performance Explaining the Network Panel: The Waterfall
  27. 27. Design & Performance Explaining the Network Panel: Resource Size transferred size real size re-order
  28. 28. Design & Performance latency + download latency re-order Explaining the Network Panel: Latency
  29. 29. Design & Performance domcontentloaded onload Explaining the Network Panel: Events
  30. 30. Design & Performance save HAR file locally Explaining the Network Panel: Saving Files for Comparison
  31. 31. Best request is no request. Worst request is one that blocks the parser. Source: Ilya Grigorik - Ilya Grigorik @ilyagrigorik “ ” Design & Performance
  32. 32. Corollary: The next best request is the one not parsed. Source: My brain - Me @dmolsen “ ” Design & Performance
  33. 33. 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.
  34. 34. Design & Performance Explaining the Profiles Panel: CSS Selectors
  35. 35. Design & Performance Explaining the Profiles Panel: CSS Selectors
  36. 36. CodeKit CodeKit:Web Perf in Your Workflow http://incident57.com/codekit/ Design & Performance
  37. 37. Programming & Performance The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  38. 38. 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.
  39. 39. Programming & Performance Explaining the Timeline Panel
  40. 40. Test & Optimize Performance with jsPerf http://jsperf.com Programming & Performance
  41. 41. Responsive Design + Server-side http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design
  42. 42. Testing The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  43. 43. PageSpeed Insights Extension https://developers.google.com/speed/pagespeed/insights Testing
  44. 44. Remote Debugging Testing
  45. 45. Google Analytics Site Speed http://www.httpwatch.com IE & Firefox Performance Issues Testing
  46. 46. Testing WebPagetest http://www.webpagetest.org
  47. 47. Google Analytics Site Speed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - Beyond the Basics Testing
  48. 48. Google Analytics Site Speed Customizing WebPagetest: Capturing Events After onLoad Testing
  49. 49. Customizing WebPagetest: Blackholes for Requests Testing
  50. 50. Google Analytics Site Speed Customizing WebPagetest: Scripting & Custom Viewports Testing
  51. 51. Customizing WebPageTest: Video Comparison Testing
  52. 52. Customizing WebPageTest: Video Comparison - Small Viewport Testing
  53. 53. charlesproxy.com SLOWING THINGS DOWN ThrottleCharles Testing
  54. 54. Using Charles Proxy http://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/ Testing
  55. 55. Testing BrowserStack http://browserstack.com
  56. 56. Deployment The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  57. 57. Deployment Finally getting to “traditional” performance techniques... Performance can’t simply be tacked onto the end of a project.
  58. 58. Concatenate files within reason. Minify files as appropriate. Make sure the server supports file compression & cache headers. Deployment Things to Keep in Mind...
  59. 59. mod_pagespeed Automates a Lot http://developers.google.com/speed/pagespeed/mod Deployment
  60. 60. The Six Parts of a Project Monitoring 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  61. 61. Google Analytics’ Site Speed Monitoring
  62. 62. PageSpeed Insights Extension https://developers.google.com/speed/pagespeed/insights Monitoring
  63. 63. Setting Up a Device Lab Part Trois:
  64. 64. eBay MobileKarma.com Cellphone store leftovers Open device labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
  65. 65. OpenDeviceLab.com
  66. 66. 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/ Retina Samsung Fascinate + Google Nexus One + $537 Example:
  67. 67. WEB PERF TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @tameverts @yoavweiss@scottjehl just a sampling...
  68. 68. Questions?
  69. 69. Dave Olsen Professional Technologist West Virginia University @dmolsen Thanks for Listening Illustrations by Graham Curry
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×