✔   Webbprestanda?                 ✔   Tips!                     ✔   Serversidan                         KlientsidanFredri...
"Komponent"                       Java-    JSONKlient   HTML          JSP    CSS                       Script   /XMLServer...
Hur funkar webben?                    HTML                    CSS                ●   DOM ready                    script  ...
Dagens "take aways"          ●   Effektivare överföring          ●   Få HTTP-anrop          ●   Verktyg
Serversidan      ●   Effektivare överföring          ●   gzip      ●   Få HTTP-anrop          ●   Utnyttja browserns      ...
Komprimera med gzip          ●   50 - 75 % färre bytes              att skicka över linan          ●   bittar = pengar    ...
Använd browserns cache!            ●   Last-Modified            ●   Expires *                ●   E-Tag - stäng av!        ...
Klientsidan      ●   Effektivare överföring          ●   Parallell nedladdning      ●   Få HTTP-anrop          ●   Kombine...
LABjs.com - Kyle Simpson●   Laddar JS parallellt●   Exekverar enligt    utpekad ordning●   Blockerar inte andra    resurse...
FUBC...<head><script>if (google.j.b)  document.body.style.visibility=hidden;</script></head><body>...
Få HTTP-anrop       ●   Kombinera CSS-filer       ●   Kombinera JS-filer       ●   CSS sprites           SpriteMe       ● ...
Packa bilder●   smush.it●   EFWS
Fyll cachen!      ●   Dela CSS, JS och          bild-sprites i två delar:          start och övrigt      ●   Optimera star...
Kommentera bort JavaScript●   Genom att             <script language...>    kommentera ut all     /*    kod evalueras den ...
Applikationen       ●   HTML-optimering       ●   DNS-uppslagningar       ●   Parallella HTTP-           anrop       ●   F...
Parallella HTTP-anrop                  ●   Script                      LABjs
Parallella HTTP-anrop                   ●    DNS-                        uppslag                        tar tid           ...
Börja mäta     ●   Cache (304) och         bytes/besök/sida     ●   Renderingstid         (DOMReady, onLoad)     ●   Affär...
Verktyg
Firebug och Firefox!
YSlow & Google Page Speed            ●   14 regler från HPWS            ●   utskriftsvänlig rapport            ●   smushit...
Douglas Crockford & Steve Souders
Sammanfattning●   Verktyg    ●   Firefox + Firebug    ●   YSlow och        Google Page Speed    ●   SpriteMe, Smush.it●   ...
Sammanfattning       ●   gzip       ●   slå ihop CSS & JS       ●   css sprites       ●   två domäner       ●   LABjs (blo...
References                              http://getfirefox.com/                             http://getfirebug.com/         ...
Fredrik Wendt jsolutions.se
Webboptimering 25 min
Upcoming SlideShare
Loading in …5
×

Webboptimering 25 min

683 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
683
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webboptimering 25 min

  1. 1. ✔ Webbprestanda? ✔ Tips! ✔ Serversidan KlientsidanFredrik Wendt ✔ jsolutions.se ✔ Båda sidor ✔ Verktyg
  2. 2. "Komponent" Java- JSONKlient HTML JSP CSS Script /XMLServer JSP ASP SQL Filer
  3. 3. Hur funkar webben? HTML CSS ● DOM ready script img iframe ● onLoad
  4. 4. Dagens "take aways" ● Effektivare överföring ● Få HTTP-anrop ● Verktyg
  5. 5. Serversidan ● Effektivare överföring ● gzip ● Få HTTP-anrop ● Utnyttja browserns cache – Expires – Last-Modified
  6. 6. Komprimera med gzip ● 50 - 75 % färre bytes att skicka över linan ● bittar = pengar ● bittar = CPU-tid » Accept-Encoding « Content-Encoding
  7. 7. Använd browserns cache! ● Last-Modified ● Expires * ● E-Tag - stäng av! ● Content-Cache STOR besparings- potential!
  8. 8. Klientsidan ● Effektivare överföring ● Parallell nedladdning ● Få HTTP-anrop ● Kombinera JS, CSS och bilder
  9. 9. LABjs.com - Kyle Simpson● Laddar JS parallellt● Exekverar enligt utpekad ordning● Blockerar inte andra resurser (CSS & bilder)● Varning: FUBC
  10. 10. FUBC...<head><script>if (google.j.b) document.body.style.visibility=hidden;</script></head><body>...
  11. 11. Få HTTP-anrop ● Kombinera CSS-filer ● Kombinera JS-filer ● CSS sprites SpriteMe ● Komprimera bilder Smush.it
  12. 12. Packa bilder● smush.it● EFWS
  13. 13. Fyll cachen! ● Dela CSS, JS och bild-sprites i två delar: start och övrigt ● Optimera startsidan till att bara ladda start-delarna ● Efter onLoad på startsida, ladda övrigt-delarna
  14. 14. Kommentera bort JavaScript● Genom att <script language...> kommentera ut all /* kod evalueras den var mylib = function() { snabbt av browsern. this.nice = function() ...● Plocka bort }(); kommentarerna, kör eval() och voila! */ </script>● Ladda i IFRAME t ex
  15. 15. Applikationen ● HTML-optimering ● DNS-uppslagningar ● Parallella HTTP- anrop ● Få HTTP-anrop ● Flush early
  16. 16. Parallella HTTP-anrop ● Script LABjs
  17. 17. Parallella HTTP-anrop ● DNS- uppslag tar tid ● DNS-info ligger inte i cachen ● tumregel: 2 till 4 domäner
  18. 18. Börja mäta ● Cache (304) och bytes/besök/sida ● Renderingstid (DOMReady, onLoad) ● Affärs-/nyckelvärden såsom antal besök, avslutade köp, genomsnittlig besökstid, låtar lyssnade, bilder visade
  19. 19. Verktyg
  20. 20. Firebug och Firefox!
  21. 21. YSlow & Google Page Speed ● 14 regler från HPWS ● utskriftsvänlig rapport ● smushit ● Minification
  22. 22. Douglas Crockford & Steve Souders
  23. 23. Sammanfattning● Verktyg ● Firefox + Firebug ● YSlow och Google Page Speed ● SpriteMe, Smush.it● Börja mäta det som känns meningsfullt – bytes/besök – YSlow-betyg – DOMReady, onLoad
  24. 24. Sammanfattning ● gzip ● slå ihop CSS & JS ● css sprites ● två domäner ● LABjs (blockerande JS) ● använd cachen Last-Modified, Expires
  25. 25. References http://getfirefox.com/ http://getfirebug.com/ http://developer.yahoo.com/yslow/ http://code.google.com/speed/page-speed/ https://addons.mozilla.org/en-US/firefox/addon/60 Photos from http://flickr.com/naoh/ (man in front of laptop) http://flickr.com/ipom/ (Souders and Crockford) This document http://creativecommons.org/licenses/by-sa/3.0/ All other graphics comes from gnome-icon-theme (GPL), /usr/share/icons/gnome/scalable/*/*.svg converted to png Ulisse Perusin <uli.peru@gmail.com>, Riccardo Buzzotta <raozuzu@yahoo.it>, Josef Vybíral <cornelius@vybiral.info>, Hylke Bons <h.bons@student.rug.nl>, Ricardo González <rick@jinlabs.com>, Lapo Calamandrei <calamandrei@gmail.com>, Rodney Dawes<dobey@novell.com>, Luca Ferretti <elle.uca@libero.it>, Tuomas Kuosmanen <tigert@gimp.org>, Andreas Nilsson <nisses.mail@home.se>, Jakub Steiner <jimmac@novell.com>
  26. 26. Fredrik Wendt jsolutions.se

×