site speed tuneup: putting your code on a diet

Site Speed Tune Up – Putting Your Code on a Diet

Brennan Heyde

Technical Director – Professional Services

3/8/2012

Overview

• Site Speed – Why Should You Care?• How to analyze your site speed• Techniques used to increase troubleshoot

problems and increase your site speed• Testing Tools• Beyond Coding – Tools to take your site

speed to the next level

Why you should care – Visitor Abandonment

• Reduced Bounce Rate - According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded within 3 seconds.

Source: Kiss Metrics

Conversion Rate

• A 1 second delay in page response can result in a 7% reduction in conversions – Kiss Metrics

• From Shopzilla.com: Improving the site speed of this popular ecommerce portal by 20% resulted in an improvement in conversion rates of 7% to 12%.  Page views went up by 25%.

• Tests at Amazon, also in 2007 revealed similar results: every 100 ms (that’s 1 tenth of a second) increase in page load time of Amazon.com decreased sales by 1%.

SEO – Used in Google’s Ranking

• April 2010 – Site Speed is one of the 200 metrics used to rank a web page.

• “While site speed is a new signal, it doesn't carry as much weight as the relevance of a page. Currently, fewer than 1% of search queries are affected by the site speed signal in our implementation”

Where Do I start?

1. Front End Optimization- Reduce number of server requests

- Combine CSS/JS Files

- Use Sprites for icons

- Optimize Images

- Utilize Compression / Caching

- Minify CSS / JavaScript

- Fix all broken Images (404 errors)

- Calls to External Websites (facebook)

Image Sprite

Compression – How It Works

Compression can be turned on in your .htaccess file on your server

gidnetwork.com/tools/gzio-test.php

Tools - https://developers.google.com/pagespeed/

Results:

How Fast is My Site?Test with FireBug /FireFox / Chrome Developer Tools

Other Tools:• www.pagespeedtest.org• http://tools.pingdom.com/fpt/• http://developer.yahoo.com/yslow/

Google Webmaster ToolsLet Google tell you the speed of your website:

* Data comes from users with Google Toolbar

2. Backend Optimization

• Bad Coding / Logic Errors (Typically Using a 3rd party module)

• Poor Performing Modules / Non Updated Modules / Module Maintenance

• Server Capacity – Can your server handle your traffic? Do you know your servers limits?

Bad Coding• Calls to external files / Scripts• Loops / Logic Errors• Iframes

Tools Used for Troubleshooting

• Miva Empresa Engine Logging

• Any 5.10 and higher Miva Merchant Engine can log every action to find module performance issues. (see release notes for implementation)

• Example: isokineticsinc.com

Modules

• Poor Performing Modules• Not Keeping Modules up to date• Module Maintenance

• Large Database Files

Server Capacity

• Who knows the specs of their server?• Who knows their traffic?

- Unique Visitors/day

- Average Pageviews/ visitor• Make sure your server is not the cause of your

site’s slow performance• Quality Miva Merchant Host

Visits per Day / Page Views

Hits Per Day

0

200,000

400,000

600,000

800,000

1,000,000

1,200,000

1,400,000

1,600,000

1,800,000

2,000,000

5,00

06,

308

10,00

0

20,00

0

30,00

0

40,00

0

50,00

0

75,00

0

100,0

00

200,0

00

300,0

00

400,0

00

500,0

00

Visits/Day

Pag

e V

iew

s

Page Hits/Day

Hits/Second Needed to Handle VisitorsServer Capacity Needed in Hits/Second

0.0

5.0

10.0

15.0

20.0

25.0

30.0

35.0

5,00

06,

308

10,00

0

20,00

0

30,00

0

40,00

0

50,00

0

75,00

0

100,0

00

200,0

00

300,0

00

400,0

00

500,0

00

Visits/Day

Hit

s/S

eco

nd

Hits/Second

Server Testing Tools

• ab – Part of Apache, will show how many requests per second your Apache installation is capable of serving

• Httperf  -  It provides a flexible facility for generating various HTTP workloads and for measuring server performance

* Always test in a DEV environment.

Recap

Three Areas to Look At To Improve Site Speed

1. Front End Optimization

2. Backend Optimization

3. Server Performance

What Else Can You Do?

What Next?

Merchant Optimizer – Converts all your dynamic pages into static HTML pages.

- Will lose some dynamic content such as mini basket.

- 38 times server performance increase in our testing

2.87

4.28

6.93

12.63

20.9418.96

17.1815

143.63

222.45

365.71

582.51

797.2704.37 704.64

594.85

1.81

2.47

3.59

7.55

12.8613.92 14.32 14.3

1

10

100

1000

1 2 4 8 16 24 32 40

Current Dynamic

Current Static

Old Dynamic

3rd Party Services

• Altruik – Domain Sharding• Loading images from different sub domains at the

same time

• Front End Content Delivery Network• Blaze.io • Yotta.com• CloudFlare.com

Q/A

Any Questions?

Thank You!