morgenbooster #61 | need for speed

1508™

1508guest

Jegvilonline

1508.dkslideshare.com/1508asvimeo.com/design1508facebook.com/company/1508-as

#1508as

MORGENBOOSTER

1508™1508™

MB

#59Peter Solow & Christian Hall

MORGENBOOSTER

1508™1508™ MORGENBOOSTER

“You may delay, but time will not.”― Benjamin Franklin

1508™ MORGENBOOSTER

4 SEKUNDERSPAUSE I ENSAMTALE... Fremkalde primal frygt, aktiverer angstprovokerende følelser af uforenelighed og udstødelse.

Tom Jacobs


ET ÅNDEDRAG –PÅ 4 SEKUNER…


EN LOADTID PÅ4 SEKUNDER


I 2006 forventede den gemmensnitlige bruger, at enwebside loadede på 4 sekunder.

I dag forventer den samme bruger, at siden loader på 2 sekundereller mindre.

http://multichannelmerchant.com/whitepaper/0831_Akami_ecommerce_whitepaper/

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


57% af online brugere forlader et site, hvis de skal vente 3 sekunder eller mere på, at sitetloader.

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.

1508™

En forsinkelse på 1 sekundresulterer i 11% færresidevisninger, 16% dårligerekundetilfredshed og et konverteringstab på 7%.

http://www.aberdeen.com/research/5136/ra-performance-web-application/content.aspx

MORGENBOOSTER


Langsom loadtidfø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


WEBSTRESS

http://www.ca.com/us/~/media/files/supportingpieces/final_webstress_survey_report_229296.aspx


“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”


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.


“People think of a website through their experience of it, without much regard to any externalities that might be causing those problems”


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%

1508™

Ændring i bounce rate i forholdtil load-hastighed

MORGENBOOSTER

0%

20%

40%

60%

80%

100%

120%

140%

160%

1000ms 3000ms 5000ms 7500ms 11000ms 16000ms 22000ms

1508™

De 3 største søgemaskener harmålt, hvor stor invirkninghastighed har på deres site.

Bing – En side, der var 2 sekunderlangsommere, resulterede i 4.3% færre brugere.

Google – En forsinkelse på 400 millisekunder resulterede i et fald på 0.59% i antallet afsø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

1508™

Shopzilla – Ved at skære 5 sekunder af load-hastighedenøgede de konverteringsraten med 7-12%, fordoblede mængden afsessioner fra søgemaskiner ogreducerede antallet af påkrævedeservere med 50%.

Mozilla – Ved at forbedreloadtiden på deres side med 2.2 sekund, øgede de download-konverteringen med 15.4%, svareende til ca. 60 milionerflere Firefox-downloads pr. år.

Amazon – for hver 100 millisekundsitets loadtid bliver forbedret, øges omsætningen med 1%.

http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/ & amazon

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


Gennemsnitlig fastnetdownloadhastighed


Gennemsnitlig mobildownloadhastighed


Loadtid: 2:32

1508™

AKTIV VS. PASSIVVENTETIDPASSIV VENTETID OPFATTES I GENNEMSNIT 36% LÆNGERE END DEN RENT FAKTISK ER.


Huston Lufthavn

Gennemsnitstiden før baggagen ankommer på båndet,er 8 minutter


AKTIV VENTETID= 1 MINUT

PASSIV VENTETID= 7 MINUTTER


AKTIV VENTETID= 7 MINUTTER

PASSIV VENTETID= 1 MINUT


Vitaly Friedman

1508™

DEFINITIONER

Sullissivik.gl - foranalyse

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

1508™

VÆRKTØJER


1508™

• Performancebudgettet

• Google PageSpeed Insights

• Yslow

• Sitespeed.io

• Webpagetest.org

• Performance Budget Builder

Værktøjer

1508™

• Det vigtigste værktøj

• Hastighed

• Loadtid

• Datamængde / Sidestørrelse

Performancebudget

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

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

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

1508™

PageSpeed Insights

1508™

• Plugin til Chrome

• Udsprunget af Yahoo

• Yslow.org

Yslow

1508™

Sitespeed.io

1508™

Webpagetest.org

1508™

Performance Budget Builder

1508™

PROCES


1508™

• Tænk performance under hele processen

• Start med performancebudgettet

• Overvej billeder og video

• En klassiker: Mobile First

• Test på rigtige devices

Proces

1508™

• Husk redaktørerne

• De skal forstå, at deres valgpåvirker siderne

• Brug tid på at gøre det klart, hvormange billeder og tekst de kanbruge

• Følg op periodisk

Proces

1508™

LAVTHÆNGENDE FRUGTER


1508™

• Google PageSpeed Insights

• Caching i klienten

• Compression på serveren

Lavthængende frugter

1508™

FIGHTING MONSTERS30. MARTS

KOMMENDE MORGENBOOSTERE

morgenbooster #61 | need for speed

Design