High-Speed HTML5

© 2011 – Kaazing Corporation

@peterlubbersKaazing

June, 2011

High-Speed HTML5


Thanks to the Sponsors

• Kaazing (prizes)• Enterprise-Ready HTML5 WebSocket Gateway that

allows you to build massively scalable, real-time web applications

• HTML5 and WebSocket Training • We’re hiring!

• Apress (venue, prizes)• Books for professionals by professionals• Pro HTML5 Programming: http://prohtml5.com

• Your name here*

*Contact Frank Greco to be listed here…

http://prohtml5.com/


About @peterlubbers


Not to Be Confused With…


Agenda

• High Speed HTML5 Web Apps• Tools Overview• Optimization Tips

• JavaScript, CSS, Images

• Image Data URIs• HTML5 Boilerplate• Server Configuration• HTML5 Web Workers• HTML5 AppCache• Q&A, Prizes

#html5@peterlubbers

#nychtml5

https://twitter.com/%23!/search/html5nyc

https://twitter.com/%23!/peterlubbers




HTML5 Feature Areas


HTML5 Status

• May 24 2011: Working Draft Last Call

• 2012: Candidate Recommendation

• Widespread adoption is around the corner

• Many HTML5 featurescan be used today:http://caniuse.com

• News: Modernizr v2 Launched!http://www.modernizr.com/

http://caniuse.com/

http://www.modernizr.com/


HTML5 Apps

• Use HTML5 features selectively• If you're not careful, you could end up with a

slow app (not cool)


High Speed Web Apps


Designing Fast Web Apps

