extended slow parts, HTML5 meets WPO
-
Upload
francesco-fullone -
Category
Technology
-
view
2.049 -
download
0
description
Transcript of extended slow parts, HTML5 meets WPO
![Page 1: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/1.jpg)
Extended Slow Parts v2.0
HTML 5 meets browsers
Francesco Fullone
ff AT ideato.it
![Page 2: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/2.jpg)
Who am I?
Francesco Fullone aka Fullo
- PHP developer since 1999
- President
- and Open Source Evangelist
- CEO @
- founder @
- Nerd and geek
![Page 3: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/3.jpg)
Let's introduce HTML5
![Page 4: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/4.jpg)
It is not a “revolution”
![Page 5: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/5.jpg)
it is a living document*
as announced on Jan 2011 by WHATWG http://ow.ly/5vGnh
![Page 6: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/6.jpg)
it's time to introduce the WPO*!
* web performance optimization
![Page 7: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/7.jpg)
do less requestsreduce the dataplace the parts in the right places
Repeat the learned lessons
http://www.flickr.com/photos/seetefl/4111987480
![Page 8: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/8.jpg)
do less request
Use application cache .manifest for live sites, not just
offline apps
![Page 9: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/9.jpg)
do less request
use web storageinstead of cookies
http://www.flickr.com/photos/betsyweber/4962298614/
![Page 10: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/10.jpg)
do less request
Use client-side databases* instead of server roundtrips
*as indexedDB or web SQL databases
![Page 11: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/11.jpg)
reduce the (transmitted) data
WebSockets forfaster delivery with
less bandwidththan XHR
http://www.flickr.com/photos/exalthim/1594948378/
![Page 12: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/12.jpg)
reduce the (transmitted) data
Use localStorage to save* frequently used resources
*as Google and Bing do http://ow.ly/5h8Ab
![Page 13: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/13.jpg)
reduce the (transmitted) data
Use CSS3 effects instead of requesting heavy image sprites
http://www.flickr.com/photos/elderleaf/1395164209
![Page 14: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/14.jpg)
reduce the (transmitted) data
Use CSS3 to draw the site interface , SVG to represent data
![Page 15: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/15.jpg)
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);}
![Page 16: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/16.jpg)
Never forget the main lesson!
![Page 17: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/17.jpg)
Everything's a tradeoff
![Page 18: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/18.jpg)
With HTML5 browsers war ended?
![Page 19: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/19.jpg)
or a new browsers guerrilla starts?
![Page 20: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/20.jpg)
?
![Page 21: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/21.jpg)
phpDay + jsDay 201216-19 Maggio 2012
www.jsday.it
![Page 22: extended slow parts, HTML5 meets WPO](https://reader033.fdocuments.us/reader033/viewer/2022051323/54b683084a7959e0588b4693/html5/thumbnails/22.jpg)
via Quinto Bucci 20547023 Cesena (FC)info AT ideato.itwww.ideato.it
Francesco [email protected]
twitter @fullo