Web performance at WDCNZ

The Forgotten Art of Web Performance14th July 2011

TheForgotten Art of Web Performance

http://www.flickr.com/photos/mhzmaster/965947834/

Friday, 15 July 2011




I’m here to talk about making websites faster



Web performance is about driving more traffic to your site

The forgotten art of Web Performance14th July 2011

http://www.flickr.com/photos/darrentunnicliff/3717976312/





Web performance is about “DevOps"



Hardware

O/S

Database

Application

Web server

Network

BACK END

Third party

Images

Javascript

CSS

HTML

FRONT END

Web Performance Optimisation Basics



Hardware

Web performance comes from combination of “back-end” and “front-end” optimisations

O/S

Database

Application

Web server

Network

BACK END

Third party

Images

Javascript

CSS

HTML

FRONT END



Hardware

O/S

Database

Application

Web server

Network

BACK END

Third party

Images

Javascript

CSS

HTML

FRONT END

95% of download time comes from “Front-end”



You want to deliver content as fast as possible...

Hardware

O/S

Database

Application

Web server

Network

BACK END

Third party

Images

Javascript

CSS

HTML

FRONT END



Third party

Images

Javascript

CSS

HTML

FRONT END

You can maximise the requests you can

Hardware

O/S

Database

Application

Web server

Network

BACK END

Requests



Third party

Images

Javascript

CSS

HTML

FRONT END

by minimising request times of your stack

Hardware

O/S

Database

Application

Web server

Network

BACK END

Minimise


The Forgotten Art of Web Performance14th July 2011The forgotten art of Web Performance14th July 2011

If Average request takes 50ms to serve and 200 “agents” => 4000 requests per second



How do I fix?


http://www.flickr.com/photos/lenore-m/2515800654/





Lots of tools to help you fix your site







YSlow - 35 rules of Web performance



Pagespeed - 6 principles for speeding up



Aptimize.com



The difference web performance can make is hugehttp://www.flickr.com/photos/thebusybrain/2492945625/


http://www.flickr.com/photos/thebusybrain/2492945625/

http://www.flickr.com/photos/thebusybrain/2492945625/


It seems that some sites haven’t evolved



For web performance, some sites are stuck in the 90’s

http://www.dailystab.com/blog/wp-content/uploads/2007/12/spice-girls-vancouver-lg.jpg





Here’s a normal website




I see things a little differently




No HTTP Compression



Poor expiry settings



No CSS / JS bundling



No Spriting



Would you be proud of this ?



1.2Mb, 133 requests, 21 JS files, 3 CSS files




Why is WPO important?



Why is WPO important

“Slow websites are boring”

Slow websites are boring!



Customers are complaining about your site



Fast websites make more money



“We see a direct correlation between the speed of our services and our bottom line.

Our customers seem inclined to spend a set time on our site per session – the more pages they

can view in that time, the more they see and buy, and the more we earn.”

John MacDonald - CTO Trade Me 2006

Time is Money



WPO State of Nationhttp://www.flickr.com/photos/nznationalparty/4436793708/


http://www.flickr.com/photos/nznationalparty/4436793708/

http://www.flickr.com/photos/nznationalparty/4436793708/


Homepage hall of shame2011

160 sitesHome broadband

vs Office broadband



Key findings

Office BBandAve pageload time

6.01s

Home BBandAve pageload time

12.5s

Ave home page size

665K



Whoʼs the fastest1.17s Telecom

1.23s DOL

1.49s Snipesoft

1.58s Auckland Uni

1.59 Massey Uni

1.62s Zenbu

1.72s Geonet

1.73s School.nz

1.78s Maxx

1.59 Westpac



Whoʼs the S L O W E S T26.8s Skykiwi

20.9s The Standard

20.1s iStars

17.2s WhaleOil

16.4s NZ Yahoo

16.3s interest.co.nz

15.1s 3 News

15.1s The Big Idea

14.7s Readers Digest

14.3s Stuff



Data on Google docs

http://tinyurl.com/homepageHOS2011





Forgotten art of Web performancehttp://www.flickr.com/photos/23927132@N05/2500055549/


http://www.flickr.com/photos/23927132@N05/2500055549/

http://www.flickr.com/photos/23927132@N05/2500055549/


Once upon a time...



Internet speeds were crap



Had to learn to scale the hard wayhttp://www.flickr.com/photos/kitby/5414374130/


http://www.flickr.com/photos/kitby/5414374130/

http://www.flickr.com/photos/kitby/5414374130/


4 principles to help you scale your

siteFriday, 15 July 2011


Rule 1) Dynamic vs Static




What is dynamic content?



Almost everything is static for a time

1 minute ?5 minutes ?

30 minutes ?Text

1 hour ?



We used to pre-generate content



Web servers love static content

2000+ req / secvs

30 req / sec



1) Pre-generate contenthttp://www.flickr.com/photos/aquariawintersoul/4162431443/The forgotten art of Web Performance

14th July 2011Friday, 15 July 2011


2) Cache everythinghttp://www.flickr.com/photos/markusnl/5563657463/


http://www.flickr.com/photos/markusnl/5563657463/

http://www.flickr.com/photos/markusnl/5563657463/


Database views

Memcachehttp://memcached.org

Varnish / Squidhttp://www.varnish-cache.org/

2) Cache everything


https://www.varnish-cache.org/

https://www.varnish-cache.org/


2) Cache everything



Google likes Varnish



3) Watch out for 3rd party widgets



