Przyspieszanie działania
    serwisów WWW




               Michał Felski
               michal.felski@gforces.pl
www.adobe.com

Czas ładowania strony: 7,903s

html: 849 ms (10,7 %)




       1.5Mbps ADSL
sklep.etpro.pl


Czas ładowania strony: 5.583s

html: 816 ms (14,6 %)




      1.5Mbps ADSL
www.gratka.pl


Czas ładowania strony: 9,796s

html: 915 ms (9,3 %)




      1.5Mbps ADSL
Jak najmniej żądań

  łączenie skryptów
  łączenie CSS
  mapy obrazkowe
  obrazy CSS sprites
  osadzone obrazy
  preload i...
Jak najmniej żądań – mapy obrazkowe



   server-side
<a href=quot;toolbar.phpquot;><img ismap=”ismap” src=quot;toolbar.gi...
Jak najmniej żądań – obrazy CSS sprites
                                        <span style=”
                            ...
Jak najmniej żądań – osadzone obrazy

<IMG ALT=”star”
SRC=quot;data:image/gif;base64,R0lGODlhDAAMALMLA
  PN8ffBiYvWWlvrKy/...
Jak najmniej żądań
 Witryna internetowa   JS   CSS   Obrazy   Liczba żądań   Rozmiar [KB]
 allegro.pl             6    1  ...
Pamięć podręczna
   Witryna internetowa     Liczba żądań       Liczba żądań
                         z pustym buforem   z ...
Pamięć podręczna
 Expires: Tue, 09 Mar 2010 19:15:02 GMT

 Cache-Control: max-age=31104000



Nazwy plików przy wykorzysta...
Optymalizacja skryptów i CSS
    Zewnętrzne skrypty CSS
    CSS jak najwyżej (sekcja HEAD)
    LINK zamiast @import
    un...
Optymalizacja obrazów
    optymalna liczba kolorów
# identify -verbose image.gif

    PNG zamiast GIF
# convert image.gif ...
Optymalizacja zapytań

    Rozpraszanie zapytań na kilka domen
(yimg.com, ytimg.com, images-amazon.com)

    redukcja zapy...
Kompresja odpowiedzi (GZIP)


   Zmniejsza czas pobierania treści
   Wspierane przez ponad 90% przeglądarek
   Niezalecane...
CDN – Content Delivery Network




Akamai, Limelight, SAVVIS, Mirror Image
ValueCDN, Hostway, Amazon CloudFront
CoralCDN, ...
YSlow




 http://developer.yahoo.com/yslow/
YSlow - wyniki
        TOP 10 Polska                     TOP 10 Global

                                 Witryna interneto...
Upcoming SlideShare
Loading in …5
×

Przyspieszanie działania serwisów WWW

