1. Piotr Jasiulewicz
OPTYMALIZACJA SERWISÓW WWW
CZ. II

2. 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!

3. 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

4. Łącz pliki, będzie szybciej!
•Zmniejszając
ilość requestów
HTTP, można
znacznie
przyspieszyć
ładowanie strony.

5. Jak oszczędzać łącze?
 Używaj kompresji GZIP / Deflate
 Szeroko obsługiwane
 Bardzo łatwe we wdrożeniu
Rodzaj Bez
Serwis kompresji kompresji Z kompresją %
70.3
www.fotka.pl Gzip 31,239 9,273
17.0
www.nasza-klasa.pl Gzip 230 191
69.2
www.figgy.pl Gzip 11,043 3,399
0.0
forum.php.pl - 51,702 ~9,6

6. 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

7. 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]

8. 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

9. Jaki obrazek?
•Średnio ~50%
Serwis %
tego co pobierasz
obrazków
to obrazki !
Yahoo! 29%
Google 75%
YouTube 62%
•Potencjalnie duży Live.com 64%
Wikipedia 39%
zysk do Facebook 35%
osiągnięcia w
łatwy sposób.

10. Jaki obrazek?
 Wybieraj PNG zamiast GIF
 Zaoszczędzisz średnio ~20%!
GIF PNG PNG
(Palette) (Truecolor)
256 256 do 48 bitów
Ilość kolorów
binarna alpha alpha
Przeźroczystość
Kompatybilność z Prawie wszystkie Wszystkie Wszystkie
przeglądarkami quot;uznawanequot; quot;uznawanequot;
Animacja Tak Nie Nie

11. Jaki obrazek?
•Nie bez Serwis %
powodu duże gif do png
serwisy nie Yahoo! 9,55%
stosują tak Google 22,95%
YouTube 33.82%
szeroko gif’ów. Live.com 19,93%
Wikipedia -
Facebook 17,47%
•Wikipedia nie
używa gif’ów!

12. 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

13. 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!

14. Jaki obrazek?
 Do małych obrazków, miniaturek używaj
jpeg baseline/sequential.

15. Jaki obrazek?
 Do dużych zdjęć używaj jpeg progressive!
(10K+)

16. Jaki obrazek?
 Możesz używać Base64 ( IE sprawia problemy )
<img
src=quot;data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav///
88PD9WqsYmApmZmZtZfYmdakyH5BAQUAP8ALAAAAA
BQAA8AAAPb
WLrc/jDKSVe4OOvNu/9gqARDSRBHegyGMahqO4R0bQcjI
Q8E4BMCQc930JluyGRmdAAcdiigMLVr
ApTYWy5FKM1IQe+Mp+L4rphz+qIOBAUYeCY4p2tGrJZeH
9y79mZsawFoaIRxF3JyiYxuHiMGb5KT
kpFvZj4ZbYeCiXaOiKBwnxh4fnt9e3ktgZyHhrChinONs3cF
AShFF2JhvCZlG5uchYNun5eedRxM
AF15XEFRXgZWWdciuM8GCmdSQ84lLQfY5R14wDB5Lyo
n4ubwS7jx9NcV9/j5+g4JADs= quot; alt=quot;British Blog Directoryquot;
width=quot;80quot; height=quot;15quot; />

17. 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 …

18. 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 „

19. 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: quot;10c24bc-4ab-457e1c1fquot;
HTTP/1.1 304 Not Modifie

20. 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

21. Używaj dobrych narzędzi
 YSlow

22. Używaj dobrych narzędzi
 Tamper Data

23. Używaj dobrych narzędzi
 Firebug

24. 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:

25. 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

26. Co daje XML/XSLT?
 Upraszcza kod wprowadzając część MVC

27. Co daje XML/XSLT?
 Przykład prostego połączenia XML z XSL
XML XSL

28. 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=quot;xsl.xslquot;/>

29. Co daje XML/XSLT?
 Zysk jaki osiągamy używając technologii
XML/XSLT
Rozmiar
( KB )
18
XML mojego profilu na fotce
36
XSL profilu
171
XSL główny
68
xHTML mojego profilu

30. Co daje XML/XSLT?
 Wbrew pozorom oszczędność nie jest liniowa!
Oszczędność
150
100
50
0
Oszczędność
1 2 3 4 5 6 7 8 9 10
-50
-100
-150
-200

31. XML/XSLT vs SMARTY
XML / XSLT SMARTY
Client-side Server-side
Pozwala prowadzić MVC Pozwala prowadzić MVC
Prosty do nauczenia Prosty do nauczenia
Używa cache przeglądarki Nie używa cache przeglądarki
Zasadniczo oszczędza łącze Zasadniczo nic nie oszczędza
Może wymagać dostępu do serwera Nie musi wymagać dostepu do
serwera
Czasem trzeba wysłać jako Zawsze trzeba wysłać jako
przeparsowaną treść przeparsowaną treść

32. Potencjalne problemy XSL’a
 Kompatybilność
 Stare przeglądarki ( np.: IE 5 )
 Opera i POST
 Urządzenia mobilne
 Narzut przy przetwarzaniu server-side

33. „Gdyby liczyła sie ilość, to McDonald’s byłby najlepszą restauracją na świecie.”
DZIĘKI ZA UWAGĘ!