12 Ways to Speed Up Your Mobile Site

  • 7,213 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,213
On Slideshare
0
From Embeds
0
Number of Embeds
83

Actions

Shares
Downloads
22
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 12WAYS TO SPEED UP YOUR MOBILE SITE
  • 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. 1 AVOID LARGE FRAMEWORKS Frameworks and libraries can be needlessly large. Pare them down to the functionality your site uses.
  • 4. 2 USE CSS FOR BUTTONS Using images for buttons creates an unnecessary download. Instead use CSS to create page elements like buttons.
  • 5. 3 COMPILE & MINIFY Compile multiple scripts that will be used together to avoid separate downloads. Minify them to save processing time.
  • 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. 5 MINIMIZE REDIRECTS Redirect chains bounce visitors from one URL to another, extending the time before page loading can begin.
  • 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. 7 OPTIMIZE IMAGES Needlessly downloading large images and resizing them to fit is a waste of bandwidth and increases download & rendering time.
  • 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. 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. 10DON’T HIDE Hidden elements are needless bandwidth. If an element isn’t going to show up, why even download it? {display:  none;}  
  • 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. 12CACHE & REUSE Logos and icons often appear multiple times over a visit. Caching them prevents the visitor from having to re-download.
  • 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