BoilingFrogs 2016 - Web performance
Download as PPTX, PDF0 likes580 views
Presentation about web performance spoken in polish at Boiling Frogs conference.
BoilingFrogs 2016 - Web performance
- 1. Wydajność webowa – czemu miałbym się przejmować? @KonradKokosa
- 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
- 28. Google RAIL „user-centric performance model”
- 30. <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. Waterfall
- 48. DEMO
- 49. The Performance Golden Rule „80-90% of the end-user response time is is spent on the frontend. Start there.” Steve Souders
- 53. The Performance Golden Rule* *) bo zoptymalizowano już backend
- 54. Jak mierzyć?
- 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
- 64. DEMO
- 66. Technikalia
- 67. "Premature optimization is the root root of all evil" Donald Knuth
- 69. „Your page must fit here”
- 70. HttpArchive.org
- 71. HttpArchive.org
- 72. HttpArchive.org
- 73. Obrazki
- 75. Co z tymi obrazkami… •sprite’y •WebP, JPEX XR, BPG, Flif •ImageOptim (Mac), smush.it •LQIP - Low Quality Image Placeholders •automatyczny workflow
- 76. CDN
- 77. RWD mobile first
- 79. Performance Budget devs vs designers != estetyka vs wydajność
- 80. Wydajność Jak się jej uczyć?
- 81. O’Reilly
- 84. …i to wszystko
- 85. Dziękuję!
Editor's Notes
- #2: Wspomnieć o Millennium, o PerfOps i ogarnianiu aplikacji
- #4: - 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ść - strona wolno działa, co robicie? Z czym wam się to kojarzy? (profilujecie) - chcę ewangelizować o wydajności
- #5: mobilna, desktop, różne łącza, ekrany
- #16: Jakob Nielsen – jeden z najbardziej znanych specjalistów w dziedzinie użyteczności
- #18: 60 fps
- #19: natychmiastowa, tak działa nasza pamięć sensoryczna
- #20: jeszcze trzymamy nasze myśli w ryzach
- #21: Zaczynają się schody – ludzie zaczynają tracić koncentrację, porzucają stronę
- #22: Zaczynają się schody – ludzie zaczynają tracić koncentrację, porzucają stronę
- #23: 30% opuści stronę!
- #24: myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- #25: myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- #26: myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- #27: myśli nam już pobłądziły i zapewne stronę zamkniemy, tu kończy się czas życia pamięci krótkotrwałej
- #29: borykanie się z tymi czasami jest kosztowne i wyczerpujące (podwyższa ciśnienie:)
- #42: czujecie to, prezydent USA tłumaczy się z wolnej strony?!
- #49: http://www.webpagetest.org/result/160114_9X_183A/1/details/
- #55: Efekt ogromnych optymalizacji backendu!
- #56: Oki – stajemy przed problemem, musimy jakoś zmierzyć czy nasza strona „wolno/szybko działa”. Kilka wydajność – mierzyć w świadomym kontekście.
- #58: Jednak ogrom narzędzi używa właśnie tej metryki
- #60: mPulse - RUM
- #67: maile z raportami, widgety na stronach
- #69: Oczywiście nie rzucamy się na wszystko, nie usuwamy spacji z CSS jeśli nie widzimy, że to jest realny problem!
- #70: Często to nie jest rocket science – rozmiar ma znaczenie
- #71: - bandwidth vs latency - taxi vs bus na buspasie on mobile latency by 500ms pozostawia 1-1.5s na resztę - (żart z drukiem 3D)
- #75: Obrazki – bardzo ważne
- #76: format (przezroczystość) progresive JPEG
- #77: JPEG, PNG – strasznie starymi
- #78: Więcej niż serwowanie jQuery – oni biorą na siebie ten workflow, header Accept Akamai, CloudFlare
- #79: Walczy z latency - Pipelining request, kompresja nagłówków HTTP, server push, priorytetyzacja
- #80: Walczy z latency - Pipelining request, kompresja nagłówków HTTP, server push, priorytetyzacja
- #81: Stara dewiza – cachowanie!
- #82: trudniejsza niż technikalia, jak przekonać ludzi/zarząd, jak egzekwować
- #83: trudniejsza niż technikalia, jak przekonać ludzi/zarząd, jak egzekwować
- #84: trudniejsza niż technikalia, jak przekonać ludzi/zarząd, jak egzekwować
- #87: maile z raportami, widgety na stronach
- #88: maile z raportami, widgety na stronach
- #89: Oczywiście – PluralSight, blogi, konferencje, itd..
- #90: Velocity!
- #91: maile z raportami, widgety na stronach
- #92: maile z raportami, widgety na stronach