Clarice Technologies - High Performance Web UIs
 

Clarice Technologies - High Performance Web UIs

on

  • 2,070 views

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 ...

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.

Clarice Technologies
www.claricetechnologies.com
Product Development Services Company specializing in User Experience Design and cutting-edge Technologies.

Statistics

Views

Total Views
2,070
Views on SlideShare
680
Embed Views
1,390

Actions

Likes
1
Downloads
8
Comments
0

3 Embeds 1,390

http://claricetechnologies.com 1383
http://www.linkedin.com 4
https://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Clarice Technologies - High Performance Web UIs Clarice Technologies - High Performance Web UIs Presentation Transcript

  • Developing HighPerformance WebUIs 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.
  • Developing High PerformanceWeb UIsAmol Patil Product Development Manager
  • 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
  • NETWORK PAGE • Reduce number of HTTP requests, files • Reduce download file size – Compression, • Use Content Delivery Network Obfuscation, Minification, remove unused CSS, JS • Caching • Styles @top and Scripts @bottom • Avoid bad request, Minimize DNS lookups • Defer Java script Loading and redirects • CSS Image Sprites • Minimize request/Cookies size • Remove empty image srcOptimizationTechniques RENDERING DATA • Maximize Parallel Download • Minimize DOM Access • Optimize/Compress Image • Reduce number of DOM nodes & complexity • Use efficient CSS selectors • Use efficient CSS selectors • Specify a character set in response header • Specify a character set in response header • Combine Data fetch requests
  • ANALYSIS REDUCTION YSlow- Analyses web pages and suggests ways to JS Minifying - Closure Compiler, JSMin, YUI improve their performance based on a set of rules for Compressor high performance web pages CSS Minifying - YUI Compressor, cssmin.js Page Speed- Evaluates the performance of web HTML Minifying - Page Speed pages and get suggestions on how to improve them Image Compression - Chrome, Safari, IE developer tools- Allows web GIMP, jpegtran, jpegoptim, OptiPNG, PNGOUTTools developers and programmers deep access into the SpriteMe - Create CSS sprites internals of the browser and their web application for Chrome Safari and IE HTML5 Boilerplate - Helps you build fast, robust, and adaptable web apps or sites with all in one little FireBug- Allows inspect, edit and monitor package CSS, HTML, JavaScript and Net requests in any web page. Live HTTP Headers- View HTTP headers of a page and while browsing JAVA SCRIPT CSS JS Lint- Java script Code Quality tool CSS Stress Test- Figures out which CSS declarations jsperf.com- JS benchmarking are slowing down the page by selectively removing each one, then timing the scroll speed performance xstats.js- Performance monitoring of entire app CSS Profilers- give us much more insight into the DOM Monster- Analyze the DOM, gives bill of health actual speed of the CSS CSS Lint- set of best practices including set of rules, gives helpful tips
  • General Static Content From Cookie less domain- Static content, such as images, JS and CSS files, dont 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 doesnt 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 triggerTips 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).
  • JAVA SCRIPT CSS JavaScript Timers - requestAnimationFrame() and Frames per second - For UI responsiveness shoot for 60 setImmediate(), instead of setTimeout()/setInterval() to get FPS, <30 FPS is noticeable and worse on mobile. better performance and battery life for mobile and tablets. Avoid layering - Specifying background- Reflow & Repaint - anything that changes information color, color, background for same element creates layer used to construct render tree causes reflow e.g. which in turn affects FPS add/remove dom element, hide dom node, move dom CSS 3.0 Box Shadow and Text Shadow - Older WebKit node on page, adding style tweaking styleTips programmatically, orientation change. Reflow are browsers had scrolling/rendering lag with large box shadows Not all CSS3 stuff is ready for prime time, and expensive and leads to performance hit sometimes images might be the way to go, better UI Avoid Style referencing - rendering engine optimizations performance at the expense of more data down the wire undone by users unknowingly ‘flushing’ render queue CSS 3.0 Radial gradients for rounded corners may be Do DOM changes offline - play with element OFF awesome and save the request of an image, but they DOM, don’t ‘GETS’ css style in loop might have rendering problems in some browsers, particularly Android. We save bandwidth by not Dont Scale Images in HTML - by specifying requesting an image, but the user experience suffers height, width CSS animations - Use hardware-accelerated CSS Choose <link> over @import - In IE @import behaves animations over JavaScript animations where the same as using <link> at the bottom of the page, so its possible, but be aware of limitations (maximum sizes of best not to use it. 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. 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/
  • Capabilities Clarice 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 includingAbout Us 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 TechnologiesFor more information :www.ClariceTechnologies.com+91.20.4078.9520info@claricetechnologies.comPune | Bangalore | USA