• Apps should be focused, rich, and gorgeous, but they still need to be fast (being rich and beautiful isn't always enough!)

• Improve the performance of the web app, which in turn improves the user experience

• With web apps, faster is always better (no onewill complain that your app is too fast)


Time is…

• Measured in milliseconds!• 100 ms of latency costs Amazon

1% of every saleSource: highscalability.com

• 0.5 second delay in content delivery is correlated with a 20% drop in traffic at Google

• 5 millisecond lag behind competing trading platforms could be as costly as $4 million in losses per millisecond —Marissa Mayer, Google

http://highscalability.com/


How Fast is Fast?

• No industry standard• Ideal web response times per W3C

guidelines:• < 0.1 second = Ideal (user does not sense

interruption)• 1 second = Highest acceptable (downloads over 1

second interrupt the user experience)• 10 seconds = Unacceptable

(user is likely to leave the site)

• Perceived speed matters most!


Perceived Speed

• Analyze user behavior• Improve the perceived speed

• Pre-load components• Example: ApplicationCache

• Post-load components• Example: YUI Image Loader

• Use Web Workers


Optimizing Web Applications

• Reduce HTTP overhead• Most users have Internet connections where upload

to download ratios are between 1:4 and 1:20• Result: 500 byte

HTTP header request could take the equivalent time to upload as 10 kB of HTTP response data takes to download


HTTP Requests

• HTTP Requests are expensive!

• The majority of a page response time is consumed by downloadingresources

• Consider:• Design (number of

components on a page)• Location (vicinity to the web

server or edge network)• Split components across

domains (connection limits)


Connection Limits


Performance Analysis Tools


Tools of the Trade

• Analysis tools provide metrics that:• Show problems caused by JavaScript execution,

loading of network resources, layout, CSS, etc.• Break down the problems in an easy-to-read format so

you can target and resolve problems quickly

• Built-in browser tools• Great (free) tools for performance analysis


Built-In Developer Tools

Browser Built-In Tool Mac Shortcut Windows Shortcut

Chrome Developer Tools Command + Option + J

CTRL + Shift + J

Firefox Firebug F12 F12

Opera Dragonfly Command + Option + I

CTRL + Shift + I

Safari Web Inspector Command + Option + I

CTRL + Alt + I

Internet Explorer Developer Tools F12


Performance Testing Tools

• Great and free Tools:• Page Speed• Chrome Speed Tracer• Yslow (for Firebug)• Wireshark


Page Speed

• http://pagespeed.googlelabs.com• Add-on for Firefox and Chrome

• http://code.google.com/speed/page-speed/

• Grades your pages (A-F)

http://code.google.com/speed/page-speed/

http://code.google.com/speed/page-speed/


Go Speed Tracer Go!

• Chrome Extension to measure “sluggishness”• http://code.google.com/webtoolkit/speedtracer/

• Download and install in the Chrome Developer Edition

http://code.google.com/webtoolkit/speedtracer/


YSlow

• Available for Firefox and Chrome• http://developer.yahoo.com/yslow/

• Grades your pages (0-100)

http://developer.yahoo.com/yslow/


Wireshark

• Network traffic analysis tool• HTTP, WebSocket traffic, etc.

• Lua extension framework• http://www.wireshark.org/

http://www.wireshark.org/


Fix the Easy Stuff!

• At least take care of the low hanging fruit

• "If everyone would implement just 20% of Steve [Souders]'s guidelines, the Web would be a dramatically better place. Between this book and Steve's YSlow extension, there's really no excuse for having a sluggish web site anymore.”—Joe Hewitt, Developer of Firebug debugger and Mozilla's DOM Inspector


Optimizing Resources


Optimizing Web Applications

• Once you've analyzed your web app, target areas where you can improve performance

• Most (if not all) web apps use these resources:• Scripts• CSS• Images

• There are many ways to optimize these resources and, therefore, your app


• Reduce the number of scripts• Place scripts at the end of your file• Programmatically remove extraneous

characters (minify)• Use tools that help optimize your JavaScript,

like helping it download or run faster• Google Closure Compiler:

http://closure-compiler.appspot.com/home• Yahoo! YUI Compressor

http://goo.gl/Ac20i • Uglify

http://marijnhaverbeke.nl/uglifyjs

Optimizing Scripts

http://closure-compiler.appspot.com/home

http://goo.gl/Ac20i

http://marijnhaverbeke.nl/uglifyjs


Optimizing Scripts

• Store scripts externally• Cached by the browser• Great for when the user views a page or several

pages multiple times per session and the pages re-use JavaScript

• Use when the caching benefits outweigh the extra request overhead savings from inlining script

• head.js (library that allows you to parallel load JS files for faster performance)


Optimizing CSS

• Use CSS (3) where possible• Gradients, border radius,

transforms, transformations, etc. instead of images

• Minify CSS• Place in <head>• Use Developer Tools to

analyze CSS• Combine if possible• Choose <link> over @import to allow parallel downloads


CSS Transitions

• Before CSS3, no transitions• DHTML, jQuery• JavaScript (slow loading animation libraries)

• Use this instead of JS animation (browser handles the drawing)

• Coding is simplified, CPU time is minimized• The browser optimizes the transition for you


Optimizing Images

• Use PNGs instead of GIFs• 32 vs. 8 bit Color, 8 vs. 1 bit Alpha Transparency

• Compress image files• Pngcrush

http://pmt.sourceforge.net/pngcrush/• Smush it

http://developer.yahoo.com/yslow/smushit/

• Don't scale images with HTML• Add height and width to avoid

reflows• Use Data URIs and Sprites

http://pmt.sourceforge.net/pngcrush/

http://developer.yahoo.com/yslow/smushit/


Data URIs

• Frequently used or changing images (warnings or logos)

• Use the "data" URL scheme:• Works in IE 8 and with a

workaround in IE 6 and 7:• http://www.phpied.com/data-urls-what-are-they-and-how-

to-use/• http://www.phpied.com/mhtml-when-you-need-data-uris-i

n-ie7-and-under/

• Data URI Kitchenhttp://software.hixie.ch/utilities/cgi/data/data

• Drupal project: http://drupal.org/project/fasterimages

http://www.phpied.com/data-urls-what-are-they-and-how-to-use/

http://www.phpied.com/data-urls-what-are-they-and-how-to-use/

http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/


http://software.hixie.ch/utilities/cgi/data/data


http://drupal.org/project/fasterimages



<img src="data:image/png;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" width="16" height="14" alt="embedded folder icon">

HTML

Data URI Example


Sprites

• Combine multiples images into one

• Ideal for images that are contiguous (nav. bar)

• Significantly reduces HTTP requests

• Defining the coordinates can be tedious

• Spriteme tool: http://spriteme.org/

http://spriteme.org/


HTML5 Boilerplate Build Tools

http://html5boilerplate.com

• Use the built-in build tools: it’s simple!• Ant scripts in /build directory• Use ant minify to minify html• Output to /publish directory

http://html5boilerplate.com/


Server Configuration


<IfModule mod_expires.c> Header set cache-control: public ExpiresActive on# your document html ExpiresByType text/html "access"# rss feed ExpiresByType application/rss+xml "access plus 1 hour"# favicon (cannot be renamed) ExpiresByType image/vnd.microsoft.icon "access plus 1 week" # media: images, video, audio ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month"# webfonts ExpiresByType font/ttf "access plus 1 month" ExpiresByType font/woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month"# css and javascript ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month"</IfModule>

.htaccess File

Web Server Caching Settings

Source: Paul Irish & Divya Manian http://html5boilerplate.com/



# compress html, javascript, and cssAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/javascript

.htaccess File

Gzip Configuration

• Browser will send: Accept-encoding: gzip

• Server will send: Content-encoding: gzip + Zipped file


HTML5 Web Workers


HTML5 Web Workers

• Without Web Workers:• Long-running JavaScript tasks can block other JavaScript

on the page’s UI thread• JavaScript can cause some browser UIs to hang:

• HTML5 Web Workers provide background processing capabilities to web applications

• You can now run JavaScript in the background


HTML5 Web Workers

• Web Worker Script cannot:• Access the web page's window object

(window.document)• Access the web page and its DOM• Be on a different origin

(scheme, host, port combination)

• Web Workers can: • Use the full JavaScript timing API• Import additional libraries using importScripts

• Still consume CPU cycles and make your system less responsive, so be careful


Web Workers API

• Create an HTML5 Web Worker object and pass in a JavaScript file to be executed

• Set up Web Worker communication on the web page and in the worker (similar to Cross Document Messaging):• Set up event listener to listen

to incoming messages and errors from the worker

• Call postMessage to senddata to a worker


// Check if Web Workers are supportedif (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML = "Your browser supports HTML5 Web Workers";}

// Create a new worker// The URL for the JavaScript file on the same origin worker = new Worker("echoWorker.js");

//to load additional JavaScript in the workerimportScripts("helper.js", "anotherHelper.js");

JavaScript

Web Workers API


//From the main pageworker.postMessage("Here's a message for you");

//Add event listenerworker.addEventListener("message”, messageHandler, true);

//Process incoming messagesfunction messageHandler(e) { // process message from worker}

//Handle errorsworker.addEventListener("error", errorHandler, true);

//Stop workerworker.terminate();

JavaScript

Web Workers API


//From the Web Workerfunction messageHandler(e) { postMessage("worker says: " + e.data + " too");}

//Add event listeneraddEventListener("message", messageHandler, true);

//Using a Web Worker within a Web Worker var subWorker = new Worker("subWorker.js");

JavaScript

Web Workers API


Inline Web Workers (File API)

• Web Workers must be a JavaScript file on the same origin

• You can create “inline Web Workers” on-the-fly using the (new) File API:• window.WebKitBlobBuilder• window.webkitURL.createObjectURL• Note: this will not be interpreted:<script id=”wrk" type="text/worker”>so you can use it to build your file

• See HTML5 Rocks article by @ebidel:http://goo.gl/kpQpS

https://twitter.com/%23!/ebidel

http://goo.gl/kpQpS


Web Workers Support

• Desktop• Chrome 4.0+• Firefox 3.5+• Safari 4.0+• Opera 10.6+

• Mobile• Opera Mobile 11


HTML5 ApplicationCache


ApplicationCache

• Store complete web sites offline• Also allows pre-fetching of site resources• Cache pages that have not been visited yet• Simple appcache manifest mechanism• Browsers cache

data in an Application Cache

• See also presentation at:http://goo.gl/tUpjj

http://goo.gl/tUpjj


CACHE MANIFEST# Version 1.0.1 # Files to cacheindex.htmlcache.htmlhtml5.cssimage1.jpgimg/foo.gifhttp://www.example.com/styles.css

# Use from network if availableNETWORK:network.html

# Fallback contentFALLBACK:/ fallback.html

*.appcache File

Example appcache File


<!DOCTYPE html><html manifest="offline.appcache"> <head> <title>HTML5 Application Cache Rocks!</title>

HTML

• Reference the appcache file:• Use .appcache extension (*.manifest also

allowed)• Add as attribute to the HTML element

Example appcache Attribute


AppCache Mime Type

• Configure your server to serve appcache files with the correct mime type

• Manifest files have the MIME type text/cache-manifest

• Most web servers must be configured to serve the manifest files correctly

• Kaazing WebSocket Gateway serves manifest files correctly OOTBhttp://kaazing.com/download.html

http://kaazing.com/download.html


AppCache Support

• Desktop• Chrome 4.0+• Firefox 3.5+• Safari 4.0+• Opera 10.6+

• Mobile• Opera Mobile 11• iOS 2.1+• Android 2.1+


Other Cool Stuff to Watch

• RequestAnimationFrame (instead of setTimeOut) for animationshttp://www.html5rocks.com/tutorials/speed/html5/#toc-request-ani-frame

• WebSockets for low-latency, full duplex web communicationwww.kaazing.com http://websockets.org

http://www.html5rocks.com/tutorials/speed/html5/%23toc-request-ani-frame

http://www.html5rocks.com/tutorials/speed/html5/%23toc-request-ani-frame

http://www.kaazing.com/

http://websockets.org/


Questions?

• Now or Later• E-mail: [email protected]• Twitter: @peterlubbers• LinkedIn: Peter Lubbers

mailto:[email protected]

http://twitter.com/peterlubbers

http://www.linkedin.com/in/peterlubbers


Don’t Miss This!

• Steve Souders’ HTML5 Performance Talk• Free event hosted by the

San Francisco HTML5 User Group• 28 July 2011• Sold out, but waiting list still available• Streamed live to ~2,000 members• For details and to sign up visit:

http://sfhtml5.org

http://sfhtml5.org/


Buy the Book!

• Pro HTML5 Programming (Apress, 2010)• E-book coupon code for Spring/Summer 2011:

LUBBERSHTML5


Useful HTML5 Resources

• HTML5 Boilerplate• http://html5boilerplate.com

• The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks:• https://github.com/Modernizr/Modernizr/wiki/HTML

5-Cross-browser-Polyfills

• Browser logos:• http://paulirish.com/2010/high-res-browser-icons/


https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

http://paulirish.com/2010/high-res-browser-icons/


Useful HTML5 Resources

• Building Faster Web Sites (Steve Souders, O’Reilly)• Live on July 28th at the SF HTML5 User Group

(Streamed Live): http://sfhtml5.org

• Performance analysis tools:• Chrome Speed Tracer

http://code.google.com/webtoolkit/speedtracer/ • Yslow (for Firebug)

http://developer.yahoo.com/yslow/ • Page Speed (Firefox and Chrome Add-On)

http://code.google.com/speed/page-speed/docs/using_chrome.html

http://sfhtml5.org/

http://code.google.com/webtoolkit/speedtracer/

http://developer.yahoo.com/yslow/




• HTML5 User Group:• San Francisco: http://www.sfhtml5.org/

Live streaming video and recordings• New York: http://www.meetup.com/NY-HTML5-User-Group • London: http://www.meetup.com/LondonHTML5UG/

• Apress book: Pro HTML5 Programming• (Peter Lubbers, Brian Albers, & Frank Salim)

http://www.prohtml5.com/

• World Wide HTML5 Training:• E-mail us: [email protected]

• Web site: http://tech.kaazing.com/training/

Note: Thanks to @vjwang for review and editing

Learn More

http://www.sfhtml5.org/

http://www.meetup.com/NY-HTML5-User-Group

http://www.meetup.com/LondonHTML5UG/

http://www.prohtml5.com/

http://tech.kaazing.com/training/




Technology

High-Speed HTML5