web performance & you - highedweb arkansas version
DESCRIPTION
Today, a web page can be delivered to a desktop computer, a television, or a handheld device like a tablet or a phone. While a technique like responsive design helps ensure that our web sites look good across that spectrum of screen sizes we may forget our web sites should also be able to perform equally well across that same spectrum. While more and more of our users are shifting their Internet usage to these more varied platforms and connection speeds our development practices might not be keeping up.In this session we’ll review why optimizing web performance should be an important step in the development of responsive websites. We’ll look at the tools that can help you understand and measure the performance of those sites as well as discuss front-end and server-side techniques that can be used to help you improve their performance. Finally, since the best way to test your site is to have real devices in hand, we’ll share “lessons learned” so you can set-up your own device lab similar to what we have at West Virginia University.This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”TRANSCRIPT
![Page 1: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/1.jpg)
Web Performance & YouDave Olsen, West Virginia UniversityHighEdWeb Arkansas, July 26
@dmolsen, dmolsen.com
![Page 2: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/2.jpg)
slideshare.net/dmolsenwvu
This presentation will be available later today at:
![Page 3: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/3.jpg)
Dave OlsenProfessional TechnologistWest Virginia University
About Moi
@dmolsen
![Page 4: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/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
http://the-mobile-book.com
![Page 5: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/5.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 6: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/6.jpg)
Why Should You Care About Web Performance?
Part Une:
![Page 7: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/7.jpg)
The average weight of a web page today.
Source: HTTP Archive
Images JavaScript
Flash
HTM
LC
SSOther
77%
1.3 MB
![Page 8: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/8.jpg)
RWD sites whose small screen design weighs the same as the large screen design.
Source: Podjarny
72%
![Page 9: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/9.jpg)
Users expect your mobile site to load as quickly as your desktop site.
71%
Source: Gomez
![Page 10: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/10.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 11: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/11.jpg)
brad’s iceberg
© Brad Frost
![Page 12: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/12.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 13: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/13.jpg)
brad’s iceberg
© Brad Frost© Brad Frost
![Page 14: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/14.jpg)
RWD could also mean responsible web design.
![Page 15: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/15.jpg)
Over Downloading
Download & HideDownload & ShrinkDownload & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High LatencyVariable Bandwidth
Packet Loss
![Page 16: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/16.jpg)
Adding Web Performance to Your Workflow
Part Deux:
![Page 17: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/17.jpg)
Introducing the TeamBecause performance is a team effort.
![Page 18: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/18.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 19: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/19.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 20: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/20.jpg)
First Steps
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
![Page 21: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/21.jpg)
The New Project Should...1. Look cool2. Have pizzazz3. Use brand colors ...
99. Be fast98. Look good on an iPhone
First Steps
![Page 22: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/22.jpg)
Mobile first means performance first.
First Steps
![Page 23: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/23.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 24: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/24.jpg)
First Steps
Best request is no request. Worst request is one that
blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik @ilyagrigorik
“
”
![Page 25: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/25.jpg)
First Steps
Corollary: The next best request is the one not parsed.
Source: My brain
- Me @dmolsen
“”
![Page 26: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/26.jpg)
Web Performance AssumptionsFaster is better. Smaller is better.
First Steps
![Page 27: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/27.jpg)
Web Perf Optimization Tenets Reduce requests. Reduce asset size.
Reduce page render time.
First Steps
![Page 28: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/28.jpg)
First Steps
Learn to Love the Inspectorhttp://bit.ly/15sWYsx
![Page 29: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/29.jpg)
First Steps
Save Yourself a Headache &Disable Your Cache When Testing
![Page 30: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/30.jpg)
1. First Steps2.Design & Production3. Programming4.Testing5. Deployment6.Monitoring
Design & Performance
The Six Parts of a Project
![Page 31: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/31.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 32: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/32.jpg)
Design & Performance
Explaining the Network Panel:The Waterfall
![Page 33: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/33.jpg)
Design & Performance
Explaining the Network Panel:Resource Size
transferred size
real size
re-order
![Page 34: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/34.jpg)
Design & Performance
latency + download
latency
re-order
Explaining the Network Panel:Latency
![Page 35: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/35.jpg)
Design & Performance
domcontentloaded
onload
Explaining the Network Panel:Events
![Page 36: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/36.jpg)
Design & Performance
Your goal when using the Network Panel is to shorten & compress
the waterfall.
Remember, test the squishy too.
![Page 37: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/37.jpg)
Design & Performance
save HAR file locally
Explaining the Network Panel:Saving Files for Comparison
![Page 38: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/38.jpg)
Design & Performance
Explaining the Profiles Panel:CSS Selectors
![Page 39: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/39.jpg)
Design & Performance
Explaining the Profiles Panel:CSS Selectors
![Page 40: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/40.jpg)
CodeKit
CodeKit: Web Perf in Your Workflowhttp://incident57.com/codekit/
Design & Performance
![Page 41: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/41.jpg)
Responsive Images
Most solutions are silly & verbose.
Focus on properly formatting images. Lazy load them & don’t
worry about “high DPI.”
![Page 42: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/42.jpg)
Programming & Performance
The Six Parts of a Project1. First Steps2. Design & Production3.Programming4.Testing5. Deployment6.Monitoring
![Page 43: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/43.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 44: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/44.jpg)
Programming & Performance
Explaining the Timeline Panel
![Page 45: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/45.jpg)
Test & Optimize Performance with jsPerfhttp://jsperf.com
Programming & Performance
![Page 46: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/46.jpg)
Testing
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
![Page 47: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/47.jpg)
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insights
Testing
![Page 48: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/48.jpg)
Remote Debugging
Testing
![Page 49: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/49.jpg)
Google Analytics Site Speed
http://www.httpwatch.comIE & Firefox Performance Issues
Testing
![Page 51: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/51.jpg)
Google Analytics Site Speed
http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - Beyond the Basics
Testing
![Page 52: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/52.jpg)
Google Analytics Site Speed
Customizing WebPagetest:Capturing Events After onLoad
Testing
![Page 53: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/53.jpg)
Customizing WebPagetest:Blackholes for Requests
Testing
![Page 54: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/54.jpg)
Google Analytics Site Speed
Customizing WebPagetest:Scripting & Custom Viewports
Testing
![Page 55: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/55.jpg)
Customizing WebPageTest:Video Comparison
Testing
![Page 56: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/56.jpg)
Customizing WebPageTest:Video Comparison - Small Viewport
Testing
![Page 57: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/57.jpg)
charlesproxy.com
SLOWING THINGS DOWN
ThrottleCharles
Testing
![Page 58: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/58.jpg)
Using Charles Proxyhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
Testing
![Page 60: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/60.jpg)
Deployment
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5.Deployment6.Monitoring
![Page 61: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/61.jpg)
Deployment
Finally getting to “traditional” performance techniques...
Performance can’t simply be tacked onto the end of a project.
![Page 62: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/62.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 63: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/63.jpg)
mod_pagespeed Automates a Lothttp://developers.google.com/speed/pagespeed/mod
Deployment
![Page 64: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/64.jpg)
The Six Parts of a Project
Monitoring
1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
![Page 65: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/65.jpg)
Google Analytics’ Site Speed
Monitoring
![Page 66: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/66.jpg)
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insights
Monitoring
![Page 67: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/67.jpg)
Setting Up a Device LabPart Trois:
![Page 68: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/68.jpg)
eBay MobileKarma.com Cellphone store leftoversOpen device labs
GET YOUR HANDS ON REAL DEVICES
http://flic.kr/p/7972f6
![Page 69: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/69.jpg)
OpenDeviceLab.com
![Page 70: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/70.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 71: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/71.jpg)
WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@tameverts @yoavweiss@scottjehl
just a sampling...
![Page 72: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/72.jpg)
Questions?
![Page 73: Web Performance & You - HighEdWeb Arkansas Version](https://reader033.vdocuments.site/reader033/viewer/2022052820/54c75a064a795909428b4632/html5/thumbnails/73.jpg)
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsen
Thanks for Listening
Illustrations by Graham Curry