extended slow parts, HTML5 meets WPO

Extended Slow Parts v2.0

HTML 5 meets browsers

Francesco Fullone

ff AT ideato.it

Who am I?

Francesco Fullone aka Fullo

- PHP developer since 1999

- President

- and Open Source Evangelist

- CEO @

- founder @

- Nerd and geek

Let's introduce HTML5

It is not a “revolution”

it is a living document*

as announced on Jan 2011 by WHATWG http://ow.ly/5vGnh

it's time to introduce the WPO*!

* web performance optimization

do less requestsreduce the dataplace the parts in the right places

Repeat the learned lessons

http://www.flickr.com/photos/seetefl/4111987480

do less request

Use application cache .manifest for live sites, not just

offline apps

do less request

use web storageinstead of cookies

http://www.flickr.com/photos/betsyweber/4962298614/

do less request

Use client-side databases* instead of server roundtrips

*as indexedDB or web SQL databases

reduce the (transmitted) data

WebSockets forfaster delivery with

less bandwidththan XHR

http://www.flickr.com/photos/exalthim/1594948378/

reduce the (transmitted) data

Use localStorage to save* frequently used resources

*as Google and Bing do http://ow.ly/5h8Ab

reduce the (transmitted) data

Use CSS3 effects instead of requesting heavy image sprites

http://www.flickr.com/photos/elderleaf/1395164209

reduce the (transmitted) data

Use CSS3 to draw the site interface , SVG to represent data

place the parts in the right places

Use CSS Transitionsinstead of JavaScript

animation

.classname { -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); -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) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);}

Never forget the main lesson!

Everything's a tradeoff

With HTML5 browsers war ended?

or a new browsers guerrilla starts?

?

phpDay + jsDay 201216-19 Maggio 2012

www.jsday.it

via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it

Francesco Fulloneff@ideato.it

twitter @fullo