1. OPTIMERA STHLM!
2010-05-31

2. Lite snabbt om mig

3. Isac Lagerblad

6. Gränssnitt

7. Standarder

8. Tillgänglighet

9. icaaq

10. @icaaq

11. blog.icaaq.com

12. icaaaq@gmail.com

13. cURL

14. OPTIMERA STHLM.se!

15. An extra HTTP request
adds 200+ milliseconds
(worldwide average).
”Steve Souders”

17. CSS

18. sprite.png

19. repeat-x.png

20. css-expressions #fail

21. Konkatinera

22. @media screen{
...
}
@media print {
...
}

23. Javascript

24. javascript parsern
blockerar
rendreringsmotorn

25. asynkront

26. jsLint

27. YUI Compressor

28. Komprimerar även CSS

29. <input type="hidden"
name="__VIEWSTATE" value="/
wEPDwUKLTk3NzgzNDIyMWRk4I
IL2Qj8wKiBLFLF9Xeb32Tjk0s=" />

30. Appropå optimera

31. Unobtrusive javascript

32. Utan JS

33. Med JS

34. Lazy loading

35. Smush it

36. Verktyg

37. • Yslow
• PageSpeed
• http://www.webpagetest.org/

38. h2{
background: url(img/sprite-x.png) repeat-x 0 0;
background: -webkit-gradient(linear,left top,left bottom,from(#f8f8f9),to(#d2d3d4));
background: -moz-linear-gradient(top,#f8f8f9,#d2d3d4);
}

39. base64-encoded Data URIs

40. @font-face

41. border-radius

42. Lazy loading
Bilder

43. mashable.com #fail
#sortOf

44. <a class=”image” style=”width:100px;height:300px;”
href=”/img/griffin.png”>Peter Griffin</a>

45. HTML5 Custom Data
Attributes (data-*)

46. Custom data attributes are intended to
store custom data private to the page
or application, for which there are no
more appropriate attributes or
elements.

47. <a class=”image” data-img=”/img/griffin.png”
style=”width:100px;height:300px;”
href=”www.fox.com/familyguy/”>Peter Griffin</a>

48. Tack!
och tack till @paera för brainstormningen gällande lazyloding av bilder