OPTIMERA STHLM! Isac Lagerblad

526 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
526
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide












  • tack daniel. grymt roligt och intressant






  • evalueras oftare än man tror, när sidan laddas, scrollas och ibland även bara man rör musen.




























  • OPTIMERA STHLM! Isac Lagerblad

    1. 1. OPTIMERA STHLM! 2010-05-31
    2. 2. Lite snabbt om mig
    3. 3. Isac Lagerblad
    4. 4. Gränssnitt
    5. 5. Standarder
    6. 6. Tillgänglighet
    7. 7. icaaq
    8. 8. @icaaq
    9. 9. blog.icaaq.com
    10. 10. icaaaq@gmail.com
    11. 11. cURL
    12. 12. OPTIMERA STHLM.se!
    13. 13. An extra HTTP request adds 200+ milliseconds (worldwide average). ”Steve Souders”
    14. 14. CSS
    15. 15. sprite.png
    16. 16. repeat-x.png
    17. 17. css-expressions #fail
    18. 18. Konkatinera
    19. 19. @media screen{ ... } @media print { ... }
    20. 20. Javascript
    21. 21. javascript parsern blockerar rendreringsmotorn
    22. 22. asynkront
    23. 23. jsLint
    24. 24. YUI Compressor
    25. 25. Komprimerar även CSS
    26. 26. <input type="hidden" name="__VIEWSTATE" value="/ wEPDwUKLTk3NzgzNDIyMWRk4I IL2Qj8wKiBLFLF9Xeb32Tjk0s=" />
    27. 27. Appropå optimera
    28. 28. Unobtrusive javascript
    29. 29. Utan JS
    30. 30. Med JS
    31. 31. Lazy loading
    32. 32. Smush it
    33. 33. Verktyg
    34. 34. • Yslow • PageSpeed • http://www.webpagetest.org/
    35. 35. 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); }
    36. 36. base64-encoded Data URIs
    37. 37. @font-face
    38. 38. border-radius
    39. 39. Lazy loading Bilder
    40. 40. mashable.com #fail #sortOf
    41. 41. <a class=”image” style=”width:100px;height:300px;” href=”/img/griffin.png”>Peter Griffin</a>
    42. 42. HTML5 Custom Data Attributes (data-*)
    43. 43. 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.
    44. 44. <a class=”image” data-img=”/img/griffin.png” style=”width:100px;height:300px;” href=”www.fox.com/familyguy/”>Peter Griffin</a>
    45. 45. Tack! och tack till @paera för brainstormningen gällande lazyloding av bilder

    ×