2. •Jobbar som .NET konsult hosValtechAB
• Jobbat med .NET sen 2005
• Började med HTML/CSS 1998
2 / 13kim thörning | kimthorning@gmail.com | @ze7en
3. 3 / 13kim thörning | kimthorning@gmail.com | @ze7en
• ca 5 sekunders attention span
• Kortare besökstid på webbsidan
• Alla har inte snabbt internet/datorer
• Enklare att underhålla och spara pengar
• Bättre Google ranking
4. 4 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Minska antalet HTTP Requests
– kommunikationen mellan webbläsare
och server
• Minska nedladdningsstorleken
• Utnyttja webbläsarens minne
• Underlätta för renderingen
6. 6 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Concat JS och CSS
- slå samman js-filer
- slå samman css-filer
• Görs med försiktighet!
– se upp för krockar och overrides
• Man kan även göra tvärtom och extrahera
- minskar mängd data som laddas ner
7. 7 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Minifiera JS och CSS
- minifyjavascript.com
• Refaktorisera, bli av med redudant kod
- jslint
• Komprimera bilder
- Photoshop och SmushIt.com (lossless)
8. 8 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Extern CSS och Javascript
- separerar presentation och innehåll
- renare kod , underlättar underhåll/billigare
• Externa filer hamnar minnet på webbläsare.
Även bilder.
<style type="text/css"> #header { background: url(../i/header-bg.png) no-repeat top center; height: 235px; overflow: hidden; } </style><style type="text/css"> #header { background: url(../i/header-bg.png) no-repeat top center; height: 235px; overflow: hidden; } </style>
9. 9 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Rendering
-Webbläsarens generering av sidinnehåll
• CSS i toppen inom <head>
• Javascript i botten innan </body>
- Laddar text och bilder först eftersom
script blockar all annan nedladdning.
10. 10 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Storlek:
- 251KB vs 107KB
• Nedladdninstid:
- ca 45 s vs ca 18 s
• Cachad tid:
-ca 25 vs ca 0,5s
11. 11 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Firebug
•Yslow till Firefox
• Firefox throtteling – simulera hastigheter
• Web developer toolbar
• Charles – (Charles proxy)
