extended slow parts, HTML5 meets WPO
1 like713 views
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.
extended slow parts, HTML5 meets WPO
- 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
- 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!
- 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