Web performance at WDCNZ

The Forgotten Art of Web Performance http://www.ﬂickr.com/photos/mhzmaster/9659478 The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

I’m here to talk about making websites faster The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Web performance is about driving more traffic to your site http://www.ﬂickr.com/photos/darrentunnicliff/37179763 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Web performance is about “DevOps" The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Web Performance Optimisation Basics The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Web performance comes from combination of “back-end” and “front-end” optimisations The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware95% of download time comes from “Front-end” The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware You want to deliver content as fast as possible... The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

FRONT END BACK END HTML Network Requests CSS Web server Javascript Application Images Database Third party O/S Hardware You can maximise the requests you can The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

FRONT END BACK END HTML Network CSS Web server Javascript Application Images Database Third party O/S Hardware Minimiseby minimising request times of your stack The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

If Average request takes 50ms to serve and 200 “agents” => 4000 requests per second The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

How do I fix? http://www.ﬂickr.com/photos/lenore-m/251580065 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Lots of tools to help you fix your site http://www.ﬂickr.com/photos/lenore-m/251580065 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

YSlow - 35 rules of Web performance The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Pagespeed - 6 principles for speeding up The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Aptimize.com The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

The difference web performance can make is huge http://www.ﬂickr.com/photos/thebusybrain/2492945 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

It seems that some sites haven’t evolved The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

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 The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Here’s a normal website The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

I see things a little differently The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

No HTTP Compression The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Poor expiry settings The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

No CSS / JS bundling The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

No Spriting The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Would you be proud of this ? The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

1.2Mb, 133 requests, 21 JS files, 3 CSS files The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Why is WPO important? The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Why is WPO important “Slow websites are boring” Slow websites are boring! The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Customers are complaining about your site The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Fast websites make more money The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

“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 The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

WPO State of Nation http://www.ﬂickr.com/photos/nznationalparty/4436793708/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Homepage hall of shame 2011 160 sites Home broadband vs Office broadband The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Key ﬁndings Ofﬁce BBand Home BBand Ave page Ave page Ave home load time load time page size 6.01s 12.5s 665K The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Whoʼs the fastest 1.17s Telecom 1.62s Zenbu 1.23s DOL 1.72s Geonet 1.49s Snipesoft 1.73s School.nz 1.58s Auckland Uni 1.78s Maxx 1.59 Massey Uni 1.59 Westpac The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Whoʼs the S L O W E S T 26.8s Skykiwi 16.3s interest.co.nz 20.9s The Standard 15.1s 3 News 20.1s iStars 15.1s The Big Idea 17.2s WhaleOil 14.7s Readers Digest 16.4s NZ Yahoo 14.3s Stuff The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Data on Google docs http://tinyurl.com/homepageHOS2011 The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Forgotten art of Web performance http://www.ﬂickr.com/photos/23927132@N05/2500055549/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Once upon a time... The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Internet speeds were crap The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Had to learn to scale the hard way http://www.ﬂickr.com/photos/kitby/5414374130/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

4 principles to help you scale your site The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Rule 1) Dynamic vs Static The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

What is dynamic content? The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

1 hour ? 5 minutes ? 1 minute ? Text 30 minutes ? Almost everything is static for a time The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

We used to pre-generate content The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

2000+ req / sec vs 30 req / sec Web servers love static content The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

1) Pre-generate content http://www.ﬂickr.com/photos/aquariawintersoul/4162431443/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

2) Cache everything http://www.ﬂickr.com/photos/markusnl/5563657463/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Database views Memcache http://memcached.org Varnish / Squid http://www.varnish-cache.org/ 2) Cache everything The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

2) Cache everything The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Google likes Varnish The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

3) Watch out for 3rd party widgets The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Local heroes: geonet.org.nz The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Pages are static - server generates page on earthquake event The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Built own CDN + plus lots of other stuff The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Handles 12,000 req/sec at peak The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Rule 2) User perception http://www.ﬂickr.com/photos/jasongillyon/243909248/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

We used to divide 50 row table into tables of 10 rows http://www.ﬂickr.com/photos/silkroadcollection/4886903818/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

1) Front end techniques The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Delay JS loading http://www.ﬂickr.com/photos/sbisson/3852086117/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Load only what users can see The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Asynchronous JS loads content Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Google image search Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Twitter web client Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Local heroes: geekzone.co.nz The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Uses Aptimize WAX The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Asychronous JS loading of ads, no revenue loss The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Lots of performance optimisations The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Site loads in just over 2 sec with lots of 3rd party stuff The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Rule 3) Reduce requests The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Browser round trip will kill you... The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Looking at a site at DSL speed The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Looking at a site at office speed The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

80+ images to serve 30ms local 270ms overseas Up to 10 times more effort to serve content When the earthquake strikes... The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Javascript and CSS Bundling http://www.ﬂickr.com/photos/ferguson666/3605271302/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

YUI Compressor http://developer.yahoo.com/yui/compressor/ Google Closure http://code.google.com/closure/ Every framework has tools Bundling tools The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Make bundling part of your build process http://www.ﬂickr.com/photos/hifumiyo/4021034029/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Image Spriting http://www.ﬂickr.com/photos/roadsidepictures/1435060357/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Sprite me http://spriteme.org Smart sprites http://csssprites.org/ spriteme + smartsprites The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Guide for number of page requests < 20 Elite 20-30 Excellent 30-60 Average 60-80 Below average 80-100 Poor >100 My eyes are bleeding How many requests ??? The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Static image expiry http://www.ﬂickr.com/photos/newtown_graﬁtti/5131604440/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Who’s doing it right The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Westpac - 20 requests - 1 request reload The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Rule 4) Change defaults http://www.ﬂickr.com/photos/deadhorse/367716072/ The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

## ## 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 The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Apache has 150 clients as default You can change it! Webserver settings The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

• Turn on compression • Increase of number of web clients • Set expiry for images Switch to better webserver ;) Tweak settings The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Server browning out 8Gb ram Apache 250 clients running PHP 4Gb Ram free What to do ?? Vendor says add more servers True story - http server The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

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 Database settings The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

http://www.ﬂickr.com/photos/jayneandd/4450623309/ The Forgotten art of Web Performance forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Summary 1) Use more static content - Pre-generate - Cache everything - Minimise 3rd party widgets 2) Improve browser - Defer JS loading - Asychronous JS - Delay beyond the fold The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Summary 3) 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 The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Video Final thought - Sites are around 550K The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Questions The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Web testing Global Performance testing + Videos www.webpagetest.org Load testing software - (Linux) Siege + Bombard Been using for transaction testing of e-commerce buying http://www.joedog.org/index/siege-home The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

Thank you The Forgotten Art of Web Performance 14th July 2011Friday, 15 July 2011

http://twitter.com	9
http://localhost:8080	3
http://www.schoox.com	1
http://lanyrd.com	1

Web performance at WDCNZ

by John Clegg on Jul 13, 2011

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 14

Statistics

Web performance at WDCNZ Presentation Transcript