SlideShare a Scribd company logo
1 of 13
Grunderna för att:
kim thörning | kimthorning@gmail.com | @ze7en 1 / 13
•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 / 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 / 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
5 / 13kim thörning | kimthorning@gmail.com | @ze7en
• CSS Sprites av bakgrundsbilder
• SpriteMe.org
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 / 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 / 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=&quot;text/css&quot;> #header { background: url(../i/header-bg.png) no-repeat top center; height: 235px; overflow: hidden; } </style><style type=&quot;text/css&quot;> #header { background: url(../i/header-bg.png) no-repeat top center; height: 235px; overflow: hidden; } </style>
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 / 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 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Firebug
•Yslow till Firefox
• Firefox throtteling – simulera hastigheter
• Web developer toolbar
• Charles – (Charles proxy)
12 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Gzip
• Cache på servern
• Optimera databas
• Optimera anrop till databas
13 / 13kim thörning | kimthorning@gmail.com | @ze7en
• Utnyttja mitt nätverk
- .NET, Java, UX, projektledare mm
• Kontakta mig för mer information
- kimthorning@gmail.com
- twitter: @ze7en

More Related Content

Viewers also liked

Amigos de elvis_07
Amigos de elvis_07Amigos de elvis_07
Amigos de elvis_07RED HOT
 
Summering av Öredev
Summering av ÖredevSummering av Öredev
Summering av Öredevze7en
 
Who we are and What We Do - 2015
Who we are and What We Do - 2015Who we are and What We Do - 2015
Who we are and What We Do - 2015Avabe Initiative
 
Yuansisi DESIGN WORKS(2007-2010)
Yuansisi DESIGN WORKS(2007-2010)Yuansisi DESIGN WORKS(2007-2010)
Yuansisi DESIGN WORKS(2007-2010)bypumpkin
 
Brouchure SiègePub
Brouchure SiègePubBrouchure SiègePub
Brouchure SiègePubbenyessef
 
Gráficos de Controle
Gráficos de ControleGráficos de Controle
Gráficos de ControleRamon Santos
 
Buku kerja-pengawas-sekolah (1)
Buku kerja-pengawas-sekolah (1)Buku kerja-pengawas-sekolah (1)
Buku kerja-pengawas-sekolah (1)Adji Marsose
 
Presentación blog visita a la presidencia
Presentación blog visita a la presidenciaPresentación blog visita a la presidencia
Presentación blog visita a la presidenciagarfredy
 
Presentacion blog dia de la familia 2011
Presentacion blog dia de la familia 2011Presentacion blog dia de la familia 2011
Presentacion blog dia de la familia 2011garfredy
 
Predmet 4: Informacione tehnologije i primjena rješenja
Predmet 4: Informacione tehnologije i primjena rješenjaPredmet 4: Informacione tehnologije i primjena rješenja
Predmet 4: Informacione tehnologije i primjena rješenjaDejan Majkic
 
บทสนทนาในชีวิตประจำวัน
บทสนทนาในชีวิตประจำวันบทสนทนาในชีวิตประจำวัน
บทสนทนาในชีวิตประจำวันpreap
 
Amigos de elvis_13_discografias
Amigos de elvis_13_discografiasAmigos de elvis_13_discografias
Amigos de elvis_13_discografiasRED HOT
 
Cognitive psychology experiment
Cognitive psychology experimentCognitive psychology experiment
Cognitive psychology experimentttlg
 
Social Psychology Experiment on Altruism
Social Psychology Experiment on AltruismSocial Psychology Experiment on Altruism
Social Psychology Experiment on AltruismKaren Leggett
 
Skeletal quiz steven
Skeletal quiz stevenSkeletal quiz steven
Skeletal quiz stevenkristenmccann
 

Viewers also liked (17)

Amigos de elvis_07
Amigos de elvis_07Amigos de elvis_07
Amigos de elvis_07
 
Summering av Öredev
Summering av ÖredevSummering av Öredev
Summering av Öredev
 
Who we are and What We Do - 2015
Who we are and What We Do - 2015Who we are and What We Do - 2015
Who we are and What We Do - 2015
 
Yuansisi DESIGN WORKS(2007-2010)
Yuansisi DESIGN WORKS(2007-2010)Yuansisi DESIGN WORKS(2007-2010)
Yuansisi DESIGN WORKS(2007-2010)
 
Brouchure SiègePub
Brouchure SiègePubBrouchure SiègePub
Brouchure SiègePub
 
Gráficos de Controle
Gráficos de ControleGráficos de Controle
Gráficos de Controle
 
Buku kerja-pengawas-sekolah (1)
Buku kerja-pengawas-sekolah (1)Buku kerja-pengawas-sekolah (1)
Buku kerja-pengawas-sekolah (1)
 
