Post on 08-May-2015
description
Performance Optimization for the Mobile Web
Tuesday, October 23, 2012Boston, MA
Agenda
● Brief Overview of the Mobile Web
● Testing, Measuring and Debugging
● Mobile Web Performance Optimization Areas
● Future of the Mobile Web
Mobile Web is Still...
SLOW!
Mobile Web Users...
ARE FED UP!
Mobile RAGE is UP!!!Mobile Rage: How People React to Slow Load Times
Curse at their phone
Scream at their phones
Throw their phones
Behave less or more normally
23%
4%
11%62%
Why?
BECAUSE OF US!
We are doing it WRONG!
Mobile web is slow because...
It's Complicated...
Mobile web varies by:
Mobile web varies by:
Mobile web varies by:
Mobile web varies by:
:(
:)
;)
It's all about...
SPEED
Testing, Measuring & Debugging
Ways to Test, Measure & Debug:
REAL DEVICES
REMOTE LABS
REMOTE BROWSER TOOLS
EMULATORS
EMULATORS
■ Good for first testing
■ Many different types --over 150+ (most are free)
■ www.mobilexweb.com/emulators
■ Can use a resized desktop browser
■ Emulators are not reliable
REMOTE LABS
■ BrowserStack.com
■ DeviceAnywhere.com
■ PerfectoMobile.com
■ Remove test lab (samsung) - free
■ Remote device access (nokia) - free
REMOTE BROWSER TOOLS
■ Opera Mobile with DragonFly
■ Blackberry Browser for Playbook
■ Mobile Chrome Developer Tools (via usb)
■ Mobile FireFox Developer Tools (via usb)
■ Very few remote browser tools available
REAL DEVICES
■ Proxies on wifi: charles proxy, fiddler
■ Remote JavaScript tools: weinre, adobe shadow
■ Proxies on the device: mobitest
■ hybrids / pseudo-browsers: mobitest
■ JavaScript utility libs: jconsole, watchr
■ network sniffers: pcapperf
■ server-side sniffers
Areas of Optimization & Mobile Web's
Performance Happy Friend:
Load Mobile Pages Faster
● Place stylesheets at top & scripts at the bottom
● JavaScript blocks parallel downloading (increasing load time)
Load Mobile Pages Faster (cont'd)
● Use multiple domains to overcome parallel download limitations
Load Mobile Pages Faster (cont'd)
● Minify JavaScript & CSS
● Defer loading of non-essential JavaScript
● GZIP components
● Reduce http requests (10x's slower than desktop)
● Deliver the mobile site directly --avoid redirects
● Use Local Storage & Application Cache (HTML5)
USE: Mobile HTML5
● Use simple, semantic mark-up:
○ Complex DOM == WRONG
○ Use Doctype: <!DOCTYPE HTML>
○ Do not use insane attributes <script type?>
○ Nested elements slow down rendering, animation & event handling
○ Avoid devitis: use article, section, nav...etc...
○ Leverage HTML5/CSS3 rules & tags where possible
○ HTML5 & CSS3 degrade gracefully --don't worry about compatibility
● Make your site mobile friendly:
○ Use mobile meta tags & viewport
○ Use responsive design approach
USE New Markup & Semantics
<details> / <summary>
Information
If your browser supports this element, it should allow you to expand and collapse these details.
<details open="open"> <summary>Information</summary> <p>If your browser supports this element, it should allow you to expand and collapse these details.</p></details>
USE New Markup & Semantics
<mark>
Semantically highlight parts of your text:
Lorem ipsum dolor, <mark>consectetur</mark> adipiscing...
USE New Markup & Semantics
<output>
<form oninput="result.value=a.valueAsNumber + b.valueAsNumber">0<input type="range" name="b">100 +<input type="number" name="a"> =<output name="result"></output></form>
USE: CSS & Image Techniques
● Use data URI's (inline images)
HTML
CSS
USE: CSS & Image Techniques
● Text paths using the SVG DOM
USE: CSS & Image Techniques
● Use inline SVG for charts and shape-based images
USE: CSS & Image Techniques (cont'd)
● Use online image optimizers to optimize images
● Use PNG over GIF
● Use CSS for animations & images whenever possible
● Use image transforms that force hardware graphic
acceleration and smoother rendering:
THE FUTURE OF MOBILEMozilla, Google, and Opera are working very hard toward making the web competitive with mobile native frameworks!
Promising Features Include:● WebRTC● WebAudio● WebVideo● PeerConnection● emscripten & porting w/ new JS features
http://AreWeMobileYet.comhttps://wiki.mozilla.org/WebAPIhttp://webrtc.org
What We've Covered:
● Brief Overview of the Mobile Web
● Testing, Measuring and Debugging
● Mobile Web Performance Optimization Areas
● Future of the Mobile Web
LOVE TO EVOLVE
LEARN
○ Responsive Design
○ Progressive Enhancement
○ Mobile First Design Approach
○ Latest HTML5, CSS3, and JS
○ JS Optimization Patterns
○ SVG, Canvas, and webGL
○ New Web API's
FORGET
○ Static Designs
○ Desktop Web Frameworks
(okay, not always)
○ Unlimited Power
○ Pixels
○ Screen Consistency
○ Always Connected
TAKE WHAT YOU'VE LEARNED AND CREATE LOTS OF COOL MOBILE & POWERFUL MOBILE WEBSITES
REFERENCE LINKS1. http://mobilehtml5.org - HTML5 Compatibility on Mobile & Tablet Browsers
2. http://caniuse.com - Campatibility tables for support of HTML5, CSS4, SVG, and more in
desktop & mobile browsers
3. http://www.onbile.com/info/the-most-popular-mobile-browsers
4. http://thenounproject.com/