Download - Performance Optimization for Mobile Web | Fresh Tilled Soil

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%

BECAUSE OF US!

We are doing it WRONG!

Mobile web is slow because...

It's Complicated...

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>


<mark>

Semantically highlight parts of your text:

Lorem ipsum dolor, <mark>consectetur</mark> adipiscing...

USE: CSS & Image Techniques

● Use data URI's (inline images)

HTML

CSS


● Text paths using the SVG DOM


● 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/