Przyspieszanie działania serwisów WWW
18
-
Upload
michalfelski -
Category
Technology
-
view
1.820 -
download
0
Transcript of Przyspieszanie działania serwisów WWW
Czas ładowania strony: 7,903s
html: 849 ms (10,7 %)
www.adobe.com
1.5Mbps ADSL
Czas ładowania strony: 5.583s
html: 816 ms (14,6 %)
sklep.etpro.pl
1.5Mbps ADSL
Czas ładowania strony: 9,796s
html: 915 ms (9,3 %)
www.gratka.pl
1.5Mbps ADSL
Jak najmniej żądań
łączenie skryptów łączenie CSS mapy obrazkowe obrazy CSS sprites osadzone obrazy preload i post-load
Jak najmniej żądań – mapy obrazkowe
server-side <a href="toolbar.php"><img ismap=”ismap” src="toolbar.gif" /></a> → http://toolbar.php?127,13
client-side<img usemap="#map1" border=0 src="toolbar.gif" /><map name="map1"> <area shape="rect" coords="0,0,31,31" href="add.php" title="Add file"> …</map>
Jak najmniej żądań – obrazy CSS sprites
<span style=” width: 32px; height: 32px; background-image: url('sprites.gif'); background-position: -260px -90px;"></span>
Rozmiar jednego obrazka jest mniejszy niż kliku mniejszych
Jak najmniej żądań – osadzone obrazy
<IMG ALT=”star”SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
IE dopiero od IE 8Firefox akceptuje do 100 KB
Jak najmniej żądań
Witryna internetowa JS CSS Obrazy Liczba żądań Rozmiar [KB]allegro.pl 6 1 19 36 111fotka.pl 11 2 34 50 149google.pl 1 0 2 5 22interia.pl 9 1 128 142 437nasza-klasa.pl 18 6 30 58 315onet.pl 2 0 72 90 734wikipedia.org 13 12 32 58 289wp.pl 2 0 89 101 583youtube.com 4 1 20 28 147
adobe.com 16 11 36 66 852sklep.etpro.pl 2 3 16 22 158gratka.pl 15 4 36 62 289
Pamięć podręcznaWitryna internetowa Liczba żądań
z pustym buforemLiczba żądań
z pełnym buforem
allegro.pl 36 3fotka.pl 50 16google.pl 5 2interia.pl 142 27nasza-klasa.pl 58 13onet.pl 90 13wikipedia.org 58 3wp.pl 101 18youtube.com 28 12
adobe.com 66 16sklep.etpro.pl 22 1gratka.pl 62 13
Pamięć podręcznaExpires: Tue, 09 Mar 2010 19:15:02 GMT
Cache-Control: max-age=31104000
Nazwy plików przy wykorzystaniu cacheglobal.css?123608120 reklama.js?20090310 123603675_image.gif
Konfiguracja nagłówka ETagETag: "c8897e-aee-4165acf0"Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT
If-None-Match: "c8897e-aee-4165acf0"If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT
FileETag INode MTime SizeFileETag none
Optymalizacja skryptów i CSS
Zewnętrzne skrypty CSSCSS jak najwyżej (sekcja HEAD)LINK zamiast @importunikać wyrażeń w CSSskrypty jak najniżej (przed </body>)minimalizacja skryptów i CSSunikać duplikowania skryptów
body {width: expression(document.body.clientWidth < 600 ? “600px”:“auto” );width-min: 600px;}
Optymalizacja obrazówoptymalna 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="100" height="100" src="image.jpg" alt="" />
obiekty poniżej 25K
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ń AJAXGET zamiast POSTunikanie błędu 404kompresja gzip
Kompresja odpowiedzi (GZIP)
Zmniejsza czas pobierania treściWspierane przez ponad 90% przeglądarekNiezalecane dla obrazków i PDFKompresja czy obsługa proxy?
Żądanie HTTPAccept-Encoding: gzip, deflate
Odpowiedź HTTPContent-Encoding: gzip
Buforowanie proxy:
Vary: Accept-EncodingVary: Accept-Encoding, User-AgentVary: *Cache-Control: private
CDN – Content Delivery Network
Akamai, Limelight, SAVVIS, Mirror ImageValueCDN, Hostway, Amazon CloudFrontCoralCDN, CoDeeNGlobuleTPhttp://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js
YSlow
http://developer.yahoo.com/yslow/
YSlow - wyniki
Witryna internetowa Wynikallegro.pl B (81)fotka.pl F (57)google.pl A (95)interia.pl F (54)nasza-klasa.pl F (43)onet.pl F (44)wikipedia.org D (68)wp.pl F (48)youtube.com D (67)
adobe.com F (29)sklep.etpro.pl B (88)gratka.pl F (41)
Witryna internetowa Wynikblogger.com C (71)facebook.com C (79)google.com A (96)live.com A (97)msn.com F (49)myspace.com D (64)orkut.com A (98)wikipedia.org D (68)yahoo.com A (96)youtube.com D (67)
TOP 10 Polska TOP 10 Global
