perceived performance umbraco codecarden 16
TRANSCRIPT
![Page 1: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/1.jpg)
Drag image ->UMBRACO CODEGARDEN ‘16
PERCEIVED PERFORMANCE
June 15th 2016
![Page 3: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/3.jpg)
PERCEPTION OF TIME
![Page 4: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/4.jpg)
WHAT IS TIME? Time can be approached from two angles
The actual time The perceived time
![Page 5: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/5.jpg)
THE ACTUAL TIME Can be measured with a clock Often measured as TTI (Time To Interact)
Sverage: 5,2 sec Only 14% at 3 sec. or less
Time is money Firefox reduced page load with 2,2 sec. and increased
downloads with 15,4%
![Page 6: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/6.jpg)
PERFORMANCE BUDGET
10
1
0.1
InstantImmediateAttention span
![Page 7: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/7.jpg)
Weber-Fechner / JND JND – Just Noticeable Difference 20% rule of thumb
Your site loads in 8 seconds You’ll have to cut off 1,6 seconds before any improvement is
noticed by the user
![Page 8: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/8.jpg)
Weber-Fechner / JND Your site loads in 5 seconds Your competitors loads in 2 seconds According to JDN your site should load in 2,4 seconds
If you were able to do that – you would have, right?
![Page 9: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/9.jpg)
CHASING THE LEADER If your competitors site is faster Geometrisk mean = √(A × B) The user will experience a difference in performance, but it won’t
have an effect when choosing a service Everything else is equal – Quality, service and usablity makes a
bigger difference
![Page 10: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/10.jpg)
“Time is measured objectively but perceived subjectively, and experiences can be engineered to improve perceived performance.”Ilya Grigorik
![Page 11: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/11.jpg)
THE PERCEIVED TIME The perceived time often differs from the actual time. The perceived time is a mix of many factors – eg.
User expectations Usability The actual time
Active or passive – People will rather be active while waiting than passive
If (passive wait) { var overEstimationOfActualWait = ActualWait * 1.36;}
![Page 12: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/12.jpg)
STATUS INDICATORS
![Page 13: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/13.jpg)
STATUS INDICATORS Status indicators can work very well. Status indicators shows the user, that the site is working and their
action is being handled. Use a spiner (or another simpel indicator) for actions taking
between 1 and 5 seconds (Using a progress bar, will make the action seem slower than it actually is)
Actions taking longer than 5 seconds a progress bar is usable. A status indicator with percentage indication should only be used
on actions taking 10 seconds or more.
![Page 14: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/14.jpg)
STATUS INDICATOR – PROGRESS BAR Progress bars which gives an illusion of spinning left, can reduce
the perceived performance with as much as 10% Pulsating progress bars, which increases the frequens is perceived
as being faster. Progress bars, which increases its speed has a positive effect on
users.
![Page 15: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/15.jpg)
SKELETON SCREENS
![Page 16: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/16.jpg)
SKELETON SCREENS Skeleton screens is becoming
widely used Can advantageously be used
on sites where the content is structured in a reasonable fixed grid
Load and render grid => async load of content
![Page 17: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/17.jpg)
BACKGROUND PLACEHOLDERSKELETON SCREENS
![Page 18: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/18.jpg)
PROGRESSIVE IMAGE LOADING
Baseline Progressive
![Page 19: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/19.jpg)
Waiting for fonts.googleapis.com
![Page 20: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/20.jpg)
WEB FONTS PERFORMANCE
![Page 21: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/21.jpg)
WEB FONT USAGE
Kilde: httparchive.org
![Page 22: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/22.jpg)
WEBFONT USAGE
394 KB
![Page 23: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/23.jpg)
FONT LOADING100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS
HTML
![Page 24: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/24.jpg)
FONT LOADING100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS
HTML
CSS
![Page 25: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/25.jpg)
FONT LOADING100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS
HTML
CSS
![Page 26: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/26.jpg)
FONT LOADING100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS
HTML
CSS
Start font loading
FONT A
FONT B
![Page 27: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/27.jpg)
FONT LOADING100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS
HTML
CSS
Start font loading
FONT A
FONT B
Font A is rendered
![Page 28: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/28.jpg)
FONT LOADING100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS
HTML
CSS
Start font loading
FONT A
FONT B
All fonts are rendered
![Page 29: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/29.jpg)
600 MS500 MS
FONT LOADING100 MS 200 MS 300 MS 400 MS 700 MS
HTML
CSS
Start font loading
FONT A
FONT B
All fonts are rendered
![Page 30: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/30.jpg)
FOUT vs FOIT
![Page 31: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/31.jpg)
FOUT
FOIT
Start request Content loaded Webfonts loaded
Start request Content loaded Webfonts loaded
![Page 32: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/32.jpg)
CSS FONT-DISPLAY
@font-face {font-family: My Font;src: url(myfont.woff);font-display: auto|block|swap|fallback|optional;
}
![Page 33: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/33.jpg)
CSS FONT-DISPLAY
@font-face {font-family: My Font;src: url(myfont.woff);font-display: auto|block|swap|fallback|optional;
}
![Page 34: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/34.jpg)
CSS FONT-DISPLAY
Coming SoonStill no browser support
Use Javascript
![Page 35: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/35.jpg)
FONT FACE OBSERVER
var openSans = new FontFaceObserver(”Open Sans”);
openSans.check().then(function() {//font is loaded
)};
![Page 36: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/36.jpg)
OPTIMISTISKE HANDLINGER
![Page 37: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/37.jpg)
MAKE IT LOOK LIKE…. It works – event though it’s not An action performed
Register a user action and perform the actual work later The user click ”Like”. We enable the button and the action is
queued. When a connection is reestablished we can save the action.
![Page 38: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/38.jpg)
ANTICIPATE USER ACTIONS Do we have long running operations, which can be started up
front? If you are engaged in an upload dialogue, in which meta-data
must be filled, start upload as quickly as possible - even before there are clicked on submit
Do I know which page the user will visit next? Use resource hints to retrieve resources even before they are
needed
![Page 39: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/39.jpg)
RESOURCE HINTSWhen Example
dns-prefetch Early DNS resolve Image hosts, CDNs, Analytics, 3. party scripts
preconnect Like dns-prefetch, but alsop TCP handshake and TLS negotition
Image hosts, CDNs, Analytics, 3. party scripts
prefetch Low priority – fetch resources in the background
CSS or javascript (that might be needed later)
prerender Render an entire page in the background
Login page – next page is probably the ”logged in” page
preloading (Chrome =>50 Opera => 37)
Fetch individual resources with ressource priority
CSS or javascript
<link rel=”prefetch” href=”MyFont.woff”>
![Page 40: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/40.jpg)
Buttons on mobile devices
![Page 41: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/41.jpg)
BUTTONS ON MOBILE DEVICES 300ms wait on tap – waiting for double tap. Ideal responsetime er <=100ms Chrome (32+) og Firefox removed this delay
![Page 42: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/42.jpg)
BUTTONS ON MOBILE DEVICES
<meta name="viewport" content="width=device-width, user-scalable=no">
![Page 43: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/43.jpg)
BUTTONS ON MOBILE DEVICES
<meta name="viewport" content="width=device-width, user-scalable=no">
![Page 44: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/44.jpg)
BUTTONS ON MOBILE DEVICESWe can make it seem like something is happening instantly – add an active state to the button.
button:active {/* Change the styling */background-color: rgba(0,0,0,0.5);
}
![Page 45: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/45.jpg)
BUTTONS ON MOBILE DEVICESSome mobile browsers require some javascript to get the active state to work
document.addEventListener(“touchstart”, function(){}, true);
![Page 46: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/46.jpg)
BUTTONS ON MOBILE DEVICESSome browsers have their own default styling of active buttons. Remove those by using these rules
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
![Page 47: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/47.jpg)
BUTTONS ON MOBILE DEVICES This wont remove the 300ms delay, but it’ll make a better
userexperience There are polyfills, which removes the 300ms delay
FastClick - https://github.com/ftlabs/fastclick
![Page 48: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/48.jpg)
MOMENTUM SCROLLING
![Page 49: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/49.jpg)
MOMENTUM SCROLLING
-webkit-overflow-scrolling: touch;
![Page 50: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/50.jpg)
MOMENTUM SCROLLING
![Page 51: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/51.jpg)
HTTP/2
![Page 52: Perceived performance umbraco codecarden 16](https://reader031.vdocuments.us/reader031/viewer/2022013013/587cb2b41a28ab38028b502b/html5/thumbnails/52.jpg)
?