Measuring Web Performance Dave Olsen, West Virginia University HighEdWeb, October 6 @dmolsen, dmolsen.com
Measuring Web Performance - HighEdWeb Edition
Jan 27, 2015
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.”
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Measuring Web PerformanceDave Olsen, West Virginia UniversityHighEdWeb, October 6
@dmolsen, dmolsen.com
Dave OlsenProfessional TechnologistWest 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
• Setting Up a Device Lab
Why Should You Care About Web Performance?
Part Une:
The average weight of a home page today.
Source: HTTP Archive
Images JavaScript
Flash
HTM
LC
SSOther
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 of a simple solution for designing for small screens.
Source: Jason Grigsby on Speakerdeck
“
” - Jason Grigsby @grigs
Over Downloading
Download & HideDownload & ShrinkDownload & Ignore
PRIMARY PERFORMANCE ISSUES FOR RWD
Poor Networks
High LatencyVariable Bandwidth
Packet Loss
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 TeamBecause 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 coincidental. Serious.
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.
First Steps
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
The New Project Should...1. Look cool2. Have pizzazz3. Use brand colors ...
99. Be fast98. Look good on an iPhone
First Steps
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/
First Steps
Learn to Love the Inspectorhttp://bit.ly/15sWYsx
First Steps
Save Yourself a Headache &Disable Your Cache When Testing
1. First Steps2.Design & Production3. Programming4.Testing5. Deployment6.Monitoring
Design & Performance
The Six Parts of a Project
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.
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/
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 @ilyagrigorik
“
”
Design & Performance
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
critical path.
Focus on delivering content that’s above the fold.
Remember, test the squishy too.
Design & Performance
Explaining the Profiles Panel:CSS Selectors
Design & Performance
Explaining the Profiles Panel:CSS Selectors
CodeKit
CodeKit: Web Perf in Your Workflowhttp://incident57.com/codekit/
Design & Performance
Programming & Performance
The Six Parts of a Project1. First Steps2. Design & Production3.Programming4.Testing5. Deployment6.Monitoring
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.
Programming & Performance
Explaining the Timeline Panel
Test & Optimize Performance with jsPerfhttp://jsperf.com
Programming & Performance
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
Testing
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insights
Testing
Remote Debugging
Testing
Google Analytics Site Speed
http://www.httpwatch.comIE & Firefox Performance Issues
Testing
Google Analytics Site Speed
http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - Beyond the Basics
Testing
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 Proxyhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
Testing
Deployment
The Six Parts of a Project1. First Steps2. Design & Production3. Programming4.Testing5.Deployment6.Monitoring
Deployment
Finally getting to “traditional” performance techniques...
Performance can’t simply be tacked onto the end of a project.
Concatenate files within reason.
Minify files as appropriate.
Make sure the server supports file compression & cache headers.
Deployment
Things to Keep in Mind...
mod_pagespeed Automates a Lothttp://developers.google.com/speed/pagespeed/mod
Deployment
The Six Parts of a Project
Monitoring
1. First Steps2. Design & Production3. Programming4.Testing5. Deployment6.Monitoring
Google Analytics’ Site Speed
Monitoring
PageSpeed Insights Extensionhttps://developers.google.com/speed/pagespeed/insights
Monitoring
Setting Up a Device LabPart Trois:
eBay MobileKarma.com Cellphone store leftoversOpen 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-end Android, a tablet, Blackberry,
Windows Phone 7
HOW TO DECIDE WHICH TO GET
iPod Touch w/ RetinaSamsung Fascinate +Google Nexus One +
$537
Example:
WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders @patmeenan
@stoyanstefanov
@tameverts @yoavweiss@scottjehl
just a sampling...
Questions?
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsen
Thanks for Listening
Illustrations by Graham Curry
Related Documents
