Developing High Performance Web UIs

Product development companies are continuously challenged with coming up with High Performance UI’s. We firmly believe that exemplary user experience is a result of design-led innovation delivered by the right mix of experiential design and technology-assisted performance. Sharing some learnings and insights based on our skills and experiences.

Amol Patil Product Development Manager

Developing High Performance Web UIs

Typical Performance Bottlenecks

Network – HTTP Request/Response sizes, DNS, redirects

Page Size, Structure - Resources loading, page layout, DOM loading, initial Styling

Page Action – Non-optimized Java scripts, onLoad Events, User Interactions

Rendering – CSS, Animation, UI Repaint

Data Handling – Redundant data fetch, DOM Manipulation, Multiple data fetch callsIntroduction

Optimization Techniques

NETWORK

• Reduce number of HTTP requests, files

• Use Content Delivery Network

• Caching

• Avoid bad request, Minimize DNS lookups and redirects

• Minimize request/Cookies size

PAGE

• Reduce download file size – Compression, Obfuscation, Minification, remove unused CSS, JS

• Styles @top and Scripts @bottom

• Defer Java script Loading

• CSS Image Sprites

• Remove empty image src

RENDERING

• Maximize Parallel Download

• Optimize/Compress Image

• Use efficient CSS selectors

• Specify a character set in response header

DATA

• Minimize DOM Access

• Reduce number of DOM nodes & complexity

• Use efficient CSS selectors

• Specify a character set in response header

• Combine Data fetch requests

Tools

ANALYSIS

YSlow- Analyses web pages and suggests ways to improve their performance based on a set of rules for high performance web pages

Page Speed- Evaluates the performance of web pages and get suggestions on how to improve them

Chrome, Safari, IE developer tools- Allows web developers and programmers deep access into the internals of the browser and their web application for Chrome Safari and IE

FireBug- Allows inspect, edit and monitor CSS, HTML, JavaScript and Net requests in any web page.

Live HTTP Headers- View HTTP headers of a page and while browsing

REDUCTION

JS Minifying - Closure Compiler, JSMin, YUI Compressor

CSS Minifying - YUI Compressor, cssmin.js

HTML Minifying - Page Speed

Image Compression - GIMP, jpegtran, jpegoptim, OptiPNG, PNGOUT

SpriteMe - Create CSS sprites

HTML5 Boilerplate - Helps you build fast, robust, and adaptable web apps or sites with all in one little package

JAVA SCRIPT

JS Lint- Java script Code Quality tool

jsperf.com- JS benchmarking

xstats.js- Performance monitoring of entire app

DOM Monster- Analyze the DOM, gives bill of health

CSS

CSS Stress Test- Figures out which CSS declarations are slowing down the page by selectively removing each one, then timing the scroll speed performance

CSS Profilers- give us much more insight into the actual speed of the CSS

CSS Lint- set of best practices including set of rules, gives helpful tips

Tips

General

Static Content From Cookie less domain- Static content, such as images, JS and CSS files, don't need to be accompanied by cookies, as there is no user interaction with these resources. You can decrease request latency by serving static resources from a domain that doesn't serve cookies.

Firebug- Enabling Firebug causes all JITs to be disabled, meaning you’ll be running the tests in the interpreter, so things will be very slow. For a fair comparison between browsers, always close Firebug before running any tests.

IE (up to version 8)- limits a script to 5 million instructions. With modern hardware, a CPU-intensive script can trigger this in less than half a second. If you have a reasonably fast system you may run into these dialogs in IE, in which case the best solution is to modify your Windows Registry to increase the number of operations (I have mine set to 80,000,000).

Tips

JAVA SCRIPT

JavaScript Timers - requestAnimationFrame() and setImmediate(), instead of setTimeout()/setInterval() to get better performance and battery life for mobile and tablets.

Reflow & Repaint - anything that changes information used to construct render tree causes reflow e.g. add/remove dom element, hide dom node, move dom node on page, adding style tweaking style programmatically, orientation change. Reflow are expensive and leads to performance hit

Avoid Style referencing - rendering engine optimizations undone by users unknowingly ‘flushing’ render queue

Do DOM changes offline - play with element OFF DOM, don’t ‘GETS’ css style in loop

Don't Scale Images in HTML - by specifying height, width

Choose <link> over @import - In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it.

References- http://www.html5rocks.com/en/tutorials/speed/html5/ http://jsperf.com/ http://velocityconf.com https://developer.motorolasolutions.com http://www.igvita.com/slides/2012/devtools-tips-and-tricks/#1, http://calendar.perfplanet.com/2011/beyond-bandwidth-ui-performance/ https://developers.google.com/speed/docs/best-practices/rules_intro http://developer.yahoo.com/yslow/

CSS

Frames per second - For UI responsiveness shoot for 60 FPS, <30 FPS is noticeable and worse on mobile.

Avoid layering - Specifying background-color, color, background for same element creates layer which in turn affects FPS

CSS 3.0 Box Shadow and Text Shadow - Older WebKit browsers had scrolling/rendering lag with large box shadows Not all CSS3 stuff is ready for prime time, and sometimes images might be the way to go, better UI performance at the expense of more data down the wire

CSS 3.0 Radial gradients for rounded corners may be awesome and save the request of an image, but they might have rendering problems in some browsers, particularly Android. We save bandwidth by not requesting an image, but the user experience suffers

CSS animations - Use hardware-accelerated CSS animations over JavaScript animations where possible, but be aware of limitations (maximum sizes of 1024x1024px in WebKit).

Avoid Filters - Avoid AlphaImageLoader completely & use gracefully degrading PNG8 , which are fine in IE. If you reallu need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

About Us

CapabilitiesClarice Technologies is a product development services company specializing in User Experience Design and cutting-edge Technologies. We take pride in working with product companies who consider User Experience (UX) as an important part of their competitive strategy. We shape Product Ideas into Exemplary User Experiences!

We have served a broad spectrum of customers both in the Enterprise & Consumer segments spread across domains like Datacenter, BFSI, Cloud, Analytics, Social, Healthcare, E-Commerce, Learning and Development to name a few. In a short span we have developed a stunning 100+ products on platforms including Desktop, Web, Tablets, Smartphones.

Product Engineering Expertise• Apps for iOS, Android, and Windows phone platforms

• HTML5/CSS, JavaScript, JQuery, Ext JS

• GWT, Flash/Flex, Silverlight, Template engines, CMS

User Experience Expertise• Information Architecture, Interaction & Visual Design

• Enterprise and Consumer product User Interfaces and RIAs

• User research, Task flows, Use cases, Usability testing

Clarice Technologies

For more information : www.ClariceTechnologies.com+91.20.4078.9520info@claricetechnologies.com

Pune | Bangalore | USA