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.

1. 1508™
1508guest
Jegvilonline
1508.dk
slideshare.com/1508as
vimeo.com/design1508
facebook.com/company/1508-as
#1508as
MORGENBOOSTER

2. 1508™1508™
MB
#59
Peter Solow & Christian Hall
MORGENBOOSTER

3. 1508™1508™ MORGENBOOSTER
“You may delay, but time will
not.”
― Benjamin Franklin

4. 1508™ MORGENBOOSTER
4 SEKUNDERS
PAUSE I EN
SAMTALE
... Fremkalde primal frygt,
aktiverer angstprovokerende
følelser af uforenelighed og udstødelse.
Tom Jacobs

5. 1508™ MORGENBOOSTER
ET ÅNDEDRAG –
PÅ 4 SEKUNER…

6. 1508™ MORGENBOOSTER
EN LOADTID PÅ
4 SEKUNDER

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

11. 1508™ MORGENBOOSTER
Langsom loadtid
fører til
utilfredshed
oftere end
nogen anden
faktor F O R R E S T E R C O N S U L T I N G

12. 1508™ MORGENBOOSTER
WEBSTRESS
http://www.ca.com/us/~/media/files/supportingpieces/final_webstress_survey_report_229296.aspx

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

19. 1508™ 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

22. 1508™ MORGENBOOSTER
Gennemsnitlig fastnet
downloadhastighed

23. 1508™ MORGENBOOSTER
Gennemsnitlig mobil
downloadhastighed

24. 1508™ MORGENBOOSTER

25. 1508™ MORGENBOOSTER
Loadtid: 2:32

26. 1508™ MORGENBOOSTER

27. 1508™ MORGENBOOSTER

28. 1508™ MORGENBOOSTER

29. 1508™ MORGENBOOSTER

30. 1508™1508™ MORGENBOOSTER

31. 1508™
AKTIV VS. PASSIV
VENTETID
PASSIV VENTETID OPFATTES I
GENNEMSNIT 36% LÆNGERE END DEN
RENT FAKTISK ER.

32. 1508™ MORGENBOOSTER
Huston Lufthavn
Gennemsnitstiden før baggagen ankommer på båndet,
er 8 minutter

33. 1508™ MORGENBOOSTER
AKTIV VENTETID=
1 MINUT
PASSIV VENTETID
= 7 MINUTTER

34. 1508™ MORGENBOOSTER

35. 1508™ MORGENBOOSTER
AKTIV VENTETID
= 7 MINUTTER
PASSIV VENTETID
= 1 MINUT

36. 1508™ MORGENBOOSTER

37. 1508™1508™ MORGENBOOSTER

38. 1508™ MORGENBOOSTER
Vitaly Friedman

39. 1508™ MORGENBOOSTER

40. 1508™ MORGENBOOSTER

41. 1508™
DEFINITIONER
Sullissivik.gl - foranalyse

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

43. 1508™
VÆRKTØJER
Sullissivik.gl - foranalyse

44. 1508™
• Performancebudgettet
• Google PageSpeed Insights
• Yslow
• Sitespeed.io
• Webpagetest.org
• Performance Budget Builder
Værktøjer

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

48. 1508™
Performancebudget
HTML
CSS
JAVASCRIPT
IMAGES
FONT
TOTAL
96 KB
96 KB
96 KB
96 KB
96 KB
480 KB
58 KB
58 KB
58 KB
58 KB
58 KB
288 KB
29 KB
29 KB
29 KB
29 KB
29 KB
144 KB

49. 1508™
PageSpeed Insights

50. 1508™
• Plugin til Chrome
• Udsprunget af Yahoo
• Yslow.org
Yslow

51. 1508™
Sitespeed.io

52. 1508™
Webpagetest.org

53. 1508™
Performance Budget Builder

54. 1508™
PROCES
Sullissivik.gl - foranalyse

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

57. 1508™
LAVTHÆNGENDE
FRUGTER
Sullissivik.gl - foranalyse

58. 1508™
• Google PageSpeed Insights
• Caching i klienten
• Compression på serveren
Lavthængende frugter

59. 1508™
FIGHTING MONSTERS
30. MARTS
KOMMENDE MORGENBOOSTERE