Optimizing web performance (Fronteers edition)
67
Optimizing Web Performance Dave Olsen, @dmolsen West Virginia University http://flic.kr/p/7A8xxN
-
Upload
dave-olsen -
Category
Mobile
-
view
1.387 -
download
1
description
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 web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites 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 web performance of your web sites 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.
Transcript of Optimizing web performance (Fronteers edition)
OptimizingWeb PerformanceDave Olsen, @dmolsenWest Virginia University
http://flic.kr/p/7A8xxN
What I’ll Talk About
• Quick Intro About Why We Should Care About Web Perf
• Diagnosing Perf Problems
• Easy Web Performance Optimization Wins
• Tools to Help Test & Automate Perf Optimizations
• Setting Up a Device Lab
WHY SHOULD WE CARE ABOUT WEB PERFORMANCE?
http://flic.kr/p/4JY1Yr
brad’s iceberg
© Brad Frost
© Brad Frost
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
brad’s iceberg
© Brad Frost© Brad Frost
© Brad Frost
The average weight of a web page today:
Source: HTTP Archive
Images JavaScript
Flash
HTM
LC
SSOther
78%
1.8 MB
RWD sites whose small screen design weighs the same as the large screen design.Source: Podjarny, 2013
72%
Users expect your mobile site to load as quickly as your desktop site.
71%
Source: Gomez
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
Mobile first means performance first.
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
REVIEWING WHY WE SHOULD CARE
https://flic.kr/p/6DBSCi
DIAGNOSING WEB PERFORMANCE ISSUES
THE BASICS: PAGESPEED INSIGHTSdevelopers.google.com/speed/pagespeed/insights
NEXT STEPS: CHROME DEV TOOLSdev tools is more than just the elements view!
NEXT STEPS: CHROME DEV TOOLS COURSEudacity.com/course/ud884/
DEEP CUTS: WEBPAGETESTnote the big red F :(
WEBPAGETEST FEATURES
• Test real browsers from mult. locations• Modify connection speeds• Video capture• Content blocking• Script the session• Use with continuous integration• Collect tests over time• Free
REVIEW OF DIAGNOSTIC TOOLS
• Fast & easy? Pagespeed Insights• Local development? Chrome Dev Tools• Customization? WebPagetest
http://flic.kr/p/4zzKee
easy web performance optimization wins
EASY WEB OPTIMIZATION WINS
https://flic.kr/p/nYDzXn
Performance
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.
MOBILE OPTIMIZATION TENETS
1. Reduce requests2.Reduce asset size3. Speed-up page render
http://flic.kr/p/4zzKee
Best request is no request.
Source: Ilya Grigorik
- Ilya Grigorik, @ilyagrigorik
WEB PERF & SERVER-SIDE: EASY WINS
Compress HTML & CSS
If you’re using Apache make sure to use mod_deflate so text-based assets are compressed for transfer.
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. Try redbot.org to see if you’re caching.
Avoid AJAX requests
Think critically about how you use AJAX. You may be able to increase perceived performance by “caching” mark-up in script tags.
WEB PERFORMANCE & IMAGES: EASY WINS
Try to avoid images
When possible think about avoiding images. Implement with CSS or Canvas. Or use SVG or Progressive JPEGs.
Image compression
Choose appropriate image formats and compress within reason. Consider using CSS sprites.
Responsive images
Use srcset to serve regular images. You can use picture to serve art directed responsive images.
Avoid dark matter
display: none; hides content. It doesn’t stop content from loading. Properly set media queries.
WEB PERF & IMAGES: TOOLS
Grunt & Gulp Tools
imagemin, image-resize, spritesmith, svgmin
On the Web kraken.io, smushit.com, spriteme.org, imigix.com
CDNs Consider using CDNs to serve common JS libraries to help reduce RTT for requests.
WEB PERF & JAVASCRIPT: EASY WINS
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.
Use Touch or FastClick
While not directly related to page render, by making sure your links use a Touch event or FastClick rather than an onClick event user interactions will speed up by 300ms.
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.
WEB PERF & JAVASCRIPT: TOOLS
Grunt & Gulp Tools
uglify, concat, closure-compiler, google-cdn
On the Web microjs.com, developer.mozilla.org,developers.google.com
CONTENT BREAKDOWN
WEB PERF & 3rd PARTY CODE: EASY WINS
Beware the SPOF
Be careful regarding what 3rd-party code you use on your pages. Downtime for them can mean slow loading pages for you. Try using spof-o-matic in the Chrome Web Store to see how your page is affected.
Avoid SM widgets
Try using simple links to services rather than utilizing their JavaScript widgets. They’re performance hogs. Removing the widgets also increases user privacy. 2-click social widgets from Heise is a good solution.
TESTING SPOF
Worst request is one that blocks the parser.
Source: Ilya Grigorik
- Ilya Grigorik, @ilyagrigorik
Image source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
THE CRITICAL RENDERING PATH
LEARN TO LOVE THE WATERFALL
LEARN TO LOVE THE WATERFALL
onload
start render
domcontentloaded
CRITICAL RENDERING PATH: FILMSTRIP VIEW
CRITICAL RENDERING PATH: % COMPLETE
CRITICAL RENDERING PATH: EASY WINS
Defer loading of
JavaScript
Place script elements just above the body tag. Otherwise use HTML5’s script defer & async attributes to avoid blocking the parser. Can also insert script elements into the DOM using the onload event.
Inline Critical CSS
& Defer Rest
Place critical CSS directly within your document and load the rest of the CSS after onload with JavaScript. Use a service like Penthouse to find critical CSS.
Same DNS origin
Above the fold elements should be on the same hostname. Reduces DNS look-ups. Possible to try for a single request for all above the fold content?
The ultimate goal is a narrower, shorter waterfall. Also focus on
getting a fast initial render.
http://flic.kr/p/bMdzZ2
TEST THE SQUISHY
default styles vs. min-width vs. max-width
SCRIPTING & CUSTOM VIEWPORTS
SCRIPTING & CUSTOM VIEWPORTS
Google Analytics Site Speed
www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BASICS
REVIEWING TOP TIPS FOR EASY WINS
• Budget to give yourself and a client a performance goal
• Enable cache headers• Enable compression • Properly format or reduce images• Defer as much as you can • Use a task runner to build web
performance into your workflow
RESS can be a scalpel for your responsive designs.
REsponsive Design + Server Side Components
http
://fli
c.kr
/p/a
4VsP
v
RESS: AN EVOLUTION OF RESPONSIVE DESIGN
slidesha.re/KtByzQit is not an “evolution” but just another tool
Testing Tools
toolbox, tools
MORE WEB PERFORMANCE TOOLS
http://flic.kr/p/4BZsQJ
Google Analytics Site Speed
GOOGLE ANALYTICS’ SITE SPEED
PERFMAP (alpha)github.com/zeman/perfmap
REAL USER TESTINGyahoo.github.io/boomerang/doc/
MOD_PAGESPEED: PERF AUTOMATIONdevelopers.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
REMOTE DEBUGGING
charlesproxy.com
SLOWING THINGS DOWN
NLCCharles
USING CHARLES PROXYblog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
eBay MobileKarma.com Cellphone store leftoversOpen device labs
GET YOUR HANDS ON REAL DEVICES
http://flic.kr/p/7972f6
OPENDEVICELAB.COM
SUMMING IT ALL UP
• Open conversations using a performance budget
• First render speed is more important than pure resource size
• Integrate perf into your workflow• Test, evaluate, and monitor
WEB PERF TWEEPS TO FOLLOW
@ilyagrigorik
@andydavies
@souders
@patmeenan
@stoyanstefanov
@bbinto
@scottjehl
just a sampling
@tameverts
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsen
THANKS FOR LISTENING
QUESTIONS?
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsen
THANKS AGAIN FOR LISTENING