2,048 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,048
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Przyspieszanie działania serwisów WWW

  1. 1. Przyspieszanie działania serwisów WWW Michał Felski michal.felski@gforces.pl
  2. 2. www.adobe.com Czas ładowania strony: 7,903s html: 849 ms (10,7 %) 1.5Mbps ADSL
  3. 3. sklep.etpro.pl Czas ładowania strony: 5.583s html: 816 ms (14,6 %) 1.5Mbps ADSL
  4. 4. www.gratka.pl Czas ładowania strony: 9,796s html: 915 ms (9,3 %) 1.5Mbps ADSL
  5. 5. Jak najmniej żądań łączenie skryptów łączenie CSS mapy obrazkowe obrazy CSS sprites osadzone obrazy preload i post-load
  6. 6. Jak najmniej żądań – mapy obrazkowe server-side <a href=quot;toolbar.phpquot;><img ismap=”ismap” src=quot;toolbar.gifquot; /></a> → http://toolbar.php?127,13 client-side <img usemap=quot;#map1quot; border=0 src=quot;toolbar.gifquot; /> <map name=quot;map1quot;> <area shape=quot;rectquot; coords=quot;0,0,31,31quot; href=quot;add.phpquot; title=quot;Add filequot;> … </map>
  7. 7. Jak najmniej żądań – obrazy CSS sprites <span style=” width: 32px; height: 32px; background-image: url('sprites.gif'); background-position: -260px -90px;quot;> </span> Rozmiar jednego obrazka jest mniejszy niż kliku mniejszych
  8. 8. Jak najmniej żądań – osadzone obrazy <IMG ALT=”star” SRC=quot;data:image/gif;base64,R0lGODlhDAAMALMLA PN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5est Lv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAw AAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDB iatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=quot;> IE dopiero od IE 8 Firefox akceptuje do 100 KB
  9. 9. Jak najmniej żądań Witryna internetowa JS CSS Obrazy Liczba żądań Rozmiar [KB] allegro.pl 6 1 19 36 111 fotka.pl 11 2 34 50 149 google.pl 1 0 2 5 22 interia.pl 9 1 128 142 437 nasza-klasa.pl 18 6 30 58 315 onet.pl 2 0 72 90 734 wikipedia.org 13 12 32 58 289 wp.pl 2 0 89 101 583 youtube.com 4 1 20 28 147 adobe.com 16 11 36 66 852 sklep.etpro.pl 2 3 16 22 158 gratka.pl 15 4 36 62 289
  10. 10. Pamięć podręczna Witryna internetowa Liczba żądań Liczba żądań z pustym buforem z pełnym buforem allegro.pl 36 3 fotka.pl 50 16 google.pl 5 2 interia.pl 142 27 nasza-klasa.pl 58 13 onet.pl 90 13 wikipedia.org 58 3 wp.pl 101 18 youtube.com 28 12 adobe.com 66 16 sklep.etpro.pl 22 1 gratka.pl 62 13
  11. 11. Pamięć podręczna Expires: Tue, 09 Mar 2010 19:15:02 GMT Cache-Control: max-age=31104000 Nazwy plików przy wykorzystaniu cache global.css?123608120 reklama.js?20090310 123603675_image.gif Konfiguracja nagłówka ETag ETag: quot;c8897e-aee-4165acf0quot; Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT If-None-Match: quot;c8897e-aee-4165acf0quot; If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT FileETag INode MTime Size FileETag none
  12. 12. Optymalizacja skryptów i CSS Zewnętrzne skrypty CSS CSS jak najwyżej (sekcja HEAD) LINK zamiast @import unikać wyrażeń w CSS skrypty jak najniżej (przed </body>) minimalizacja skryptów i CSS unikać duplikowania skryptów body { width: expression(document.body.clientWidth < 600 ? “600px”:“auto” ); width-min: 600px; }
  13. 13. Optymalizacja obrazów optymalna liczba kolorów # identify -verbose image.gif PNG zamiast GIF # convert image.gif image.png optymalizacja PNG # pngcrush image.png -rem alla -reduce -brute result.png optymalizacja JPG # jpegtran -copy none -optimize -perfect src.jpg dest.jpg nie skalować obrazów w html <img width=quot;100quot; height=quot;100quot; src=quot;image.jpgquot; alt=quot;quot; /> obiekty poniżej 25K
  14. 14. Optymalizacja zapytań Rozpraszanie zapytań na kilka domen (yimg.com, ytimg.com, images-amazon.com) redukcja zapytań DNS (przeciętnie 20-120 ms na zapytanie, blokada równoległego pobierania obiektów) redukcja przekierowań buforowanie zapytań AJAX GET zamiast POST unikanie błędu 404 kompresja gzip
  15. 15. Kompresja odpowiedzi (GZIP) Zmniejsza czas pobierania treści Wspierane przez ponad 90% przeglądarek Niezalecane dla obrazków i PDF Kompresja czy obsługa proxy? Buforowanie proxy: Żądanie HTTP Accept-Encoding: gzip, deflate Vary: Accept-Encoding Vary: Accept-Encoding, User-Agent Odpowiedź HTTP Vary: * Content-Encoding: gzip Cache-Control: private
  16. 16. CDN – Content Delivery Network Akamai, Limelight, SAVVIS, Mirror Image ValueCDN, Hostway, Amazon CloudFront CoralCDN, CoDeeN Globule TP http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js
  17. 17. YSlow http://developer.yahoo.com/yslow/
  18. 18. YSlow - wyniki TOP 10 Polska TOP 10 Global Witryna internetowa Wynik Witryna internetowa Wynik C (71) blogger.com allegro.pl B (81) C (79) facebook.com fotka.pl F (57) A (96) google.com google.pl A (95) A (97) live.com interia.pl F (54) F (49) msn.com nasza-klasa.pl F (43) D (64) myspace.com onet.pl F (44) orkut.com A (98) wikipedia.org D (68) D (68) wikipedia.org wp.pl F (48) A (96) yahoo.com youtube.com D (67) D (67) youtube.com adobe.com F (29) sklep.etpro.pl B (88) gratka.pl F (41)

×