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ę!