Perceived performance - Umbraco Meetup Aarhus 4/4-16

Transcript

1. UMBRACO MEETUP PERCEIVED PERFORMANCE 04. April 2016
2. RASMUS LYNGGAARD  rlynggaard  rasmus.lynggaard@kraftvaerk.com KRAFTVAERK A/S
3. OPFATTELSEN AF TID
4. HVAD ER TID?  Tid kan anskues fra to vinkler  Den faktiske tid  Den oplevede tid
5. DEN FAKTISKE TID  Kan måles med et ur  Måles oftest som TTI (Time To Interact)  Gennemsnit: 5,2 sek  Kun 14% på 3 sek. eller under  Tid er penge  Firefox reducerede page load med 2,2 sek. og forøgede download med 15,4%
6. PERFORMANCE BUDGET 10 1 0,1 Øjeblikkelig Umiddelbar Opmærksomhedsspændvidde
7. Weber-Fechner / JND  JND – Just Noticeable Difference  20% reglen  Dit site loader på 8 sekunder  Du skal skære 1,6 sekund af før forbedringen overhovedet opleves af brugeren
8. Weber-Fechner / JND  Dit site loader på 5 sekunder  Din konkurrents loader på 2 sekunder  Ifølge JND skal du ned på 2,4 sekunder  Kunne du det, så havde du nok gjort det?
9. CHASING THE LEADER  Hvis ens konkurrent er hurtigere  Geometrisk middelværdi = √(A × B)  Brugeren vil opleve en forskel, men den spiller ikke nogen rolle ved valg af service.  Hvis alt andet er lige – kvalitet, service og usability spiller en større rolle
10. “Time is measured objectively but perceived subjectively, and experiences can be engineered to improve perceived performance.” Ilya Grigorik
11. DEN OPLEVEDE TID  Den oplevede tid adskiller sig ofte fra den faktiske tid.  Den oplevede tid, er en blanding af mange faktorer, såsom en brugers forventninger, brugervenlighed og den faktiske tid  Aktiv eller passiv – Mennesker vil meget hellere være aktive i deres ventetid end passive.  Er man passiv i sin venten overestimerer vi ventetiden med 36%
12. STATUSINDIKATOR
13. STATUSINDIKATOR  Statusindikatorer kan være rigtig gode  Statusindikatorer viser brugeren, at siden fungerer og deres action er registreret  Brug en spinner eller anden simpel indikator på actions, som tager mellem 1 og 5 sekunder (Bruger du en progess bar, så vil det opleves langsommere end det egentlig er)  Ved actions, som tager mere end 5 sekunder, kan der bruges en progress bar.  En statusindikator med procent, skal kun bruges på action, som tager 10 sek. eller mere.
14. STATUSINDIKATOR - PROGRESSBAR  Progress bars som giver illusionen om en venstre rulning, kan forbedre den opfattede ventetid med op til 10%  Pulserende progress bars, som øger pulseringen (frekvensen), opfattes som værende hurtigere.  Progress bars, som øger hastigheden undervejs, opfattes positivt af brugerne.
15. SKELETON SCREENS
16. SKELETON SCREENS  Skeleton screens ses brugt mere og mere  Kan med fordel bruges på sites, hvor indholdet er opbygget i et rimeligt fast grid  Load og render grid og hent så indholdet asynkront.
17. BACKGROUND PLACEHOLDER SKELETON SCREENS
18. PROGRESSIVE IMAGE LOADING Baseline Progressive
19. Waiting for fonts.googleapis.com
20. WEB FONTS PERFORMANCE
21. BRUG AF WEB FONTE Kilde: httparchive.org
22. BRUG AF WEBFONTE 394 KB
23. FONT LOADING 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS HTML
24. FONT LOADING 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS HTML CSS
25. FONT LOADING 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS HTML CSS
26. FONT LOADING 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS HTML CSS Fonte hentes FONT A FONT B
27. FONT LOADING 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS HTML CSS Fonte hentes FONT A FONT B Font A er renderet
28. FONT LOADING 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS HTML CSS Fonte hentes FONT A FONT B Alle fonte er renderet
29. 600 MS 500 MS FONT LOADING 100 MS 200 MS 300 MS 400 MS 700 MS HTML CSS Fonte hentes FONT A FONT B Alle fonte er renderet
30. FOUT vs FOIT
31. FOUT FOIT Start request Indhold loaded Webfonts loaded Start request Indhold loaded Webfonts loaded
32. CSS FONT-DISPLAY @font-face { font-family: My Font; src: url(myfont.woff); font-display: auto|block|swap|fallback|optional; }
33. CSS FONT-DISPLAY @font-face { font-family: My Font; src: url(myfont.woff); font-display: auto|block|swap|fallback|optional; }
34. CSS FONT-DISPLAY Coming Soon Stadig ingen browser support Brug Javascript
35. FONT FACE OBSERVER var openSans = new FontFaceObserver(”Open Sans”); openSans.check().then(function() { //font is loaded )};
36. OPTIMISTISKE HANDLINGER
37. AT LADE SOM OM….  Få det til at se ud som om det virker – selv når det ikke gør  Reagér på en handling og udfør den senere  Brugeren klikker på ”Synes godt om”. Vi tænder knappen og kommer den handling i en kø. Når der er forbindelse og tingene virker, så kan vi gemme handlingen
38. Forudse brugerens handling  Er der tunge operationer som kan startes på forhånd?  Hvis du er i gang med en upload dialog, hvor der skal udfyldes meta- data, så start upload så hurtigt som muligt – allerede inden der er klikket på submit  Ved jeg hvilken side brugeren går til næste gang?  Brug ressource hints til at hente ressourcer allerede inden de skal bruges
39. RESOURCE HINTS Hvornår Eksempel dns-prefetch Lave tidligt DNS resolve Image hosts, CDNs, Analytics, 3. parts scripts preconnect Ligesom dns-prefetch, men laver også TCP handshake og TLS negotition Image hosts, CDNs, Analytics, 3. parts scripts prefetch Hente individuelle ressourcer CSS eller javascript (som måske skal bruges i fremtiden) prerender Hente og eksekvere en side På en login side, er ”logged-in” siden den næste. preloading (coming soon) Hente individuelle ressourcer CSS eller javascript (som helt sikkert skal bruges i fremtiden) <link rel=”prefetch” href=”MyFont.woff”>
40. Knapper på mobile enheder
41. KNAPPER PÅ MOBILE ENHEDER  300ms ventetid ved tap – for at se om brugeren laver et dobbelt tap.  Ideel responstid er <=100ms  Chrome (32+) og Firefox har fjernet det delay
42. KNAPPER PÅ MOBILE ENHEDER <meta name="viewport" content="width=device-width, user- scalable=no">
43. KNAPPER PÅ MOBILE ENHEDER <meta name="viewport" content="width=device-width, user- scalable=no">
44. KNAPPER PÅ MOBILE ENHEDER Vi kan snyde lidt og lade som om, at der sker noget med det same. Vi skal blot tilføje et active state button:active { /* Change the styling */ background-color: rgba(0,0,0,0.5); }
45. KNAPPER PÅ MOBILE ENHEDER Nogle mobilbrowsere kræver lidt javascript for at få active state til at virke document.addEventListener(“touchstart”, function(){}, true);
46. KNAPPER PÅ MOBILE ENHEDER Nogle browsere har deres egen default styling på active knapper. Den kan vi fjerne ved at tilføje følgende regler til knapperne -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent;
47. KNAPPER PÅ MOBILE ENHEDER  Det fjerner ikke det 300ms delay, som nogle browsere har, men det vil give en bedre oplevelse for brugeren  Der er et par polyfills, som fjerner de 300ms delay  FastClick - https://github.com/ftlabs/fastclick
48. MOMENTUM SCROLLING
49. MOMENTUM SCROLLING -webkit-overflow-scrolling: touch;
50. MOMENTUM SCROLLING
51. HTTP/2
52. ?