Wydajność aplikacji webowych (1)

Transkrypt

1 Wstęp Wydajność aplikacji webowych (1) Systemy Rozproszone Paweł Bedyński Matematyka Informatyka i Mechanika Uniwersytet Warszawski 19/11/2009

2 Wstep O czym bedzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzedzia Zawez anie tematu Aplikacje webowe Strony internetowe Wydajne aplikacje szybkos c meta tres c tres c Paweł Bedyn ski Wydajnos c aplikacji webowych (1)

6 Wstęp O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Frontend vs. Backend - sens życia według sponsora odcinka igoogle - pusty cache Sponsor Odcinka Steve Souders

7 Wstęp O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Frontend vs. Backend - sens życia według sponsora odcinka igoogle - pusty cache Sponsor Odcinka Steve Souders igoogle - primed cache relacja to 17% na backend i 83% na frontend.

8 Wstęp Frontend vs Backend - w rzeczywistości O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia

9 Frontend vs Backend Wstęp O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Empty cache i primed cache Testy S.Soudersa na Yahoo sztuczne zdjecie z Expires w przeszłości i Last-Modified stałym i... też w przeszłości dwa możliwe kody 200 pusty cache 304 mam to zdjecie w tej wersji - ok ta wersja jest dobra. (logi z serwera) po wyrównaniu ok 20% zapytań pochodzilo od przegladarek z pustym cachem

10 Frontend vs Backend Wstęp O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Jednak frontend 80-90% czasu który użytkownik czeka na start strony to frontend. Zacznijmy od niego. większy potencjał usprawnień prostota dbanie o backend jest droższe, to sa duże projekty a i tak z perspektywy odbiorcy jest to prawie bez znaczenia potwierdzone działanie

11 Wstęp Dlaczego dbanie o wydajność jest istotne O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Google +500ms skutkuje -20% ruchu Sponsor Odcinka Steve Souders

12 Wstęp Dlaczego dbanie o wydajność jest istotne O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Google +500ms skutkuje -20% ruchu Sponsor Odcinka Yahoo +400ms skutkuje -5%-9% ruchu Steve Souders

13 Wstęp Dlaczego dbanie o wydajność jest istotne O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Google +500ms skutkuje -20% ruchu Sponsor Odcinka Yahoo +400ms skutkuje -5%-9% ruchu Amazon +100ms skutkuje -1% sprzedaży to około $ rocznie (zysku a nie obrotu) Steve Souders

14 Wstęp Dlaczego dbanie o wydajność jest istotne O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Google +500ms skutkuje -20% ruchu Sponsor Odcinka Yahoo +400ms skutkuje -5%-9% ruchu Amazon +100ms skutkuje -1% sprzedaży to około $ rocznie (zysku a nie obrotu) troche angielszczyzny carrying coal to Newcastle Steve Souders

15 Standardowe dwie drogi Wstęp O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Droga pierwsza APTIMIZE i podobne

16 Standardowe dwie drogi Wstęp O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Droga pierwsza APTIMIZE i podobne Droga druga zrób to samemu

17 Wstęp Narzędzia rozwijane przez Google O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Web Page Analysis Page Speed - Open source Firefox/Firebug Add-on that evaluates the performance of web pages and gives suggestions for improvement. Chrome Developer Tools - Tools included in Google Chrome that let you edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can also use them to optimize web page performance by profiling CPU and memory usage. Resource Optimization Closure Compiler - Optimize the speed and size of your JavaScript. Development tools Closure Tools - Use the Closure Compiler, Closure Library, and Closure Templates to build rich web applications with JavaScript that is faster, more powerful, and more optimized..

18 Wstęp Narzędzia rozwijane przez innych producentów O czym będzie ta prezentacja, a o czym nie Uzasadnienie biznesowe i sponsor Narzędzia Development Cuzillion Hammerhead OOCSS Web debugging Fiddler 2 Firebug HttpWatch Web page analysis AOL Page Test IBM Page Detailer Microsoft VRTA MySpace Performance Tracker Yahoo! YSlow PHP profiling Xdebug XHProf by Facebook Performance benchmarking httperf mon.itor.us Pylot Resource optimization CSS Sprite Generator JSLint JSMinr Smush It SpriteMe! YUI Compressor

19 funkcja Wstęp brak To typowa sytuacja

20 funkcja Wstęp brak To typowa sytuacja Przegladarka jest bezczynna przez długi okres

21 funkcja Wstęp brak To typowa sytuacja Przegladarka jest bezczynna przez długi okres...może można by to zmienić

22 funkcja Wstęp brak stosujac Funkcja (PHP)

23 funkcja Wstęp brak stosujac Funkcja (PHP) powoduje wysłanie już przetworzonych danych do przegladarki

24 problemy z Wstęp domain blocking- IE7

25 problemy z Wstęp domain blocking- IE7 ob_ w PHP output buffering Transfer-Encoding: chunked - powinien być właczony Gzip 8K jako default (Apache DeflateBufferSize wersje przed 2.2.8) Poxy i antivirusy moga blokować flushing Przegladarki maja minimalne limity na aktywowanie

