Download - Optymalizacja Serwisów WWW
OPTYMALIZACJA SERWISÓW WWW CZ. II
Piotr Jasiulewicz
Co, jak, gdzie?
Na czym i jak oszczędzać?
Nie płać za coś co możesz mieć za darmo.
Jakich technologii użyć i czemu akurat XSL + XML.
„80% zysku wyciągami z optymalizacji 20% serwisu WWW”
Dział optymalizacji Yahoo!
Po co optymalizować?
500 ms wolniej - 20% spadku ruchu (Google)
400 ms wolniej – 5-9% spadku ruchu na pełnej stronie* (Yahoo!)
100 ms wolniej – 1% spadek sprzedaży (Amazon)
*User wychodzi zanim załaduje się cała strona
Łącz pliki, będzie szybciej!
•Zmniejszając ilość requestówHTTP, można znacznie przyspieszyć ładowanie strony.
Jak oszczędzać łącze?
Używaj kompresji GZIP / Deflate
Szeroko obsługiwane
Bardzo łatwe we wdrożeniu
SerwisRodzaj
kompresjiBez
kompresji Z kompresją %
www.fotka.pl Gzip 31,239 9,273 70.3
www.nasza-klasa.pl Gzip 230 191 17.0
www.figgy.pl Gzip 11,043 3,399 69.2
forum.php.pl - 51,702 ~9,6 0.0
Korzystaj z pomocy innych
Google umożliwia serwowanie js ‘ów jQuery
jQuery UI
Prototype
script.aculo.us
MooTools
Dojo
SWFObject
Yahoo! User Interface Library (YUI)
Banalne we wdrożeniu
Przenieś Feedy RSS
RSS potrafi „zjeść” ponad 50% transferu małego serwisu
Użyj redirecta, oszczędzaj transfer!
RewriteCond User-Agent: (?!FeedBurner).*
RewriteRule .*index.xml$|.*index.rdf$|.*atom.xml$
http://feeds.feedburner.com/codinghorror/ [I,RP,L]
Masz galerię, serwuj z S3
Zaoszczędzisz dużo łącza ( pieniędzy )
Zaoszczędzisz na infrastrukturze ( dyski )
Polepszysz „user experience”
Nie zbudujesz lepszej infrastruktury :-]
Dość łatwe we wdrożeniu
Jaki obrazek?
•Średnio ~50% tego co pobierasz to obrazki !
•Potencjalnie duży zysk do osiągnięcia w łatwy sposób.
Serwis % obrazków
Yahoo! 29%Google 75%YouTube 62%Live.com 64%Wikipedia 39%Facebook 35%
Jaki obrazek?
Wybieraj PNG zamiast GIF
Zaoszczędzisz średnio ~20%!
GIF PNG (Palette)
PNG (Truecolor)
Ilość kolorów 256 256 do 48 bitów
Przeźroczystość binarna alpha alpha
Kompatybilność z przeglądarkami
Prawie wszystkie Wszystkie "uznawane"
Wszystkie "uznawane"
Animacja Tak Nie Nie
Jaki obrazek?
•Nie bez powodu duże serwisy nie stosują tak szeroko gif’ów.
•Wikipedia nie używa gif’ów!
Serwis % gif do png
Yahoo! 9,55%Google 22,95%YouTube 33.82%Live.com 19,93%Wikipedia -Facebook 17,47%
Jaki obrazek?
Zgniatanie PNG – PNG Crushing to dodatkowa oszczędność!
pngcrush http://pmt.sourceforge.net/pngcrush/
Pngrewrite http://entropymine.com/jason/pngrewrite/
OptiPNG http://optipng.sourceforge.net
Przykład:
optipng −i1 −o7 −v −full −sim experiment.png −log experiment.log
Jaki obrazek?
JPEG zawiera mnóstwo zbędnych informacji
Komentarze
Exif
Dodatkowe dane z aplikacji np. Adobe Photoshop
Inne ( miniaturki, audio )
Od tego jak zapiszemy JPEG’a zależy jego wyświetlanie na stronie!
Jaki obrazek?
Do małych obrazków, miniaturek używaj
jpeg baseline/sequential.
Jaki obrazek?
Do dużych zdjęć używaj jpeg progressive! (10K+)
Jaki obrazek?
Możesz używać Base64 ( IE sprawia problemy )
<imgsrc="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAABQAA8AAAPb WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjIQ8E4BMCQc930JluyGRmdAAcdiigMLVr ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH9y79mZsawFoaIRxF3JyiYxuHiMGb5KT kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cFAShFF2JhvCZlG5uchYNun5eedRxMAF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyon4ubwS7jx9NcV9/j5+g4JADs= " alt="British Blog Directory" width="80" height="15" />
Używaj dwóch domen
Domena do zawartości dynamicznej („www.”)
Np.: HTML/XML, .xsl
Domena do zawartości statycznej (np. „s.”)
Cookie-free
Np.:.jpg, .gif,.png, .css , .js …
Ustawiaj wygasanie pliku…
Pliki w zasadzie się nie zmieniają
Oszczędzasz łącze
Proste we wprowadzeniu
„Expires: Thu, 01 Dec 2010 16:00:00 GMT”
„Last-Modified: Wed, 15 Nov 1995 04:58:08 GMT „
Skonfiguruj ETagi
Konfiguracja Entity tags może zmniejszyć obciążenie łącza
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modifie
Trzymaj usera na bieżąco
Wersjonowanie plików Pozawala na szybkie wprowadzanie zmian
Obchodzi cache przeglądarek
Stosunkowo łatwe we wdrożeniu
a) STYLE.223.CSS
b) STYLE.CSS:223
a) Logo.12.png
b) Logo.png:12
Używaj dobrych narzędzi
YSlow
Używaj dobrych narzędzi
Tamper Data
Używaj dobrych narzędzi
Firebug
Nie bójmy się niestandardów
Brak zgodności z W3C niewiele znaczy
Kod ma dobrze działać/wyglądać dla usera, a nie w „Pokaż źródło”
Kod Google.pl:
Co to XML/XSLT?
XSL z ang. Extensible Stylesheet Language
Formatuje dokumenty XML na dokumenty xHTML lub inne dokumenty XML
Na XSL składa się:
XSLT
XPath
Inne
Co daje XML/XSLT?
Upraszcza kod wprowadzając część MVC
Co daje XML/XSLT?
Przykład prostego połączenia XML z XSL
XML XSL
Co daje XML/XSLT?
Dzięki importowaniu xsli wykorzystujemy dany stylesheet na całym serwisie
Jeden prosty wpis wystarcza, aby połaczyćdwa pliki xsl’a:
<xsl:import href="xsl.xsl"/>
Co daje XML/XSLT?
Zysk jaki osiągamy używając technologii XML/XSLT
Rozmiar( KB )
XML mojego profilu na fotce 18XSL profilu 36XSL główny 171xHTML mojego profilu 68
Co daje XML/XSLT?
Wbrew pozorom oszczędność nie jest liniowa!
-200
-150
-100
-50
0
50
100
150
1 2 3 4 5 6 7 8 9 10
Oszczędność
Oszczędność
XML/XSLT vs SMARTY
XML / XSLT SMARTYClient-side Server-sidePozwala prowadzić MVC Pozwala prowadzić MVCProsty do nauczenia Prosty do nauczeniaUżywa cache przeglądarki Nie używa cache przeglądarkiZasadniczo oszczędza łącze Zasadniczo nic nie oszczędzaMoże wymagać dostępu do serwera Nie musi wymagać dostepu do
serweraCzasem trzeba wysłać jako przeparsowaną treść
Zawsze trzeba wysłać jako przeparsowaną treść
Potencjalne problemy XSL’a
Kompatybilność
Stare przeglądarki ( np.: IE 5 )
Opera i POST
Urządzenia mobilne
Narzut przy przetwarzaniu server-side
DZIĘKI ZA UWAGĘ!
„Gdyby liczyła sie ilość, to McDonald’s byłby najlepszą restauracją na świecie.”