• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
YSlow
 

YSlow

on

  • 1,715 views

 

Statistics

Views

Total Views
1,715
Views on SlideShare
987
Embed Views
728

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 728

http://tech.3camp.pl 686
http://www.3camp.pl 41
http://static.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    YSlow YSlow Presentation Transcript

    • 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 post-load
    • 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>
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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; }
    • 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
    • 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
    • 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
    • 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
    • YSlow http://developer.yahoo.com/yslow/
    • 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)