Performance Optimisation For Web & Mobile

Performance Optimisation forWeb & Mobile

Some introductory tips to help you optimise your digital landscape.

What is Performance?

Performance = Responsiveness vs Benchmarks We are getting used to the web and mobile as tools for our day-to-day tasks! 500 ms slower = 20% drop in traffic (Google) 400 ms slower = 5-9% drop in (full-page) traffic (Yahoo)  100 ms slower = 1% drop in sales (Amazon) 

IT Key Priorities

IT Role as Defined byBusiness Users 

How to make your sitesfaster today80-90% of the allocation is on the front-end, focus on the front-end, it's easier! IE8 CPU Usage - Top 100 sites:84% Layout, rendering, formatting, etc. 16% JavaScript & DOM

IE8 CPU Usage - Top 100 AJAX sites: 67% Layout, rendering, formatting, etc. 33% JavaScript    & DOM

Most developers are buildingWeb Apps 

Complexity and UserExpectations 

Productivity EqualsPerformanceThe key productivity in interactive applications is response time:

• .1 second is instantaneous• 1 second is when a response time is perceived• 10 seconds is when users lose focus on the interaction

 Some basic rules• Simple and frequent tasks: 1 second or less• Common tasks: 2 to 4 seconds• Complex tasks: 8 to12 seconds

"We get much more traffic than them."

Industry and Competitor Analysis: What are the competitors doing and

what are you not doing?

Industry and CompetitorAnalysis Example So Bob wants to order a new telephone line...

Telkom (Web & Mobile)

vs.

Neotel (Web)

vs.

British Telecom (Web)

Optimised Websites and Mobisites = More Customers = Better

Profits!

"But it works perfectly onmy computer."

Technology considerations: Who are your users and what technology do they use (average browser sizes,

mobile screen sizes,most popular, etc).

Technology considerations

The Problem Interoperability, portability, device diversity and size leads to configuration, deployment and production issues that impact performance.

Look at using Web Standards!

Technology considerations

Web and the 80/20 rule

IE is still the most widely used browser, but is on the decline  Windows: IE ±70% and FF ±28%

Mobile

Mobile page size <25k (uncompressed)

Design for 2-3 user agents max!

"We already have a website."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 devicebased on the learnings from

the technology analysis.

Optimising Delivery

"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." Randal Rust

Optimise tasks for mobile use, the mobile web is here - most developers are not ready!

Optimising Delivery

Optimising Delivery

• Size does matter• Text equivalents necessary• Resizing (server level)• Accessibility: Resizing (page level: fonts)• Don't trust fonts!• Tables (mobile)• Target audience (device support) • Minimise text entry (mobile)• Clickable is always better than input (mobile)• Meet expectations• Ensure Readability• Test, test, test and test again..

"You just have to click on the little box in the

corner."Thinking about Navigation.

Navigation

"..it's about creating a complete system, It's about looking for the whole." Clement Mok (on Navigation in building architecture)

Navigation is wayfinding. Never treat it as separate to design!

Navigation

Conversion Goals 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?  Information ArchitectureSteps to optimise site navigationFocus groups with all role players and card-sorting

The ergonomics of 2.0Cognitive ergonomics / Macro ergonomics /Virtual ergonomics

Navigation

Mobile: How deep do you go?• Ensure clarity in linking• Don't link to something you can't get• Make access easy• Minimise navigation bars on top• Main content - first!• Browsing time is a factor• Easier to scroll than click• Everything has to look the same:

o Consistency in terminologyo Consistency in visual designo Make it familero The key is memorability!

• Manage your errors!

"We are already on Facebook."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.

Social Optimisation

"The power of social networks-increase business efficiency, energize markets, improve information sharing, streamline business processes and enable collaborative efforts" IBM

Social Bookmarking (Sharing)• Delcious• Digg• Muti (African) • Amatomu (South African)• Afrigator (African)• Facebook• etc.

Social Optimisation

Facebook Connect• Trusted authentication• Real Identity• Friend Linking• Dynamic Privacy• Social Distribution (Sharing)

 Google Friend Connect & Twitter & OpenID, etc. • Trusted authentication

"Who is Bob and what is he doing on my site?"

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?

User Profiling

Personas "Personas are fictitious characters that are created to represent the different user types within a targeted demographic that might use a site or ..." http://en.wikipedia.org/wiki/Personas Sample Personas:– 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

– 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

– David - 50, male professional, interested in business networking, prospective employer researches potential employees. Baby Boomer. Advertising target: Cars, Flights

User Profiling

Facebook Profile TargetingLSM - Demographic information• Superficial - yet most advanced compared to other platforms

o Age o Countryo Languageo Gendero Additional Interests

• Contact Information• Work Information 

 The Marketing Funnel 

Test, test, test and test again..

Thank you! Any Questions?

FormFunction Digital Consultants (Pty) Ltd+27 21 462 0257

www.twitter.com/formfunctionwww.formfunction.co.za

Joey da Silvajoey@formfunction.co.za

Skype: dasijoe twitter.com/dasijoe

facebook.com/joeydasilva