extended slow parts, HTML5 meets WPO

2,432 views

Published on

Let's update the WPO techniques with the new features of html5

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,432
On SlideShare
0
From Embeds
0
Number of Embeds
179
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

extended slow parts, HTML5 meets WPO

  1. 1. Extended Slow Parts v2.0HTML 5 meets browsersFrancesco Fulloneff AT ideato.it
  2. 2. Who am I?Francesco Fullone aka Fullo- PHP developer since 1999- President- and Open Source Evangelist- CEO @- founder @- Nerd and geek
  3. 3. Lets introduce HTML5
  4. 4. It is not a“revolution”
  5. 5. it is a living document* as announced on Jan 2011 by WHATWG http://ow.ly/5vGnh
  6. 6. its time tointroduce theWPO*! * web performance optimization
  7. 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. 8. do less request Use application cache.manifest for live sites, not just offline apps
  9. 9. do less requestuse web storageinstead of cookies http://www.flickr.com/photos/betsyweber/4962298614/
  10. 10. do less requestUse client-side databases*instead of server roundtrips *as indexedDB or web SQL databases
  11. 11. reduce the (transmitted) data WebSockets for faster delivery with less bandwidth than XHR http://www.flickr.com/photos/exalthim/1594948378/
  12. 12. reduce the (transmitted) data Use localStorage to save* frequently used resources *as Google and Bing do http://ow.ly/5h8Ab
  13. 13. reduce the (transmitted) data Use CSS3 effects instead of requesting heavy image sprites http://www.flickr.com/photos/elderleaf/1395164209
  14. 14. reduce the (transmitted) data Use CSS3 to draw the siteinterface , SVG to represent data
  15. 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 Transitionstranslate(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) animationskew(1deg) translate(0px); -o-transform: rotate(0deg) scale(0.67) skew(1deg)translate(0px);}
  16. 16. Never forget the main lesson!
  17. 17. Everythings a tradeoff
  18. 18. With HTML5 browsers war ended?
  19. 19. or a new browsers guerrilla starts?
  20. 20. ?
  21. 21. phpDay + jsDay 2012 16-19 Maggio 2012 www.jsday.it
  22. 22. Francesco Fullone ff@ideato.it twitter @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT ideato.it www.ideato.it

×