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)