Why is My Site Slow?

Optimising websites

& catering for the mobile web

Sean Ockert

Why optimise my site?

Mobile phone web-browsing

Users with slow connections

Reduced bandwidth

More responsive experience

Satisfied audience!

Credibility

AOL and loading….

10-15% active users (in US) are still on dial-up (down from 45% in 2005)

Remote areas still rely on satellite connections – premium quota

http://www.pewinternet.org/press_release.asp?r=305

3G access integrated into laptops

Mobile browsing

Rapidly increasing mobile phone web browsing

- iPhone, blackberry, palm, nokia

- 2.6million iPhone, 1.1million Touch hits/month at Wordpress.com

*http://ma.tt/2008/07/ie6-independence/

3.3Billion phones

Big potential market

Impatience - Changing user expectations

Just like accessibility,

a slow loading website can inhibit visitors.

Page load timesusers will tolerate

<1 sec - instantaneous, complete attention

5-10 sec - flipping to another tab

10+ sec - reaching for the back button...

How long is your attention span?

1999

2004

12

Seconds

4

So how can I improve my front end?

Yahoo’s key performance rules

1. Make fewer HTTP requests

2. Use a CDN

3. Add an Expires header

4. Gzip components

5. Put CSS at the top

6. Put JS at the bottom

7. Avoid CSS expressions

8. Make JS and CSS external

9. Reduce DNS lookups

10. Minify JS

11. Avoid redirects

12. Remove duplicate scripts

13. Configure ETags

+ more…

Things to fix (in order of importance):

Why Slow?

Plugin for the Firebug console in Firefox(examines pages based on these criteria)

YSlow

Helps to pinpoint clientside performance bottlenecks

http://developer.yahoo.com/performance/

Experiment: Most big sites are not that optimised

F 38%

F 39%

20 JS files!?

F 51%

A little bit better…

F 59%

F 58%

F 56%

A 99%

Ah, simplicity

Build another lane and traffic will fill it

Number of page objects doubled since 2003

0

50

100

150

200

250

300

350

J-95 J-96 J-97 J-98 J-99 J-00 J-01 J-02 J-03 J-04 J-05 J-06 J-07 J-08

0

10

20

30

40

50

60

Average Page Size (kB)

Average number of objects

Sources: Domenech 2007, Gomez 2008

Growth of Average Webpage Size and Number of Objects

312.1

93.7

14.1

25.7

2.3

49.9

*http://www.websiteoptimization.com/speed/tweak/average-web-page

Matching the amount of data to the bandwidth – good idea?

Consider how objects load

HTTP requests are expensive

Only 2 HTTP concurrent connections per domain

Collate your CSS and JS files

(The average number of external scripts is 7!*)

Let JS load last

Gzip everything!

Can reduce file sizes by over 70%

jquery.js

Uncompressed: 97kB

Minified & gzipped: 16kB!

Gzip works on

CSS, HTML, JS, JSON & XML

by Rune T: www.flickr.com/photos/minebilder/62605938/

Squeezing out more performance

Reduce DOM elements

Add expires header on objects (or cache control)

Disable entity tags

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">

Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"

</FilesMatch>

FileETag None

Any others?

Limit cookies

No more than 4 DNS

Add trailing slash to links

Consider optimised png’s instead of gifs (and minimise colours)

Cache AJAX

CSS layouts render faster than tables

So does this apply to mobile browsers?

Gzip and caching support for phones?

http://www.cloudfour.com/mobile/

Gzip Support for mobile phones

Gzip

83%

No Gzip

17%

Caching Support for mobile phones

Caching*

68%

No Caching

32%

*Caching only for objects <25kB

Best support from:

Safari Mobile (iPhone)

Opera Mini 3.x

Webkit (Symbian & Android-based)

Very diverse number of browsers

Cloudfour Results (1300 phones)

Bit counting

Mobile download quota still a premium

Consider alternative, minimal pages for mobile browsers

*http://chrispederick.com/work/user-agent-switcher/

Can test in mobile browsers using User Agent Switcher*

Smaller screen resolutions

Conclusion

It’s easy to optimise the clientside of your site:

- Reduce HTTP requests

- Gzip!

- Properly configure Expires Headersand Etags in your htaccess

Consider support for mobile phone browsers:

- Keep your objects smaller than 25kBfor caching

- Alternate mobile-friendly pages

Thankyou!

http://catalyticat.com