Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Morgenbooster #61 | Need for Speed

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.

  • Login to see the comments

Morgenbooster #61 | Need for Speed

  1. 1. 1508™ 1508guest Jegvilonline 1508.dk slideshare.com/1508as vimeo.com/design1508 facebook.com/company/1508-as #1508as MORGENBOOSTER
  2. 2. 1508™1508™ MB #59 Peter Solow & Christian Hall MORGENBOOSTER
  3. 3. 1508™1508™ MORGENBOOSTER “You may delay, but time will not.” ― Benjamin Franklin
  4. 4. 1508™ MORGENBOOSTER 4 SEKUNDERS PAUSE I EN SAMTALE ... Fremkalde primal frygt, aktiverer angstprovokerende følelser af uforenelighed og udstødelse. Tom Jacobs
  5. 5. 1508™ MORGENBOOSTER ET ÅNDEDRAG – PÅ 4 SEKUNER…
  6. 6. 1508™ MORGENBOOSTER EN LOADTID PÅ 4 SEKUNDER
  7. 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. 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. 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. 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. 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. 12. 1508™ MORGENBOOSTER WEBSTRESS http://www.ca.com/us/~/media/files/supportingpieces/final_webstress_survey_report_229296.aspx
  13. 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. 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. 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. 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. 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. 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. 19. 1508™ MORGENBOOSTER
  20. 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. 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. 22. 1508™ MORGENBOOSTER Gennemsnitlig fastnet downloadhastighed
  23. 23. 1508™ MORGENBOOSTER Gennemsnitlig mobil downloadhastighed
  24. 24. 1508™ MORGENBOOSTER
  25. 25. 1508™ MORGENBOOSTER Loadtid: 2:32
  26. 26. 1508™ MORGENBOOSTER
  27. 27. 1508™ MORGENBOOSTER
  28. 28. 1508™ MORGENBOOSTER
  29. 29. 1508™ MORGENBOOSTER
  30. 30. 1508™1508™ MORGENBOOSTER
  31. 31. 1508™ AKTIV VS. PASSIV VENTETID PASSIV VENTETID OPFATTES I GENNEMSNIT 36% LÆNGERE END DEN RENT FAKTISK ER.
  32. 32. 1508™ MORGENBOOSTER Huston Lufthavn Gennemsnitstiden før baggagen ankommer på båndet, er 8 minutter
  33. 33. 1508™ MORGENBOOSTER AKTIV VENTETID= 1 MINUT PASSIV VENTETID = 7 MINUTTER
  34. 34. 1508™ MORGENBOOSTER
  35. 35. 1508™ MORGENBOOSTER AKTIV VENTETID = 7 MINUTTER PASSIV VENTETID = 1 MINUT
  36. 36. 1508™ MORGENBOOSTER
  37. 37. 1508™1508™ MORGENBOOSTER
  38. 38. 1508™ MORGENBOOSTER Vitaly Friedman
  39. 39. 1508™ MORGENBOOSTER
  40. 40. 1508™ MORGENBOOSTER
  41. 41. 1508™ DEFINITIONER Sullissivik.gl - foranalyse
  42. 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. 43. 1508™ VÆRKTØJER Sullissivik.gl - foranalyse
  44. 44. 1508™ • Performancebudgettet • Google PageSpeed Insights • Yslow • Sitespeed.io • Webpagetest.org • Performance Budget Builder Værktøjer
  45. 45. 1508™ • Det vigtigste værktøj • Hastighed • Loadtid • Datamængde / Sidestørrelse Performancebudget
  46. 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. 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. 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. 49. 1508™ PageSpeed Insights
  50. 50. 1508™ • Plugin til Chrome • Udsprunget af Yahoo • Yslow.org Yslow
  51. 51. 1508™ Sitespeed.io
  52. 52. 1508™ Webpagetest.org
  53. 53. 1508™ Performance Budget Builder
  54. 54. 1508™ PROCES Sullissivik.gl - foranalyse
  55. 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. 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. 57. 1508™ LAVTHÆNGENDE FRUGTER Sullissivik.gl - foranalyse
  58. 58. 1508™ • Google PageSpeed Insights • Caching i klienten • Compression på serveren Lavthængende frugter
  59. 59. 1508™ FIGHTING MONSTERS 30. MARTS KOMMENDE MORGENBOOSTERE

×