[4developers] - Wydajność webowa - jak to ugryźć? (Konrad Kokosa)
•Download as PPTX, PDF•
0 likes•76 views
Wydajność aplikacji internetowych to nie jest rzecz, który możemy dodać pod koniec projektu, gdy się nam o tym przypomni. Chcąc mieć wydajny system, temat wydajności musi nam towarzyszyć od początku istnienia projektu. Albo nawet wcześniej, od początku kształtowania wymagań. Ale właściwie czemu wydajność jest ważna i ktoś miałby się nią przejmować? I czym właściwie jest ta "wydajność"? Jak zacząć ją uwzględniać? Od której strony do tego podejść? W trakcie sesji odpowiemy sobie na te pytania. Poznamy obecne wyzwania. Dokonamy krótkiego przeglądu ciekawych narzędzi. Ale najważniejszy przekaz tej sesji to zachęcenie do świadomego i zaangażowanego podejścia do tematu wydajności.
Recommended
Recommended
More Related Content
Similar to [4developers] - Wydajność webowa - jak to ugryźć? (Konrad Kokosa)
Similar to [4developers] - Wydajność webowa - jak to ugryźć? (Konrad Kokosa) (20)
[4developers] - Wydajność webowa - jak to ugryźć? (Konrad Kokosa)
- 1. Wydajność webowa – jak to ugryźć? @konradkokosa blog.kokosa.net
- 2. Spis treści • Czym jest? • Czemu jest ważna? • Jak o nią dbać? • Jak się uczyć?
- 4. Nie ma jednej Wydajności
- 5. Wydajność
- 13. Wydajność User Experience PercepcjaTechnikalia DesignKod Page load time „Time to first Tweet” „Feel time”
- 14. Wydajność User Experience PercepcjaTechnikalia DesignKod Page load time „Time to first Tweet” „Feel time”
- 16. ~16 ms
- 17. ~0.1 s
- 18. ~1.0 s
- 19. ~2.0 s
- 20. ~2.0 s "Response Time in Man-Computer Conversational Transactions” Robert B. Miller, 1968
- 21. >3.0 s
- 22. >10.0 s
- 24. ~4% osób rzuca telefonem
- 25. ~4% osób rzuca telefonem 85% oczekuje, że nie będzie
- 26. hardware się zmienia, ale ludzki mózg znacznie wolniej - to są liczby ważne od wieków
- 27. Google RAIL „user-centric performance model”
- 29. <100ms <16ms <100 ms <1000 ms
- 31. ale... SEO
- 32. ale... SEO
- 33. ale... SEO
- 37. Downtime vs Slow-time •1h strat: 21k USD vs 4k USD (TRAC Research) •porzucenia: 9% vs 28% (Akamai) • “SLOWNESS MAKES YOU HATE USING THE SERVICE. DOWNTIME YOU JUST TRY AGAIN LATER.” Lenny Rachitsky, Product Manager, Airbnb
- 38. spadek odwiedzin/satysfakcji/konwersji •z 10 do 30 wyników, czas 400 do 900 ms, 25% spadek (Google) •1 sekunda wolniej – 16% satysfakcji, 7% konwersji (ankieta 116 firm) •20% porzuca koszyk z powodu spowolnień •„42% of men and 35% of women have decided not to use a company again as a result of experiencing a slow website” (ankieta 1500 internautów w
- 39. wizerunek
- 40. Healthcare.go v epic fail "There's no sugar coating - the website has been too slow (…)” President Barack Obama
- 41. Kalkulator1
- 42. Performance is a feature
- 43. Performance is NOT a feature
- 44. Performance is NOT a feature
- 45. Wydajność Jak o nią dbać?
- 46. The Performance Golden Rule „80-90% of the end-user response time is is spent on the frontend. Start there.” Steve Souders
- 47. Waterfall
- 52. DEMO
- 53. The Performance Golden Rule* *) bo zoptymalizowano już backend
- 54. Jak mierzyć?
- 55. window.onLoad „Zdarzenie load wywoływane jest na końcu procesu ładowania dokumentu. W momencie wystąpienia zdarzenia, DOM zawiera już wszystkie obiekty zawarte w dokumencie oraz zakończone zostało wczytywanie obrazków oraz ramek.” developer.mozilla.org
- 56. window.onLoad „Moving beyond window.onload()” Steve Soude
- 57. window.onLoad „Moving beyond window.onload()” Steve Soude
- 58. YSlow, PageInsight, Dev Tools (Chrome, IE, Firefox)
- 59. Boomerang.js
- 60. Above the fold
- 63. DEMO
- 65. Technikalia
- 66. "Premature optimization is the root root of all evil" Donald Knuth
- 68. „Your page must fit here”
- 69. HttpArchive.org
- 70. HttpArchive.org
- 71. HttpArchive.org
- 72. Obrazki
- 74. Co z tymi obrazkami… •sprite’y •WebP, JPEX XR, BPG, Flif •ImageOptim (Mac), smush.it •LQIP - Low Quality Image Placeholders •automatyczny workflow
- 75. CDN
- 76. HTTP/2
- 77. RWD mobile first
- 79. Performance Budget devs vs designers != estetyka vs wydajność
- 80. Wydajność Jak się jej uczyć?
- 81. O’Reilly
- 83. …i to wszystko
Editor's Notes
- Wspomnieć o Millennium, o PerfOps i ogarnianiu aplikacji
- - Ile developerów webowych? - ile osób ma poczucie, ze w ich firmach dba się o wydajność - a ile osób ma w firmach jakiś proces, choćby najprostszy, dbający o wydajność chcę ewangelizować o wydajności - W banku Millennium od paru lat się tym zajmuje i nazbierało mi się przemyśleń
- mobilna, desktop, różne łącza, ekrany
- Główny przekaz - Nie jest sctricte technicznym aspektem
- Jakob Nielsen – jeden z najbardziej znanych specjalistów w dziedzinie użyteczności Ludzki mózg działa tak samo od wieków – musimy być tego świadomi mówiąc o percepcji
- 60 fps
- natychmiastowa, tak działa nasza pamięć sensoryczna
- jeszcze trzymamy nasze myśli w ryzach
- Zaczynają się schody – ludzie zaczynają tracić koncentrację, porzucają stronę
- Zaczynają się schody – ludzie zaczynają tracić koncentrację, porzucają stronę
- 30% opuści stronę!
- myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- To jest dla nas dobre bo możemy przekonać naszych szefów, że to strata $$$
- czujecie to, prezydent USA tłumaczy się z wolnej strony?! 1 X 2013
- XI 2014 - Firma Nabino – p. Agnieszka, studentka
- Czy ktoś z Was się z nim nie zgadza?
- Możemy mieć taką tendencję jako programiści, że profilujemy backendy
- http://www.webpagetest.org/result/160114_9X_183A/1/details/
- Efekt ogromnych optymalizacji backendu!
- Oki – stajemy przed problemem, musimy jakoś zmierzyć czy nasza strona „wolno/szybko działa”. Kilka wydajność – mierzyć w świadomym kontekście.
- Jednak ogrom narzędzi używa właśnie tej metryki
- mPulse - RUM
- maile z raportami, widgety na stronach
- Oczywiście nie rzucamy się na wszystko, nie usuwamy spacji z CSS jeśli nie widzimy, że to jest realny problem!
- Często to nie jest rocket science – rozmiar ma znaczenie
- - bandwidth vs latency - taxi vs bus na buspasie on mobile latency by 500ms pozostawia 1-1.5s na resztę - (żart z drukiem 3D)
- Obrazki – bardzo ważne
- format (przezroczystość) progresive JPEG
- JPEG, PNG – strasznie starymi
- Więcej niż serwowanie jQuery – oni biorą na siebie ten workflow, header Accept Akamai, CloudFlare
- Walczy z latency - Pipelining request, kompresja nagłówków HTTP, server push, priorytetyzacja
- Walczy z latency - Pipelining request, kompresja nagłówków HTTP, server push, priorytetyzacja
- Oczywiście – PluralSight, blogi, konferencje, itd..
- Velocity!
- maile z raportami, widgety na stronach