Local heroes: geonet.org.nz



Pages are static - server generates page on earthquake event



Built own CDN + plus lots of other stuff



Handles 12,000 req/sec at peak



Rule 2) User perception

http://www.flickr.com/photos/jasongillyon/243909248/





We used to divide 50 row table into tables of 10 rows


http://www.flickr.com/photos/silkroadcollection/4886903818/





1) Front end techniques



Delay JS loading http://www.flickr.com/photos/sbisson/3852086117/


http://www.flickr.com/photos/sbisson/3852086117/

http://www.flickr.com/photos/sbisson/3852086117/


Load only what users can see



Who’s doing it right

Asynchronous JS loads content




Google image search




Twitter web client



Local heroes: geekzone.co.nz



Uses Aptimize WAX



Asychronous JS loading of ads, no revenue loss



Lots of performance optimisations



Site loads in just over 2 sec with lots of 3rd party stuff



Rule 3) Reduce requests



Browser round trip will kill you...



Looking at a site at DSL speed



Looking at a site at office speed



When the earthquake strikes...

80+ images to serve

30ms local 270ms overseas

Up to 10 times more effort to serve content



Javascript and CSS Bundlinghttp://www.flickr.com/photos/ferguson666/3605271302/


http://www.flickr.com/photos/ferguson666/3605271302/

http://www.flickr.com/photos/ferguson666/3605271302/


Bundling tools

YUI Compressorhttp://developer.yahoo.com/yui/compressor/

Google Closurehttp://code.google.com/closure/

Every framework has tools


http://developer.yahoo.com/yui/compressor/

http://developer.yahoo.com/yui/compressor/

http://code.google.com/closure/

http://code.google.com/closure/


Make bundling part of your build processhttp://www.flickr.com/photos/hifumiyo/4021034029/


http://www.flickr.com/photos/hifumiyo/4021034029/

http://www.flickr.com/photos/hifumiyo/4021034029/


Image Spritinghttp://www.flickr.com/photos/roadsidepictures/1435060357/


http://www.flickr.com/photos/roadsidepictures/1435060357/

http://www.flickr.com/photos/roadsidepictures/1435060357/


spriteme + smartsprites

Sprite mehttp://spriteme.org

Smart spriteshttp://csssprites.org/


http://spriteme.org

http://spriteme.org

http://csssprites.org/

http://csssprites.org/


How many requests ???

Guide for number of page requests

< 20 Elite20-30 Excellent30-60 Average60-80 Below average80-100 Poor>100 My eyes are bleeding



Static image expiryhttp://www.flickr.com/photos/newtown_grafitti/5131604440/



http://www.flickr.com/photos/newtown_grafitti/5131604440/

http://www.flickr.com/photos/newtown_grafitti/5131604440/


Westpac - 20 requests - 1 request reload



Rule 4) Change defaults

http://www.flickr.com/photos/deadhorse/367716072/





Webserver settings

#### Server-Pool Size Regulation (MPM specific)##

# prefork MPM# StartServers: number of server processes to start# MinSpareServers: minimum number of server processes which are kept spare# MaxSpareServers: maximum number of server processes which are kept spare# MaxClients: maximum number of server processes allowed to start# MaxRequestsPerChild: maximum number of requests a server process serves<IfModule mpm_prefork_module> StartServers 5 MinSpareServers 5 MaxSpareServers 10 MaxClients 150 MaxRequestsPerChild 0</IfModule>

# worker MPM# StartServers: initial number of server processes to start# MaxClients: maximum number of simultaneous client connections# MinSpareThreads: minimum number of worker threads which are kept spare# MaxSpareThreads: maximum number of worker threads which are kept spare# ThreadsPerChild: constant number of worker threads in each server process# MaxRequestsPerChild: maximum number of requests a server process serves<IfModule mpm_worker_module> StartServers 2 MaxClients 150 MinSpareThreads 25 MaxSpareThreads 75 ThreadsPerChild 25 MaxRequestsPerChild 0</IfModule>



Webserver settings

Apache has 150 clients as default

You can change it!



Tweak settings

• Turn on compression• Increase of number of web clients• Set expiry for images

Switch to better webserver ;)



True story - http server

Server browning out8Gb ram

Apache 250 clients running PHP4Gb Ram free

What to do ??Vendor says add

more servers



Database settings

my-small.cnf

# This is for a system with little memory (<= 64M) where MySQL is only used

my-medium.cnf

# This is for a system with little memory (32M - 64M) where MySQL plays

my-large.cnf

# This is for a large system with memory = 512M where the system runs mainly

my-huge.cnf

# This is for a large system with memory of 1G-2G where the system runs mainly



http://www.flickr.com/photos/jayneandd/4450623309/



Summary1) Use more static content

- Pre-generate- Cache everything- Minimise 3rd party widgets

2) Improve browser - Defer JS loading- Asychronous JS- Delay beyond the fold



Summary3) Minimise requests- Bundle JS + CSS files- Spriting- Set 2 year expiry for assets

4) Change defaults - Change defaults for Webserver and DB- Tweet to fit your server memory



Video

Final thought - Sites are around 550K



Questions



Web testingGlobal Performance testing + Videos

www.webpagetest.org

Load testing software - (Linux) Siege + BombardBeen using for transaction testing of e-commerce buying

http://www.joedog.org/index/siege-home


http://www.webpagetest.org

http://www.webpagetest.org




Thank you


Web performance at WDCNZ

Technology

Transcript of Web performance at WDCNZ