Embed Size (px)
DESCRIPTION
In this presentation Fresh Tilled Soil takes a discerning look at how the mobile web has been transformed to date, and where it will go from here. We'll talk about the latest tools for testing and debugging websites, newest HTML5/CSS3/JavaScript technologies, and the best strategies for mobile website performance & optimization. Finally, we’ll reveal some of the exciting, not yet released web API’s that will bring the mobile-web user experience to a whole new level!
Citation preview
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/
