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.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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.
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
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
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.
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