Wydajność webowa jak to ugryźć
•Download as PPTX, PDF•
0 likes•100 views
Prezentacja na grupie DEV@ZG - kwiecień 2017
Recommended
Recommended
More Related Content
Similar to Wydajność webowa jak to ugryźć
Similar to Wydajność webowa jak to ugryźć (20)
More from Konrad Kokosa
Wydajność webowa jak to ugryźć
- 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 time is spent on the frontend. Start there.” Steve Souders
- 47. Waterfall
- 52. The Performance Golden Rule* *) bo zoptymalizowano już backend
- 53. Jak mierzyć?
- 54. 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
- 55. window.onLoad „Moving beyond window.onload()” Steve Soude
- 56. window.onLoad „Moving beyond window.onload()” Steve Soude
- 57. YSlow, PageInsight, Dev Tools (Chrome, IE, Firefox)
- 58. Boomerang.js
- 59. Above the fold
- 62. 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
- 78. "the fastest request is a request not made"
- 81. Performance Culture: •zaproponować easy-wins •pokazać biznesowe znaczenie wydajności np. porównanie WPT z konkurencją •zrobić testy A/B eksperymentów •edukacja •„2G Tuesdays” w Facebook
- 83. Performance Budget devs vs designers != estetyka vs wydajność
- 84. Wydajność Jak się jej uczyć?
- 85. O’Reilly
- 87. …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 – dlatego bardzo się cieszę, że jednocześnie ze mną Marcin od UX
- 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
- Stara dewiza – cachowanie!
- trudniejsza niż technikalia, jak przekonać ludzi/zarząd, jak egzekwować
- trudniejsza niż technikalia, jak przekonać ludzi/zarząd, jak egzekwować
- trudniejsza niż technikalia, jak przekonać ludzi/zarząd, jak egzekwować
- maile z raportami, widgety na stronach
- - maile z raportami, widgety na stronach - Kwartet Anscombe'a to zestaw czterech zestawów danych o identycznych cechach statystycznych, takich jak średnia arytmetyczna, wariancja,współczynnik korelacji czy równanie regresji liniowej
- Oczywiście – PluralSight, blogi, konferencje, itd..
- Velocity!
- maile z raportami, widgety na stronach