26 problemy z Wstęp domain blocking- IE7 ob_ w PHP output buffering Transfer-Encoding: chunked - powinien być właczony Gzip 8K jako default (Apache DeflateBufferSize wersje przed 2.2.8) Poxy i antivirusy moga blokować flushing Przegladarki maja minimalne limity na aktywowanie czy pakowanie danych zawsze jest dobre? Safari(2K), Chrome(2K), IE(255B)

27 Wstęp jeśli nie wiesz jak to zrobić......zrób to jak Google

28 Wstęp jeśli nie wiesz jak to zrobić......zrób to jak Google firmujemy wyniki w ciemno zasoby ściagane sa wcześnie przegladarka szybciej renderuje grafike faster user experience

29 co to jest selektor Wstęp ID selektor kod CSS wyjaśnienie wybiera element, którego atrybut ID ma wartość toc

30 co to jest selektor Wstęp ID selektor selektor klasy kod CSS wyjaśnienie wybiera elementy z class=chapter

31 co to jest selektor Wstęp ID selektor selektor klasy selektor typu kod CSS wyjaśnienie wybiera wszystkie elementy A w drzewie dokumentu

32 co to jest selektor Wstęp ID selektor selektor klasy selektor typu selektor następnika kod CSS wyjaśnienie wybiera element z ID=toc występujacy bezpośrenio po H1

33 co to jest selektor Wstęp ID selektor selektor klasy selektor typu selektor następnika sektor dziecka kod CSS wyjaśnienie wybiera wszystkie elemtny LI, których rodzice maja ID=toc

34 co to jest selektor Wstęp ID selektor selektor klasy selektor typu selektor następnika sektor dziecka selektor potomka kod CSS wyjaśnienie wybiera wszystkie elementy A, których przodek ma ID=toc

35 co to jest selektor Wstęp ID selektor selektor klasy selektor typu selektor następnika sektor dziecka selektor potomka selektor uniwersalny kod CSS wyjaśnienie wybiera wszystkie elementy

36 co to jest selektor Wstęp ID selektor selektor klasy selektor typu selektor następnika sektor dziecka selektor potomka selektor uniwersalny selektor po atrybutach kod CSS wyjaśnienie wybiera elementy, których atrybuty pasuja do zadanego wzorca

37 co to jest selektor Wstęp ID selektor selektor klasy selektor typu selektor następnika sektor dziecka selektor potomka selektor uniwersalny selektor po atrybutach psudo klasy i elementy kod CSS wyjaśnienie wybiera elementy w zależności od innej akcji (np. pozycji myszki)

38 Wstęp pisanie wydajnych CSSów - przyczyna gdzie jest haczyk?

39 Wstęp pisanie wydajnych CSSów - przyczyna gdzie jest haczyk? The style system matches a rule by starting with the rightmost selector and moving to the left through the rule s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.

40 Wstęp pisanie wydajnych CSSów - przyczyna gdzie jest haczyk? The style system matches a rule by starting with the rightmost selector and moving to the left through the rule s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch. przykład 1 szuka wszystkich elementów LI w treści dokumentu i sprawdza czy ich rodzic ma ID= toc

41 Wstęp pisanie wydajnych CSSów - przyczyna gdzie jest haczyk? The style system matches a rule by starting with the rightmost selector and moving to the left through the rule s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch. przykład 1 przykład 2 szuka wszystkich elementów LI w treści dokumentu i sprawdza czy ich rodzic ma ID= toc szuka wszystkich elementów A w treści dokumentu i sprawdza czy którykolwiek przodek ma ID= toc

42 Wstęp pisanie wydajnych CSSów - wnioski unikaj uniwersalnych selektorów

43 Wstęp pisanie wydajnych CSSów - wnioski unikaj uniwersalnych selektorów unikaj kombinacji z selektorami ID źle DIV #navbar {} dobrze #navbar {}

44 Wstęp pisanie wydajnych CSSów - wnioski unikaj uniwersalnych selektorów unikaj kombinacji z selektorami ID źle DIV #navbar {} dobrze #navbar {} unikaj nieokreśloności źle UL LI A {} lepiej UL > LI > A {}

45 Wstęp pisanie wydajnych CSSów - wnioski unikaj uniwersalnych selektorów unikaj kombinacji z selektorami ID źle DIV #navbar {} dobrze #navbar {} unikaj nieokreśloności źle UL LI A {} lepiej UL > LI > A {} unikaj relacji dziecko/potomek lepiej UL > LI > A {} najlepiej.li-anchor {}

46 Wstęp po co to komu... testowanie ekstremalne Jon Sykes

47 Wstęp po co to komu... testowanie ekstremalne Jon Sykes elementow A 1 brak arkusza stylów 2 tylko tag: A {} 3 class:.a00001 {}.a00002 {} 4 potomek: DIV DIV DIV P A {} 5 dziecko: DIV > DIV > DIV > P > A.a00001 {}