Presentación blog visita a la presidencia
Presentación blog visita a la presidenciaPresentación blog visita a la presidencia
Presentación blog visita a la presidencia
 
Presentacion blog dia de la familia 2011
Presentacion blog dia de la familia 2011Presentacion blog dia de la familia 2011
Presentacion blog dia de la familia 2011
 
Ahorro calzado
Ahorro calzadoAhorro calzado
Ahorro calzado
 
Predmet 4: Informacione tehnologije i primjena rješenja
Predmet 4: Informacione tehnologije i primjena rješenjaPredmet 4: Informacione tehnologije i primjena rješenja
Predmet 4: Informacione tehnologije i primjena rješenja
 
Boletín septiembre 22
Boletín septiembre 22Boletín septiembre 22
Boletín septiembre 22
 
บทสนทนาในชีวิตประจำวัน
บทสนทนาในชีวิตประจำวันบทสนทนาในชีวิตประจำวัน
บทสนทนาในชีวิตประจำวัน
 
Amigos de elvis_13_discografias
Amigos de elvis_13_discografiasAmigos de elvis_13_discografias
Amigos de elvis_13_discografias
 
Cognitive psychology experiment
Cognitive psychology experimentCognitive psychology experiment
Cognitive psychology experiment
 
Social Psychology Experiment on Altruism
Social Psychology Experiment on AltruismSocial Psychology Experiment on Altruism
Social Psychology Experiment on Altruism
 
Skeletal quiz steven
Skeletal quiz stevenSkeletal quiz steven
Skeletal quiz steven
 

Similar to Optimera mera

Webboptimering 25 min
Webboptimering 25 minWebboptimering 25 min
Webboptimering 25 minFredrik Wendt
 
VT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & BootstrapVT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & BootstrapAnton Tibblin
 
VT2019 - DA355A - CSS Grid & Webbramverk
VT2019 - DA355A - CSS Grid & WebbramverkVT2019 - DA355A - CSS Grid & Webbramverk
VT2019 - DA355A - CSS Grid & WebbramverkAnton Tibblin
 
Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5Martin Carlsson
 
Lemoon cms utbildning
Lemoon cms utbildningLemoon cms utbildning
Lemoon cms utbildningDearFriends
 
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med PythonHT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med PythonAnton Tibblin
 
Webbanalysdagen - Webbanalys: Optimera prestanda
Webbanalysdagen - Webbanalys: Optimera prestandaWebbanalysdagen - Webbanalys: Optimera prestanda
Webbanalysdagen - Webbanalys: Optimera prestandaMarcus Österberg
 
Så funkar det (del 3) - webben
Så funkar det (del 3) -  webbenSå funkar det (del 3) -  webben
Så funkar det (del 3) - webbenPeter Antman
 
HT18 - DA156A - Extra
HT18 - DA156A - ExtraHT18 - DA156A - Extra
HT18 - DA156A - ExtraAnton Tibblin
 
CSS för utskrift
CSS för utskriftCSS för utskrift
CSS för utskriftkurs-resurs
 
Spbl Fö6 Designprinciper Och Xml
Spbl Fö6   Designprinciper Och XmlSpbl Fö6   Designprinciper Och Xml
Spbl Fö6 Designprinciper Och Xmlbildljuddsv
 
Introduktion till HTML
Introduktion till HTMLIntroduktion till HTML
Introduktion till HTMLAnton Tibblin
 
Mindre och snabbare – Cache tips for WordPress developers
Mindre och snabbare – Cache tips for WordPress developersMindre och snabbare – Cache tips for WordPress developers
Mindre och snabbare – Cache tips for WordPress developersSeravo
 
HT19 - DA156A - Introduktion till HTML
HT19 - DA156A - Introduktion till HTMLHT19 - DA156A - Introduktion till HTML
HT19 - DA156A - Introduktion till HTMLAnton Tibblin
 
HT17 - DA156A - Sammanfattning av kursen
HT17 - DA156A - Sammanfattning av kursenHT17 - DA156A - Sammanfattning av kursen
HT17 - DA156A - Sammanfattning av kursenAnton Tibblin
 
HT17 - DA156A - Introduktion till HTML
HT17 - DA156A - Introduktion till HTMLHT17 - DA156A - Introduktion till HTML
HT17 - DA156A - Introduktion till HTMLAnton Tibblin
 
HT16 - DA156A - Introduktion till HTML
HT16 - DA156A - Introduktion till HTMLHT16 - DA156A - Introduktion till HTML
HT16 - DA156A - Introduktion till HTMLAnton Tibblin
 
HT18 - DA156A - Introduktion till HTML
HT18 - DA156A - Introduktion till HTMLHT18 - DA156A - Introduktion till HTML
HT18 - DA156A - Introduktion till HTMLAnton Tibblin
 
