• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Performance Optimization for Mobile Web | Fresh Tilled Soil
 

Performance Optimization for Mobile Web | Fresh Tilled Soil

on

  • 671 views

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 ...

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!

Statistics

Views

Total Views
671
Views on SlideShare
616
Embed Views
55

Actions

Likes
0
Downloads
11
Comments
0

2 Embeds 55

http://www.freshtilledsoil.com 52
http://www.verious.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Performance Optimization for Mobile Web | Fresh Tilled Soil Performance Optimization for Mobile Web | Fresh Tilled Soil Presentation Transcript

    • Performance Optimization for the Mobile Web Tuesday, October 23, 2012 Boston, 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 23% Curse at their phone Scream at their phones Throw their phones Behave less or more normally 11%62% 4%
    • Why?
    • BECAUSE OF US!
    • Mobile web is slow because...We are doing it WRONG!
    • Its Complicated...
    • Mobile web varies by:
    • Mobile web varies by:
    • Mobile web varies by:
    • Mobile web varies by:
    • :(
    • :)
    • ;)
    • Its all about... SPEED
    • Testing, Measuring & Debugging
    • Ways to Test, Measure & Debug: REAL DEVICES REMOTE EMULATORSBROWSER TOOLS REMOTE LABS
    • ■ 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 EMULATORS
    • ■ BrowserStack.com ■ DeviceAnywhere.com ■ PerfectoMobile.comREMOTE LABS ■ Remove test lab (samsung) - free ■ Remote device access (nokia) - free
    • ■ 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 REMOTEBROWSER TOOLS
    • ■ 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 REAL DEVICES■ network sniffers: pcapperf■ server-side sniffers
    • Areas of Optimization & Mobile Webs 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 (contd)● Use multiple domains to overcome parallel download limitations
    • Load Mobile Pages Faster (contd)● Minify JavaScript & CSS● Defer loading of non-essential JavaScript● GZIP components● Reduce http requests (10xs 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 --dont worry about compatibility● Make your site mobile friendly: ○ Use mobile meta tags & viewport ○ Use responsive design approach
    • USE New Markup & Semantics<details> / <summary><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> InformationIf your browser supports this element, it should allowyou to expand and collapse these 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 URIs (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 (contd)● 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 towardmaking the web competitive with mobile native frameworks!Promising Features Include:● WebRTC● WebAudio● WebVideo● PeerConnection● emscripten & porting w/ new JS featureshttp://AreWeMobileYet.comhttps://wiki.mozilla.org/WebAPIhttp://webrtc.org
    • What Weve Covered:● Brief Overview of the Mobile Web● Testing, Measuring and Debugging● Mobile Web Performance Optimization Areas● Future of the Mobile Web
    • LOVE TO EVOLVEFORGET LEARN○ Static Designs ○ Responsive Design○ Desktop Web Frameworks ○ Progressive Enhancement (okay, not always) ○ Mobile First Design Approach○ Unlimited Power ○ Latest HTML5, CSS3, and JS○ Pixels ○ JS Optimization Patterns○ Screen Consistency ○ SVG, Canvas, and webGL○ Always Connected ○ New Web APIsTAKE WHAT YOUVE LEARNED AND CREATE LOTS OF COOL MOBILE & POWERFUL MOBILE WEBSITES
    • REFERENCE LINKS1. http://mobilehtml5.org - HTML5 Compatibility on Mobile & Tablet Browsers2. http://caniuse.com - Campatibility tables for support of HTML5, CSS4, SVG, and more in desktop & mobile browsers3. http://www.onbile.com/info/the-most-popular-mobile-browsers4. http://thenounproject.com/