Przyspieszanie działania serwisów WWW

  • 1,775 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,775
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Przyspieszanie działania serwisów WWW Michał Felski michal.felski@gforces.pl
  • 2. www.adobe.com Czas ładowania strony: 7,903s html: 849 ms (10,7 %) 1.5Mbps ADSL
  • 3. sklep.etpro.pl Czas ładowania strony: 5.583s html: 816 ms (14,6 %) 1.5Mbps ADSL
  • 4. www.gratka.pl Czas ładowania strony: 9,796s html: 915 ms (9,3 %) 1.5Mbps ADSL
  • 5. Jak najmniej żądań łączenie skryptów łączenie CSS mapy obrazkowe obrazy CSS sprites osadzone obrazy preload i post-load
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. YSlow http://developer.yahoo.com/yslow/
  • 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)