Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Performance Optimisation For Web & Mobile


Published on

Short overview on performance optimisation for web and mobile. Focus on front-end optimisation which is ±90% of most performance related consideration. Put together for conference in July 2009. Apologies to anyone referenced but not credited. Will happily do so on request!

Published in: Technology, Business
  • Be the first to comment

Performance Optimisation For Web & Mobile

  1. 1. Performance Optimisation for Web & Mobile Some introductory tips to help you optimise your digital landscape.
  2. 2. What is Performance? <ul><li>Performance = Responsiveness vs Benchmarks </li></ul><ul><li>  </li></ul><ul><li>We are getting used to the web and mobile as tools for our day-to-day tasks! </li></ul><ul><li>  </li></ul><ul><li>500 ms slower = 20% drop in traffic (Google) </li></ul><ul><li>  </li></ul><ul><li>400 ms slower = 5-9% drop in (full-page) traffic (Yahoo) </li></ul><ul><li>  </li></ul><ul><li>100 ms slower = 1% drop in sales (Amazon) </li></ul><ul><li>  </li></ul>
  3. 3. IT Key Priorities <ul><li>  </li></ul>
  4. 4. IT Role as Defined by Business Users <ul><li>  </li></ul>
  5. 5. How to make your sites faster today <ul><li>80-90% of the allocation is on the front-end, focus on the front-end, it's easier! </li></ul><ul><li>  </li></ul><ul><li>IE8 CPU Usage - Top 100 sites: </li></ul><ul><li>84% Layout, rendering, formatting, etc. 16% JavaScript & DOM </li></ul><ul><li>IE8 CPU Usage - Top 100 AJAX sites: </li></ul><ul><li>67% Layout, rendering, formatting, etc. 33% JavaScript </li></ul><ul><li>     & DOM </li></ul>
  6. 6. Most developers are building Web Apps <ul><li>  </li></ul>
  7. 7. Complexity and User Expectations <ul><li>  </li></ul>
  8. 8. Productivity Equals Performance <ul><li>The key productivity in interactive applications is response time: </li></ul><ul><ul><li>.1 second is instantaneous </li></ul></ul><ul><ul><li>1 second is when a response time is perceived </li></ul></ul><ul><ul><li>10 seconds is when users lose focus on the interaction </li></ul></ul><ul><li>  </li></ul><ul><li>Some basic rules </li></ul><ul><ul><li>Simple and frequent tasks: 1 second or less </li></ul></ul><ul><ul><li>Common tasks: 2 to 4 seconds </li></ul></ul><ul><ul><li>Complex tasks: 8 to12 seconds </li></ul></ul>
  9. 9. &quot;We get much more traffic than them.&quot; Industry and Competitor Analysis: What are the competitors doing and what are you not doing?
  10. 10. Industry and Competitor Analysis <ul><li>Example </li></ul><ul><li>  </li></ul><ul><li>So Bob wants to order a new telephone line... </li></ul><ul><li>Telkom (Web & Mobile) </li></ul><ul><li>vs. </li></ul><ul><li>Neotel (Web) </li></ul><ul><li>vs. </li></ul><ul><li>British Telecom (Web) </li></ul>
  11. 11. Optimised Websites and Mobisites = More Customers = Better Profits!
  12. 12. &quot;But it works perfectly on my computer.&quot; Technology considerations : Who are your users and what technology do they use (average browser sizes, mobile screen sizes, most popular, etc).
  13. 13. Technology considerations <ul><li>The Problem </li></ul><ul><li>  </li></ul><ul><li>Interoperability, portability, device diversity and size leads to configuration, deployment and production issues that impact performance. </li></ul><ul><li>Look at using Web Standards! </li></ul>
  14. 14. Technology considerations <ul><li>Web and the 80/20 rule </li></ul><ul><li>IE is still the most widely used browser, but is on the decline </li></ul><ul><li>  </li></ul><ul><li>Windows: IE ±70% and FF ±28% </li></ul><ul><li>Mobile </li></ul><ul><li>Mobile page size <25k (uncompressed) </li></ul><ul><li>Design for 2-3 user agents max! </li></ul>
  15. 15. &quot;We already have a website.&quot; Optimising Delivery: If your core offering is services - check that your serving mechanisms are appropriate. If it is content, ensure that your formatting is appropriate for each device based on the learnings from the technology analysis.
  16. 16. Optimising Delivery <ul><li>&quot;Designer have to learn to stop trying to control the display of their pages. They have to accept that forces beyond their control will cause their designs to display differently, sometimes radically, in certain situations.&quot; Randal Rust </li></ul><ul><li>Optimise tasks for mobile use, the mobile web is here - most developers are not ready! </li></ul>
  17. 17. Optimising Delivery <ul><li>  </li></ul>
  18. 18. Optimising Delivery <ul><ul><li>Size does matter </li></ul></ul><ul><ul><li>Text equivalents necessary </li></ul></ul><ul><ul><li>Resizing (server level) </li></ul></ul><ul><ul><li>Accessibility: Resizing (page level: fonts) </li></ul></ul><ul><ul><li>Don't trust fonts! </li></ul></ul><ul><ul><li>Tables (mobile) </li></ul></ul><ul><ul><li>Target audience (device support)  </li></ul></ul><ul><ul><li>Minimise text entry (mobile) </li></ul></ul><ul><ul><li>Clickable is always better than input (mobile) </li></ul></ul><ul><ul><li>Meet expectations </li></ul></ul><ul><ul><li>Ensure Readability </li></ul></ul><ul><ul><li>Test, test, test and test again.. </li></ul></ul>
  19. 19. &quot;You just have to click on the little box in the corner.&quot; Thinking about Navigation .
  20. 20. Navigation <ul><li>&quot;'s about creating a complete system, It's about looking for the whole.&quot; Clement Mok (on Navigation in building architecture) </li></ul><ul><li>Navigation is wayfinding. Never treat it as separate to design! </li></ul>
  21. 21. Navigation <ul><li>Conversion Goals </li></ul><ul><li>Do you have proper goals setup and can users find their way around the site (from start to finish). Does your navigation guide the user in reaching those goals? </li></ul><ul><li>  </li></ul><ul><li>Information Architecture </li></ul><ul><li>Steps to optimise site navigation </li></ul><ul><li>Focus groups with all role players and card-sorting </li></ul><ul><li>The ergonomics of 2.0 </li></ul><ul><li>Cognitive ergonomics / Macro ergonomics / </li></ul><ul><li>Virtual ergonomics </li></ul>
  22. 22. Navigation <ul><li>Mobile: How deep do you go? </li></ul><ul><ul><li>Ensure clarity in linking </li></ul></ul><ul><ul><li>Don't link to something you can't get </li></ul></ul><ul><ul><li>Make access easy </li></ul></ul><ul><ul><li>Minimise navigation bars on top </li></ul></ul><ul><ul><li>Main content - first! </li></ul></ul><ul><ul><li>Browsing time is a factor </li></ul></ul><ul><ul><li>Easier to scroll than click </li></ul></ul><ul><ul><li>Everything has to look the same: </li></ul></ul><ul><ul><ul><li>Consistency in terminology </li></ul></ul></ul><ul><ul><ul><li>Consistency in visual design </li></ul></ul></ul><ul><ul><ul><li>Make it familer </li></ul></ul></ul><ul><ul><ul><li>The key is memorability! </li></ul></ul></ul><ul><ul><li>Manage your errors! </li></ul></ul>
  23. 23. &quot;We are already on Facebook.&quot; Social Optimization : Can your users share content between each other. If not, how can they do this, and is it possible to retro-fit content.
  24. 24. Social Optimisation <ul><li>&quot;The power of social networks-increase business efficiency, energize markets, improve information sharing, streamline business processes and enable collaborative efforts&quot; IBM </li></ul><ul><li>Social Bookmarking (Sharing) </li></ul><ul><ul><li>Delcious </li></ul></ul><ul><ul><li>Digg </li></ul></ul><ul><ul><li>Muti (African) </li></ul></ul><ul><ul><li>Amatomu (South African) </li></ul></ul><ul><ul><li>Afrigator (African) </li></ul></ul><ul><ul><li>Facebook </li></ul></ul><ul><ul><li>etc. </li></ul></ul>
  25. 25. Social Optimisation <ul><li>Facebook Connect </li></ul><ul><ul><li>Trusted authentication </li></ul></ul><ul><ul><li>Real Identity </li></ul></ul><ul><ul><li>Friend Linking </li></ul></ul><ul><ul><li>Dynamic Privacy </li></ul></ul><ul><ul><li>Social Distribution (Sharing) </li></ul></ul><ul><li>  </li></ul><ul><li>Google Friend Connect & Twitter & OpenID, etc. </li></ul><ul><ul><li>Trusted authentication </li></ul></ul>
  26. 26. &quot;Who is Bob and what is he doing on my site?&quot; User Profiling : do you have deep profiles setup and can you mine data from the users? How easy is it for users to setup advanced profiling?
  27. 27. User Profiling <ul><li>Personas </li></ul><ul><li>&quot;Personas are fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or ...&quot; </li></ul><ul><li>  </li></ul><ul><li>Sample Personas: </li></ul><ul><ul><li>Sally - 14, female teenager. Talks with her friends through FB chat, uploads photos and loves the quiz and fun applications. Generation Y. Advertising target: Fashion </li></ul></ul><ul><ul><li>Bob - 22, male. University Grad, fluent in English, Afrikaans and Xhosa, looking to network and new job opportunity. Tyring to balance fun personal information with professional information. Tech savvy. Generation Y. Advertising target: Holidays, Further Education, Recruitment </li></ul></ul><ul><ul><li>David - 50, male professional, interested in business networking, prospective employer researches potential employees. Baby Boomer. Advertising target: Cars, Flights </li></ul></ul>
  28. 28. User Profiling <ul><li>Facebook Profile Targeting </li></ul><ul><li>LSM - Demographic information </li></ul><ul><ul><li>Superficial - yet most advanced compared to other platforms </li></ul></ul><ul><ul><ul><li>Age </li></ul></ul></ul><ul><ul><ul><li>Country </li></ul></ul></ul><ul><ul><ul><li>Language </li></ul></ul></ul><ul><ul><ul><li>Gender </li></ul></ul></ul><ul><ul><ul><li>Additional Interests </li></ul></ul></ul><ul><ul><li>Contact Information </li></ul></ul><ul><ul><li>Work Information  </li></ul></ul><ul><li>  </li></ul><ul><li>The Marketing Funnel </li></ul><ul><li>  </li></ul>
  29. 29. Test, test, test and test again..
  30. 30. Thank you! Any Questions? <ul><li>FormFunction Digital Consultants (Pty) Ltd +27 21 462 0257 </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Joey da Silva </li></ul><ul><li>[email_address] </li></ul><ul><li>Skype: dasijoe </li></ul><ul><li> </li></ul><ul><li> </li></ul>