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