48 Wstęp po co to komu... testowanie ekstremalne Jon Sykes elementow A 1 brak arkusza stylów 2 tylko tag: A {} 3 class:.a00001 {}.a00002 {} 4 potomek: DIV DIV DIV P A {} 5 dziecko: DIV > DIV > DIV > P > A.a00001 {} mało wiarygodne testy

49 Wstęp po co to komu... testowanie ekstremalne (2) Ciekawy przypadek IE7

50 rzeczywiste przypadki Wstęp

51 Rzeczywiste przypadki (1) Wstęp Test reguł VS reguł pytanie czy zatem kosztowne selektory na typowym (realistycznym) poziomie nie sa tak kosztowne, jak by się to mogło wywadać Średnia 30ms

52 Rzeczywiste przypadki (1) Wstęp Test reguł VS reguł pytanie czy zatem kosztowne selektory na typowym (realistycznym) poziomie nie sa tak kosztowne, jak by się to mogło wywadać odpowiedź może selektor DIV DIV DIV P A.class0007 {} wcale nie jest taki kosztowny Średnia 30ms

53 Rzeczywiste przypadki (2) Wstęp Test reguł VS reguł poprzednio badaliśmy selektor DIV DIV DIV P A.class0007 {} teraz badamy selektor A.class0007 * {} Średnia 2126ms

54 Rzeczywiste przypadki (2) Wstęp Test reguł VS reguł poprzednio badaliśmy selektor DIV DIV DIV P A.class0007 {} teraz badamy selektor A.class0007 * {} Średnia 2126ms wnioski kluczowy jest selektor pierwszy z prawej. optymalizowanie CSSów pod względem wydajności oprócz oczywistych przypadków, ma sens tylko przy dość dużych projektach (dużych plikach CSS)

55 właczamy GZIPa Wstęp Zasada Google Page Speed Compressing resources with gzip can reduce the number of bytes sent over the network. HTTP >=1.1 request: Accept-Encoding : gzip, deflate response: Content-Encoding : gzip Apache 2.x AddOutputFilterByType DEFLATE text/html text/css application/x-javascript w pliku konfiguracyjnym

56 Wstęp korzyści z właczenia GZIPa co z tego mamy do 70% redukcji w transferze

57 Wstęp korzyści z właczenia GZIPa co z tego mamy do 70% redukcji w transferze i to nie tylko HTML ale również JavaStript, CSS, XML, JSON

58 Wstęp korzyści z właczenia GZIPa co z tego mamy do 70% redukcji w transferze i to nie tylko HTML ale również JavaStript, CSS, XML, JSON

59 Wstęp No to właczyliśmy GZIPa. Problem z głowy? Ale...

60 Wstęp No to właczyliśmy GZIPa. Problem z głowy? Ale... 15% użytkowników odbiera nieskompresowane dane. Dlaczego?

61 Wstęp No to właczyliśmy GZIPa. Problem z głowy? Ale... 15% użytkowników odbiera nieskompresowane dane. Dlaczego? stare przegladarki Netscape Navigator 3 0.0% Netscape Communicator 4 0.1% Opera % IE <3 0.01%

62 Wstęp No to właczyliśmy GZIPa. Problem z głowy? Ale... 15% użytkowników odbiera nieskompresowane dane. Dlaczego? stare przegladarki Netscape Navigator 3 0.0% Netscape Communicator 4 0.1% Opera % IE <3 0.01% Podpowiedź większość requestów pochodzi z Bliskiego Wschodu i Watykanu

63 biedne 15% - przyczyny Wstęp przyczyna 1 (ok. 14%) Brakuje wpisu Accept-Encoding w nagłówku requesta przyczyna 2 (ok. 1%) Czasem nagłowek jest celowo zniekształcony Accept-EncodXng: gzip, deflate X-cept-Encoding: gzip, deflate XXXXXXXXXXXXXXX: XXXXXXXXXXXXX przyczyna 3 proxy i antywirusy celowo wyłaczaj a GZIPa aby łatwiej filtrować odpowiedzi

64 Co można zrobić. Wstęp nie zakładać że kompresja zadziała zmniejszyć transferowane dane poprzez: minimalizacje HTML, JavaScript, CSS używanie CSS, zamiast wpisywania stylów ręcznie (bo to generuje wiecej znaczków) używanie aliasów na długie nazwy (JavaScripts)

65 Thank you! Wstęp Thank you Urlografia

66 URLografia Wstęp Thank you Urlografia Główne źródło 1 Wykłady Steve a Soudersa na YouTube 2 Wykorzystano zdjęcia i inne materiały z prezentacji Steve a Soudersa Źródła 1 Kanał na YouTube 2 Steve Souders home page 3 Steve Souders 14 rules 4 Google page speed - Best Practices speed/page-speed/docs/rules_intro.html 5 ComparePages 6 Aptimize 7 SpriteMe 8 Browserscope