Your SlideShare is downloading. ×
0
12WAYS
TO SPEED UP
YOUR
MOBILE SITE
WHY WORRY ABOUT
SITE SPEED?
Expect a mobile page to
load in 2 seconds or less.47%OF VISITORS
Abandon a site that takes 3
o...
1 AVOID LARGE
FRAMEWORKS
Frameworks and
libraries can be
needlessly large.
Pare them down to
the functionality
your site u...
2 USE CSS FOR
BUTTONS
Using images for
buttons creates an
unnecessary
download. Instead
use CSS to create
page elements li...
3 COMPILE &
MINIFY
Compile multiple
scripts that will be
used together to
avoid separate
downloads. Minify
them to save
pr...
4 USE A
GLOBAL CDN
With datacenters all
over the globe,
content delivery
networks can use
the shortest and
fastest route t...
5 MINIMIZE
REDIRECTS
Redirect chains
bounce visitors
from one URL to
another, extending
the time before
page loading can
b...
6 CUT DOWN
REQUESTS
Each and every
script or image
requires requesting
the item from the
server.The latency
– or the time ...
7 OPTIMIZE
IMAGES
Needlessly
downloading large
images and resizing
them to fit is a waste
of bandwidth and
increases downl...
8 USE SPRITES
FOR ICONS
Load just one image
with all of your
icons and use CSS
positioning to
display only the
icon needed...
9 DON’T BLOCK
RENDERING
Faster rendering pages
appear to load quicker.
Put off loading external
JavaScript files until aft...
10DON’T HIDE
Hidden elements
are needless
bandwidth. If an
element isn’t going
to show up, why
even download it?
{display:...
11LAZY LOAD
EVERYTHING
First load only what
you absolutely need
to render the view.
Then load slower
page elements that
ar...
12CACHE &
REUSE
Logos and icons
often appear
multiple times over
a visit. Caching
them prevents the
visitor from having
to...
TO SPEED UP
MOBILE SITE
12
WAYS
YOUR
Avoid large frameworks
Use CSS for buttons
Compile and minify
Use a global CDN
Minimi...
Upcoming SlideShare
Loading in...5
×

12 Ways to Speed Up Your Mobile Site

10,040

Published on

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,040
On Slideshare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
25
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "12 Ways to Speed Up Your Mobile Site"

  1. 1. 12WAYS TO SPEED UP YOUR MOBILE SITE
  2. 2. WHY WORRY ABOUT SITE SPEED? Expect a mobile page to load in 2 seconds or less.47%OF VISITORS Abandon a site that takes 3 or more seconds to load For every tenth of a second of load time. 40%OF VISITORS 1%CONVERSION DECREASE sources: gomez.com, akamai.com, amazon.com
  3. 3. 1 AVOID LARGE FRAMEWORKS Frameworks and libraries can be needlessly large. Pare them down to the functionality your site uses.
  4. 4. 2 USE CSS FOR BUTTONS Using images for buttons creates an unnecessary download. Instead use CSS to create page elements like buttons.
  5. 5. 3 COMPILE & MINIFY Compile multiple scripts that will be used together to avoid separate downloads. Minify them to save processing time.
  6. 6. 4 USE A GLOBAL CDN With datacenters all over the globe, content delivery networks can use the shortest and fastest route to deliver your page.
  7. 7. 5 MINIMIZE REDIRECTS Redirect chains bounce visitors from one URL to another, extending the time before page loading can begin.
  8. 8. 6 CUT DOWN REQUESTS Each and every script or image requires requesting the item from the server.The latency – or the time it takes the server to respond – adds up on request heavy pages.
  9. 9. 7 OPTIMIZE IMAGES Needlessly downloading large images and resizing them to fit is a waste of bandwidth and increases download & rendering time.
  10. 10. 8 USE SPRITES FOR ICONS Load just one image with all of your icons and use CSS positioning to display only the icon needed for each instance.
  11. 11. 9 DON’T BLOCK RENDERING Faster rendering pages appear to load quicker. Put off loading external JavaScript files until after the page has rendered.
  12. 12. 10DON’T HIDE Hidden elements are needless bandwidth. If an element isn’t going to show up, why even download it? {display:  none;}  
  13. 13. 11LAZY LOAD EVERYTHING First load only what you absolutely need to render the view. Then load slower page elements that aren’t immediately on screen - like Social Buttons.
  14. 14. 12CACHE & REUSE Logos and icons often appear multiple times over a visit. Caching them prevents the visitor from having to re-download.
  15. 15. TO SPEED UP MOBILE SITE 12 WAYS YOUR Avoid large frameworks Use CSS for buttons Compile and minify Use a global CDN Minimize redirections Cut down requests Optimize images Use sprites for icons Don’t block rendering Don’t hide Lazy load everything Cache & reuse
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×