12 Ways to Speed Up Your Mobile Site

15
12 WAYS TO SPEED UP YOUR MOBILE SITE

description

 

Transcript of 12 Ways to Speed Up Your Mobile Site

Page 1: 12 Ways to Speed Up Your Mobile Site

12 WAYS TO SPEED UP

YOUR MOBILE SITE

Page 2: 12 Ways 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 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

Page 3: 12 Ways to Speed Up Your Mobile Site

1 AVOID LARGE FRAMEWORKS

Frameworks and libraries can be needlessly large. Pare them down to the functionality your site uses.

Page 4: 12 Ways to Speed Up Your Mobile Site

2 USE CSS FOR BUTTONS

Using images for buttons creates an unnecessary download. Instead use CSS to create page elements like buttons.

Page 5: 12 Ways to Speed Up Your Mobile Site

3 COMPILE & MINIFY

Compile multiple scripts that will be used together to avoid separate downloads. Minify them to save processing time.

Page 6: 12 Ways to Speed Up Your Mobile Site

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.

Page 7: 12 Ways to Speed Up Your Mobile Site

5 MINIMIZE REDIRECTS

Redirect chains bounce visitors from one URL to another, extending the time before page loading can begin.

Page 8: 12 Ways to Speed Up Your Mobile Site

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.

Page 9: 12 Ways to Speed Up Your Mobile Site

7 OPTIMIZE IMAGES

Needlessly downloading large images and resizing them to fit is a waste of bandwidth and increases download & rendering time.

Page 10: 12 Ways to Speed Up Your Mobile Site

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.

Page 11: 12 Ways to Speed Up Your Mobile Site

9 DON’T BLOCK RENDERING

Faster rendering pages appear to load quicker. Put off loading external JavaScript files until after the page has rendered.

Page 12: 12 Ways to Speed Up Your Mobile Site

10 DON’T HIDE

Hidden elements are needless bandwidth. If an element isn’t going to show up, why even download it?

{display:  none;}  

Page 13: 12 Ways to Speed Up Your Mobile Site

11 LAZY 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.

Page 14: 12 Ways to Speed Up Your Mobile Site

12 CACHE & REUSE

Logos and icons often appear multiple times over a visit. Caching them prevents the visitor from having to re-download.

Page 15: 12 Ways to Speed Up Your Mobile Site

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