Embed Size (px)
DESCRIPTION
Let's update the WPO techniques with the new features of html5
Citation preview
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 [email protected]
twitter @fullo
