I en bredbåndstid skulle man tro, at det var overflødigt at udvikle digitale løsninger, der fokuserer på hurtige loadhastigheder. Men det er ikke desto mindre tilfældet. Google elsker slanke sider - det samme gør mobile brugere, når de rammes af dyre roamingpriser og dårlige mobildækning. Og svaret fra brugerne på et langsomt site eller mobilapplikation er konsekvent og brutal: De forsvinder!
Til denne Morgenbooster fortalte Peter Solow og Christian Hall om hvordan du slanker dine løsninger, og hvorfor du bør indføre et ‘performance budget’, når du skal udvikle din løsning.
4. 1508™ MORGENBOOSTER
4 SEKUNDERS
PAUSE I EN
SAMTALE
... Fremkalde primal frygt,
aktiverer angstprovokerende
følelser af uforenelighed og udstødelse.
Tom Jacobs
7. 1508™ MORGENBOOSTER
I 2006 forventede den
gemmensnitlige bruger, at en
webside loadede på 4 sekunder.
I dag forventer den samme bruger, at siden loader på 2 sekunder
eller mindre.
http://multichannelmerchant.com/whitepaper/0831_Akami_ecommerce_whitepaper/
8. 1508™
First and foremost, we believe
that speed is more than a feature.
Speed is the most important
feature. If your application is
slow, people won’t use it.
Fred wilson - Union Square Ventures
MORGENBOOSTER
9. 1508™ MORGENBOOSTER
57% af online brugere forlader et
site, hvis de skal vente 3
sekunder eller mere på, at sitet
loader.
8 ud af 10 af dem vil ikke vende
tilbage til et site efter en
skuffende oplevelse.
Af disse vil 3 fortælle andre om
deres dårlige oplevelse.
10. 1508™
En forsinkelse på 1 sekund
resulterer i 11% færre
sidevisninger, 16% dårligere
kundetilfredshed og et
konverteringstab på 7%.
http://www.aberdeen.com/research/5136/ra-performance-web-application/content.aspx
MORGENBOOSTER
13. 1508™ MORGENBOOSTER
“I was unable to find the product”
“Logging in and using the credit
card to pay was not as
straightforward as I had expected”
“It stresses me, I’m less likely
to use that website again”
“If it doesn’t work, I move on”
“I thought the site was difficult
to use”
14. 1508™ MORGENBOOSTER
Dårlig korttidshukommelse –
information gemt i vores
korttidshukommelse henfalder
hurtig. Derfor er vi dårligere til
at udføre opgaver, hvis vi skal
vente, selv i få sekunder.
Behov for at føle sig i kontrol -
at være tvunget til at vente giver
os en følelse af magtesløshed og
frustration.
15. 1508™ MORGENBOOSTER
“People think of a website through
their experience of it, without
much regard to any externalities
that might be causing those
problems”
16. 1508™ MORGENBOOSTER
Et websted, der indlæses på 3 sekunder,
oplever 22% færre sidevisninger og en 50% højere
bounce rate, end et websted, der indlæses på 1 sekund.
Virkning på konverteringer: -22%
Et websted, der indlæses på 5 sekunder,
oplever 35% færre sidevisninger og en 105% højere
bounce rate.
Virkning på konverteringer: -38%
Et websted, der indlæses på 10 sekunder,
oplever 46% færre sidevisninger og en 135% højere
bounce rate.
Virkning på konverteringer: -42%
17. 1508™
Ændring i bounce rate i forhold
til load-hastighed
MORGENBOOSTER
0%
20%
40%
60%
80%
100%
120%
140%
160%
1000ms 3000ms 5000ms 7500ms 11000ms 16000ms 22000ms
18. 1508™
De 3 største søgemaskener har
målt, hvor stor invirkning
hastighed har på deres site.
Bing – En side, der var 2 sekunder
langsommere, resulterede i 4.3%
færre brugere.
Google – En forsinkelse på 400
millisekunder resulterede i et
fald på 0.59% i antallet af
søgninger (ca. 17 millioner per
dag).
Yahoo! – En forsinkelse på 400
millisekunder resulterede i 5-9%
færre søgninger.
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization
MORGENBOOSTER
20. 1508™
Shopzilla – Ved at skære 5
sekunder af load-hastigheden
øgede de konverteringsraten med
7-12%, fordoblede mængden af
sessioner fra søgemaskiner og
reducerede antallet af påkrævede
servere med 50%.
Mozilla – Ved at forbedre
loadtiden på deres side med 2.2
sekund, øgede de download-
konverteringen med 15.4%,
svareende til ca. 60 milioner
flere Firefox-downloads pr. år.
Amazon – for hver 100 millisekund
sitets loadtid bliver forbedret,
øges omsætningen med 1%.
http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ &
amazon
MORGENBOOSTER
21. 1508™ MORGENBOOSTER
“Two hundred fifty milliseconds,
either slower or faster, is close
to the magic number now for
competitive advantage on the
Web,” – Harry Shum, Microsoft
http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?_r=0
42. 1508™
Et par definitioner:
Start Render:
Når der er noget på skærmen
Document Complete:
Når alt er hentet
Fully Loaded:
Når der ikke sker mere (f.eks.
Javascript)
Definitioner
45. 1508™
• Det vigtigste værktøj
• Hastighed
• Loadtid
• Datamængde / Sidestørrelse
Performancebudget
46. 1508™
• Hvilken hastighed og loadtid
skal man så vælge?
• Vi bruger 3G = 768 kb/s
• Vi bruger 4-5 sekunders ønsket
loadtid
• Det giver en endelig
sidestørrelse på 480 KB.
Performancebudget
47. 1508™
• 480 KB er ikke meget.
• Kan yderligere fordeles på de 3
tidsintervaller
• Giver 96 KB hver til: JS, billeder,
fonte, HTML, CSS
• Rækkefølgen er vigtig
• Udskyd, prioriter og vælg fra
Performancebudget
55. 1508™
• Tænk performance under hele
processen
• Start med performancebudgettet
• Overvej billeder og video
• En klassiker: Mobile First
• Test på rigtige devices
Proces
56. 1508™
• Husk redaktørerne
• De skal forstå, at deres valg
påvirker siderne
• Brug tid på at gøre det klart, hvor
mange billeder og tekst de kan
bruge
• Følg op periodisk
Proces