Digital typografi @ Beckmans, december 2015
Digital typografi @ Beckmans, december 2015Digital typografi @ Beckmans, december 2015
Digital typografi @ Beckmans, december 2015Harald Peter Ström
 
HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)Anton Tibblin
 

Similar to Optimera mera (20)

Webboptimering 25 min
Webboptimering 25 minWebboptimering 25 min
Webboptimering 25 min
 
VT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & BootstrapVT2018 - DA355A - LocalStorage & Bootstrap
VT2018 - DA355A - LocalStorage & Bootstrap
 
VT2019 - DA355A - CSS Grid & Webbramverk
VT2019 - DA355A - CSS Grid & WebbramverkVT2019 - DA355A - CSS Grid & Webbramverk
VT2019 - DA355A - CSS Grid & Webbramverk
 
Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5Responsiv webbdesign + HTML5 + CSS5
Responsiv webbdesign + HTML5 + CSS5
 
Lemoon cms utbildning
Lemoon cms utbildningLemoon cms utbildning
Lemoon cms utbildning
 
HT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med PythonHT23 - DA354A - Webbprogrammering med Python
HT23 - DA354A - Webbprogrammering med Python
 
Webbanalysdagen - Webbanalys: Optimera prestanda
Webbanalysdagen - Webbanalys: Optimera prestandaWebbanalysdagen - Webbanalys: Optimera prestanda
Webbanalysdagen - Webbanalys: Optimera prestanda
 
Så funkar det (del 3) - webben
Så funkar det (del 3) -  webbenSå funkar det (del 3) -  webben
Så funkar det (del 3) - webben
 
HT18 - DA156A - Extra
HT18 - DA156A - ExtraHT18 - DA156A - Extra
HT18 - DA156A - Extra
 
CSS för utskrift
CSS för utskriftCSS för utskrift
CSS för utskrift
 
Spbl Fö6 Designprinciper Och Xml
Spbl Fö6   Designprinciper Och XmlSpbl Fö6   Designprinciper Och Xml
Spbl Fö6 Designprinciper Och Xml
 
Introduktion till HTML
Introduktion till HTMLIntroduktion till HTML
Introduktion till HTML
 
Mindre och snabbare – Cache tips for WordPress developers
Mindre och snabbare – Cache tips for WordPress developersMindre och snabbare – Cache tips for WordPress developers
Mindre och snabbare – Cache tips for WordPress developers
 
HT19 - DA156A - Introduktion till HTML
HT19 - DA156A - Introduktion till HTMLHT19 - DA156A - Introduktion till HTML
HT19 - DA156A - Introduktion till HTML
 
HT17 - DA156A - Sammanfattning av kursen
HT17 - DA156A - Sammanfattning av kursenHT17 - DA156A - Sammanfattning av kursen
HT17 - DA156A - Sammanfattning av kursen
 
HT17 - DA156A - Introduktion till HTML
HT17 - DA156A - Introduktion till HTMLHT17 - DA156A - Introduktion till HTML
HT17 - DA156A - Introduktion till HTML
 
HT16 - DA156A - Introduktion till HTML
HT16 - DA156A - Introduktion till HTMLHT16 - DA156A - Introduktion till HTML
HT16 - DA156A - Introduktion till HTML
 
HT18 - DA156A - Introduktion till HTML
HT18 - DA156A - Introduktion till HTMLHT18 - DA156A - Introduktion till HTML
HT18 - DA156A - Introduktion till HTML
 
Digital typografi @ Beckmans, december 2015
Digital typografi @ Beckmans, december 2015Digital typografi @ Beckmans, december 2015
Digital typografi @ Beckmans, december 2015
 
HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)HT23 - DA106A - Layout (2)
HT23 - DA106A - Layout (2)
 

Optimera mera

  • 1. Grunderna för att: kim thörning | kimthorning@gmail.com | @ze7en 1 / 13
  • 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
  • 5. 5 / 13kim thörning | kimthorning@gmail.com | @ze7en • CSS Sprites av bakgrundsbilder • SpriteMe.org
  • 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=&quot;text/css&quot;> #header { background: url(../i/header-bg.png) no-repeat top center; height: 235px; overflow: hidden; } </style><style type=&quot;text/css&quot;> #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)
  • 12. 12 / 13kim thörning | kimthorning@gmail.com | @ze7en • Gzip • Cache på servern • Optimera databas • Optimera anrop till databas
  • 13. 13 / 13kim thörning | kimthorning@gmail.com | @ze7en • Utnyttja mitt nätverk - .NET, Java, UX, projektledare mm • Kontakta mig för mer information - kimthorning@gmail.com - twitter: @ze7en