Performance as part of UX

Performance as part of UX Pratical Best Practive to Improve
UX goo.gl/B2z9rC

What is UX? “is the quality of experience a person
has when interacting with a specific design” - Alben

UX is not all about UI Design

“UI Design is huge part of UX, but UX is
not UI.” - Erik Flowers

❏ Performance in fact is underrated. ❏ A web with
stunning UI but poor performance, is not usable.

What make a good performance web ❏ High performance code
❏ Fast & Lightweight ❏ Minimum HTTP request

What make a good performance web High Performance Code ❏
HTML ❏ CSS ❏ Javascript

What make a good performance web → High Performance Code
HTML ❏ Put stylesheets on top, scripts at the bottom.

❏ Avoid div’s soup and deep nesting. What make a
good performance web → High Performance Code HTML

❏ Do not declare any box-model related property on <html>
and <body> tag unless you know what you’ re doing. ❏ Box-model property: ❏ Width, height, padding, margin. What make a good performance web → High Performance Code HTML

❏ Declare viewport meta tag. ❏ DO NOT disable pinch
to zoom functionality. What make a good performance web → High Performance Code HTML <meta name=“viewport” content=“width=device-width”>

❏ Do not use @import, use <link> instead to reference
a stylesheet. ❏ Go easy with box-shadow! ❏ Avoid deep nesting. ❏ Utilize transform and opacity properties to achieve smooth 60fps animation. What make a good performance web → High Performance Code CSS

❏ Prefer for loop rather than each loop. ❏ Cache
selectors. ❏ Prefer vanilla Javascript rather than using library like jQuery. What make a good performance web → High Performance Code Javascript

What make a good performance web Fast & Lightweight “it's
not about how fast your site is; it's about how fast your users think it is.” - Mobify

What make a good performance web → Fast & Lightweight
300ms tap delay Every touch-based mobile browser, has ~300ms delay between you tapping a thing on the screen and the browser considering it a "click". ❏ Delay demo ❏ No delay demo

The reason for this is that the browser is waiting
to see if you are actually performing a double tap. What make a good performance web → Fast & Lightweight 300ms tap delay

There are 2 ways to remove 300ms tap delay: ❏
Use mobile-optimised viewport meta tag ❏ Use Javascript library to eliminate 300ms tap delay What make a good performance web → Fast & Lightweight 300ms tap delay

→ 300ms tap delay Use JS library In Suitmedia, we use FastClick by Financial Times Lab to eliminate 300ms tap delay. FastClick.attach( document.body ); References: ❏ FastClick

→ 300ms tap delay Provide active state interaction To make your site feel faster, you need to make your buttons respond immediately to a user's touch and give that user a great visual indication that something is happening.

→ 300ms tap delay Provide active state interaction ❏ Add :active pseudo-class to any clickable element. ❏ Enable active state on mobile

→ 300ms tap delay Add :active pseudo-class button:active { background: #333; box-shadow: inset 0 0 5px #000; }

→ 300ms tap delay Enable active state on mobile document.addEventListener(‘touchstart’, function (){}, true);

Assets Minification Minification (also known as uglifying) refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser.

Minifying asset files greatly reduce file size What make a
good performance web → Fast & Lightweight Assets Minification Library Name Uncompressed (KB) Compressed (KB) jQuery 283 96 Moment 252 127 Bootstrap (JS + CSS) 204 148

Online services to minify assets: ❏ JS ❏ Uglify ❏
Google Closure ❏ CSS ❏ CSS Shrink ❏ CSS Compressor What make a good performance web → Fast & Lightweight Assets Minification

❏ Most all web pages are dominated by images. What
make a good performance web → Fast & Lightweight Image Optimization

❏ And the most requested image type is JPG What
make a good performance web → Fast & Lightweight Image Optimization References: ❏ HTTP Archieve

Image files contain a lot of information that is useless
on the Web: ❏ Date ❏ Device Make ❏ Device Model ❏ Location ❏ Etc. What make a good performance web → Fast & Lightweight Image Optimization

None of those informations is used by the browser and
it contributes to file size bloat. What make a good performance web → Fast & Lightweight Image Optimization

Tools to optimize images: ❏ Smush It ❏ ImageOptim ❏
Tiny PNG ❏ Tiny JPG What make a good performance web → Fast & Lightweight Image Optimization

❏ Whenever your web browser fetches a file (a page,
a picture, etc) from a web server, it does so using HTTP. ❏ More HTTP request = more load time What make a good performance web Minimum HTTP Request

There are ways to reduce HTTP request: ❏ Bundling all
assets into 1 file ❏ Load-on-demand assets ❏ Lazy load images ❏ Image spriting What make a good performance web Minimum HTTP Request

jquery.js What make a good performance web → Minimum HTTP
Request Bundling all assets into 1 file plugin-1.js plugin-2.js plugin-3.js bundle.js This method also applies to CSS files.

What make a good performance web → Minimum HTTP Request
Bundling all assets into 1 file “However, the obsession with blindly reducing down to one file isn’t healthy.” - getify.com

Bundling all assets into 1 file ❏ Bundled JS file size can up to 500KB-1MB. HTTP request is reduced, but it ends up forcing user to download 1 bulk file in 1 request. ❏ As the web grows, more dependencies might be added. Resulting bigger file size to download.

Load-on-demand assets ❏ Load asset whenever needed. ❏ Suitmedia use Modernizr to load asset asynchronously.

Load-on-demand assets <script src="jquery.js"></script> <script src="moment.js"></script> <script src="datepicker.js"></script> <script src="someImageSlider.js"></script> <script src="fancyLightboxThingy.js"></script> <script src="oneMore.js"></script> <script src="main.js"></script>

Load-on-demand assets <script src="main.js"></script>

→ Load-on-demand Assets Load single asset Modernizr.load({ load: ‘path/to/jquery.js’, complete: function () { // jQuery is loaded // Do your things } });

→ Load-on-demand Assets Load multiple assets asynchronously Modernizr.load({ load: [‘jquery.js’, ‘moment.js’], complete: function () { // jQuery and Moment is loaded // Do your things } });

→ Load-on-demand Assets Load multiple assets sequentially Modernizr.load([ { load: ‘jquery.js’ }, { load: ‘needJquery.js’, complete: function () { // Do your things } } ]);

If you have a long web page with 20 or
30 images in it, how many of them will be seen by your visitor? By default browser will download all images no matter what. What make a good performance web → Minimum HTTP Request Lazy load images

Suitmedia use jQuery unveil to lazy load images. What make
a good performance web → Minimum HTTP Request Lazy load images <img src=“loader.gif” data-src=“original.jpg”> $(function () { $(‘img’).unveil(); }); Lazy load demo | no lazy load demo

❏ Combining several images into 1 image can also reduce
http request. What make a good performance web → Minimum HTTP Request Image spriting

❏ Then use CSS background-position property. ❏ Demo What make
a good performance web → Minimum HTTP Request Image spriting

❏ WebPagetest ❏ Chrome developer tool Measure your site performance

❏ Online service that will determine your site performances. ❏
Test on any browsers from any server. ❏ Bandwidth throttling. Measure your site performance WebPagetest

❏ Open devtool. ctrl+shift+i (Win), CMD+Options+i. ❏ Navigate to timeline
tab. ❏ Activate Frames Node. ❏ Start recording. Measure your site performance Chrome Developer Tool

Question? [email protected]

Performance as part of UX

Performance as part of UX

More Decks by Bobby

Other Decks in Technology

Featured

Transcript