Upload
konrad-kokosa
View
485
Download
0
Embed Size (px)
Citation preview
Wydajność webowa – czemu miałbym się przejmować?
@KonradKokosa
Spis treści• Czym jest?• Czemu jest ważna?• Jak o nią dbać?• Jak się uczyć?
WydajnośćCzym jest?
Nie ma jednej Wydajności
Wydajność
Wydajność
User Experience
Wydajność
User Experience
wyglądłatwość użyciaarchitektura informacji
Wydajność
User Experience
Wydajność
User Experience
Technikalia
Wydajność
User Experience
PercepcjaTechnikalia
Wydajność
User Experience
PercepcjaTechnikalia
Kod
Wydajność
User Experience
PercepcjaTechnikalia
DesignKod
Wydajność
User Experience
PercepcjaTechnikalia
DesignKodPage load time „Time to first Tweet”
„Feel time”
Wydajność
User Experience
PercepcjaTechnikalia
DesignKod
Page load time „Time to first Tweet”„Feel time”
Trochę Psychologii
~16 ms
~0.1 s
~1.0 s
~2.0 s
~2.0 s
"Response Time in Man-Computer Conversational Transactions” Robert B. Miller,
1968
>3.0 s
>10.0 s
4% osób rzuca telefonem
4% osób rzuca telefonem85% oczekuje, że nie będzie
wolniej
hardware się zmienia, ale ludzki mózg znacznie wolniej - to są
liczby ważne od wieków
Google RAIL„user-centric performance model”
<100ms <16ms <100 ms<1000 ms
ale... SEO
ale... SEO
ale... SEO
WydajnośćCzemu jest ważna?
Znaczenie Biznesowe
O-o… wolno działa…
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
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 UK)
wizerunek
Healthcare.gov epic fail
"There's no sugar coating - the
website has been too slow (…)”
President Barack Obama
Kalkulator1
Performance is a feature
Performance is NOT a feature
Performance is NOT a feature
WydajnośćJak o nią dbać?
Waterfall
DEMO
The Performance Golden Rule„80-90% of the end-user response
time is spent on the frontend. Start there.”
Steve Souders
The Performance Golden Rule*
*) bo zoptymalizowano już backend
Jak mierzyć?
window.onLoad
„Moving beyond window.onload()” Steve Souders
window.onLoad
„Moving beyond window.onload()” Steve Souders
YSlow, PageInsight, Dev Tools (Chrome, IE, Firefox)
Boomerang.js
Above the fold
WebPageTest.orgStartRender i SpeedIndex
DEMO
Dynatrace AJAX Edition
DEMO
heatmap http://heatmap.webperf.tools/
requestmap http://requestmap.webperf.tools/
Technikalia
"Premature optimization is the root of all evil" Donald Knuth
Rozmiar ma znaczenie
„Your page must fit here”
HttpArchive.org
HttpArchive.org
HttpArchive.org
Obrazki
Co z tymi obrazkami…•sprite’y•WebP, JPEX XR, BPG, Flif• ImageOptim (Mac), smush.it•LQIP - Low Quality Image Placeholders•automatyczny workflow
CDN
RWDmobile first
Performance Budget
Performance Budgetdevs vs designers != estetyka vs
wydajność
WydajnośćJak się jej uczyć?
O’Reilly
…i to wszystko
Dziękuję!