Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Rules for Mobile Performance Optimization

No description
by

Ayat Hannoun

on 13 January 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Rules for Mobile Performance Optimization

Rules for Mobile Performance Optimization
Overview
Strategies for improving
performance
Related Works
Introduction
Performance success of website.
Studies
Page that takes longer than three seconds to load
Studies
Conclusion
Challenges & external issues.
Slow Mobile Performance .
Problem
Limitations for mobile performance
Thank you!
Studies
Latency can vary widely
Web pages are bigger than ever
An overview of techniques to speed page loading
Article, August 2013
By Tammy Everts

Introduction.

Studies.

Limitations for Mobile Performance.

Problem.

Related Works.

Strategies for improving performance.

Conclusion.
Download speeds
Problem :
1. Reduce Request.
2. Reduce Payload.
3. Optimize Client-Side Processing.
proposed
Solution :
Ayat Hannoun
Improvements in page-load times lead to :
Sales.
Revenue .
Customer Satisfaction.
2006
10 search result per page
30 search result per page
Revenue dropped by 20%
half-seconds to load
2011
85% expected equal to or better
63% less likely to buy from the same company via other channels
2012 study of 200 leading e-commerce sites
Lower bandwidth.
Smaller memories.
Lower processing power.
These challenges are compounded by external issues !!
Image
CSS
Java Script
etc...
Average Web page carries a payload of more than 1MB and contains at least 80 resources.
Over the next 3 years pages could surpass 2MB
Factors such as the weather, and even the direction the user is facing, can have a significant impact.
M.Sites are not a Cure-All for Mobile Performance Pains.
High user demands
Large Web pages
Poor connection speeds
by developing smaller, faster m.sites
$7.00 Revenue
$5.50 Full site
$1.00 m.site
$0.50 app
Time required to display web page
20% Loading the page's HTML.
80% Loading the resources.
Mobile browsers :
Slower to parse HTML and execute JavaScript.
Caches are much smaller than those of desktop browsers.
Reduce HTTP Requests.
Eliminate Images.
Avoid Redirects.
Avoid or Minimize Cookies.
Cache data.
Making the Mobile Web Faster:
1
Reduce Requests
Consolidate Resources.
JavaScript & CSS
common
files
shared across multiple pages
Sprites linear grid in one large image
multiple images combined
Strategies for improving
performance
1
Reduce Requests
Use Browser Caching and Local Storage.
HTML5 Local Storage
5MB per domain.
This capability makes local Storage very well suited for client-side caching.
Strategies for improving
performance
1
Reduce Requests
Eliminate Redirects.
Strategies for improving
performance
Reduce Payload
2
Compress Text and Images.
Compress on
the server
Decompress in the browser
Minify code.
Reduce Payload
2
Resize Image
High-resolution Image
Waste bandwidth, processing
time, and cache space
Replace images with smaller versions for mobile sites.
Replace image with a higher resolution version on the onload or ready event
Eliminates spaces, newline characters,
and comments
Strategies for improving
performance
Optimize Client-Side Processing
3
Client side
Slower CPUs
Less Memory
Efficiency of page processing
Strategies for improving
performance
Optimize Client-Side Processing
3
Defer Loading & Execution Scripts
EX: scripts that support interactive user behavior
Many script libraries aren’t needed until after a page has finished rendering.
Use AJAX for Progressive Enhancement
AJAX
XML + JavaScript
Fetch data from a Web server without refreshing the page

Display updated data in a section of a page without reconstructing the entire page.
Strategies for improving
performance
Optimize Client-Side Processing
3
Adapt to the Network Connection
Preloading resources in anticipation of future requests is usually smart !!!!!
Replace Click Events with Touch Events
OnClick
TouchedEnd
Strategies for improving
performance
Optimize Client-Side Processing
3
Strategies for improving
performance
Optimize Client-Side Processing
3
2009
40%
2010
57%
Poor mobile performance hurts companies on the other platforms
HTTP Resources
m.Facebook
Questions?
Loading
Full transcript