This document discusses optimizing web performance (WPO) with HTML5. It recommends doing less requests, reducing data, and placing parts in the right places. Specifically, it suggests using application cache, web storage instead of cookies, client-side databases instead of server roundtrips, WebSockets, localStorage, CSS3 effects instead of image sprites, CSS3/SVG for interfaces and data, and CSS transitions instead of JavaScript for animation. The document questions if the HTML5 browsers war has ended or a new guerrilla starts, and promotes an upcoming conference.

1. Extended Slow Parts v2.0
HTML 5 meets browsers
Francesco Fullone
ff AT ideato.it

2. Who am I?
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- founder @
- Nerd and geek

3. Let's introduce HTML5

4. It is not a
“revolution”

5. it is a living document*
as announced on Jan 2011 by WHATWG http://ow.ly/5vGnh

6. it's time to
introduce the
WPO*!
* web performance optimization

7. Repeat the learned lessons
do less requests
reduce the data
place the parts in
the right places http://www.flickr.com/photos/seetefl/4111987480

8. do less request
Use application cache
.manifest for live sites, not just
offline apps

9. do less request
use web storage
instead of cookies
http://www.flickr.com/photos/betsyweber/4962298614/

10. do less request
Use client-side databases*
instead of server roundtrips
*as indexedDB or web SQL databases

11. reduce the (transmitted) data
WebSockets for
faster delivery with
less bandwidth
than XHR
http://www.flickr.com/photos/exalthim/1594948378/

12. reduce the (transmitted) data
Use localStorage to save*
frequently used resources
*as Google and Bing do http://ow.ly/5h8Ab

13. reduce the (transmitted) data
Use CSS3 effects instead of
requesting heavy image sprites
http://www.flickr.com/photos/elderleaf/1395164209

14. reduce the (transmitted) data
Use CSS3 to draw the site
interface , SVG to represent data

15. place the parts in the right places
.classname {
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
-webkit-transform: rotate(4deg) scale(1) skew(1deg)
Use CSS Transitions
translate(10px);
instead of JavaScript
-moz-transform: rotate(4deg) scale(1) skew(1deg)
translate(10px);
-o-transform: rotate(4deg) scale(1) skew(1deg)
translate(10px);
}
.classname:hover{
-webkit-transform: rotate(0deg) scale(0.67)
skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.67)
animation
skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.67) skew(1deg)
translate(0px);
}

16. Never forget the
main lesson!

17. Everything's a tradeoff

18. With HTML5 browsers war
ended?

19. or a new browsers guerrilla starts?

20. ?

21. phpDay + jsDay 2012
16-19 Maggio 2012
www.jsday.it

22. Francesco Fullone
ff@ideato.it
twitter @fullo
via Quinto Bucci 205
47023 Cesena (FC)
info AT ideato.it
www.ideato.it