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