ݺߣ

ݺߣShare a Scribd company logo

Optymalizacja Serwisów WWW

•
•
Paweł Harajda
Paweł Harajda
1 of 33
Download to read offline
Piotr Jasiulewicz OPTYMALIZACJA SERWISÓW WWW CZ. II
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ów HTTP, można znacznie przyspieszyć ładowanie strony.
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
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% 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.
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
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!
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 ) <img src=/slideshow/optymalizacja-serwisw-www-presentation-932355/932355/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; />
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: quot;10c24bc-4ab-457e1c1fquot; 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=quot;xsl.xslquot;/>
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
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
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ść
Potencjalne problemy XSL’a  Kompatybilność  Stare przeglądarki ( np.: IE 5 )  Opera i POST  Urządzenia mobilne  Narzut przy przetwarzaniu server-side
„Gdyby liczyła sie ilość, to McDonald’s byłby najlepszą restauracją na świecie.” DZIĘKI ZA UWAGĘ!

More Related Content

Optymalizacja Serwisów WWW

  • 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=/slideshow/optymalizacja-serwisw-www-presentation-932355/932355/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
  • 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Ę!