Francesco Fullone gave a talk about optimizing frontend performance using HTML5 features. He discussed how HTML5 is not yet fully supported but parts can be used now to improve performance. He recommended techniques like using cache manifests, web storage, client-side databases, WebSockets, CSS effects instead of image sprites, and Web Workers to reduce requests and data size. CSS transitions were suggested instead of JavaScript animations. The main lesson is that optimizations require tradeoffs and not all HTML5 features are ready yet.

1. Extended Slow Parts
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 @
- Nerd and geek

3. Did you attend the
“Please, don't touch
the slow parts”
speech?

4. We introduced
the frontend
performance problem.

5. It's time to
make evolve
that speech!

6. Let's introduce HTML5

7. It is not a
“revolution”

8. it will be ready
for 2012
(but not fully supported until
2020)
HTML5

9. Right now there is some
confusion on what should
works.

10. HTML 5 state of art

12. But we don't care,
we are brave
developers.
DEV

13. And we want to
know which
parts
“we can touch”

14. do less requests
place the parts in
the right places
reduce the data
Repeat the learned lessons:
http://www.flickr.com/photos/seetefl/4111987480

15. do less request:
Use cache manifest for live
sites, not just offline apps

16. do less request:
use web storage
instead of cookies
http://www.flickr.com/photos/betsyweber/4962298614/

17. do less request:
Use client-side databases
instead of server roundtrips

18. reduce the (transmitted) data:
WebSockets for
faster delivery with
less bandwidth
than XHR
http://www.flickr.com/photos/exalthim/1594948378/

19. reduce the (transmitted) data:
Use CSS3 effects instead of
requesting heavy image sprites
(and save designers from an headache every time they have to update it)
http://www.flickr.com/photos/elderleaf/1395164209

20. place the parts in the right places:
For CPU-heavy
operations:
Web Workers deliverhttp://www.flickr.com/photos/osde-info/2261186236

21. place the parts in the right
places:
Use CSS Transitions
instead 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);
}

22. Don't forget the
main lesson!

23. Everything's a tradeoff

24. ?

25. phpDay 2011
12-14 Maggio 2011
www.phpday.it

26. via Quinto Bucci 205
47023 Cesena (FC)
info AT ideato.it
www.ideato.it
rate this talk: http://joind.in/2121