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

1508™ MORGENBOOSTER

ET ÅNDEDRAG –PÅ 4 SEKUNER…

1508™ MORGENBOOSTER

EN LOADTID PÅ4 SEKUNDER

1508™ MORGENBOOSTER

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

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

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

1508™ MORGENBOOSTER

WEBSTRESS

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

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”

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.

1508™ MORGENBOOSTER

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

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%

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™ 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

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

1508™ MORGENBOOSTER

Gennemsnitlig fastnetdownloadhastighed

1508™ MORGENBOOSTER

Gennemsnitlig mobildownloadhastighed

1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

Loadtid: 2:32

1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

1508™1508™ MORGENBOOSTER

1508™

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

1508™ MORGENBOOSTER

Huston Lufthavn

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

1508™ MORGENBOOSTER

AKTIV VENTETID= 1 MINUT

PASSIV VENTETID= 7 MINUTTER

1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

AKTIV VENTETID= 7 MINUTTER

PASSIV VENTETID= 1 MINUT

1508™ MORGENBOOSTER

1508™1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

Vitaly Friedman

1508™ MORGENBOOSTER

1508™ MORGENBOOSTER

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

Sullissivik.gl - foranalyse

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

Sullissivik.gl - foranalyse

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

Sullissivik.gl - foranalyse

1508™

• Google PageSpeed Insights

• Caching i klienten

• Compression på serveren

Lavthængende frugter

1508™

FIGHTING MONSTERS30. MARTS

KOMMENDE MORGENBOOSTERE