Website Performance: server- and clientside techniques

26/08/2009

PHPBenelux meeting

Welkom!

Website Performance

Back- and frontend techniques

Who am I?

Who are you?

What is this talk about?

Disclaimer: I’m no expert and still learning every day, most of my knowledge is theoretically so please correct me!

Pukkelpop.be

Serverside & Clientside Both deserve attention

Scaling, Database, Caching, Coding, …

Serverside

Scaling A property of a system which indicates its

ability to handle growing amounts of work in a

graceful manner

Scaling

Vertically Horizontally

Scaling Vertically Add more resources to a single computer

Scaling Horizontally Add more nodes to a distributed system

Scaling, the Google way

"Nobody builds servers as unreliably as we do" Urs Hölzle, senior vice president for operations at Google

Database Database optimization, Query optimization,

Indexes

www.xkcd.com

Database optimization

Query optimization

Indexes

A couple of tips

More at http://forge.mysql.com/wiki/Top10SQLPerformanceTips

Scaling databases

Master / Slave setup Sharding

Master (write)

Slave (read) Slave (read) Even userId’s Uneven userId’s

Master

Scaling databases

Master / Slave setup Sharding

Master / Slave setup

Sharding code example

Caching A collection of data duplicating original

values stored elsewhere or computed earlier,

where the original data is expensive to fetch

www.xkcd.com

Basics of caching

DATA REQUEST

CACHED AND FRESH?

FETCH FROM CACHE FETCH FROM DATABASE

SAVE IN CACHE

RETURN DATA

YES NO

Basics of caching: example

Three methods of caching

TTL Invalidation Updating

Caching: TTL

Caching: Invalidation

Caching: Updating

Caching types

Intermediate Cache

Internet

webserver cache server

Caching software, …

Memcached

Memcached: what?

Memcached: Who?

Memcached: Some figures

Netlog Wikipedia Facebook

http://www.slideshare.net/folke/netlog-what-we-learned-about-scalability-high-availability-430211 http://meta.wikimedia.org/wiki/Wikimedia_servers#Server_list http://www.facebook.com/note.php?note_id=39391378919

Best practices for frontend engineers, …

Clientside

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

Why optimize clientside?

The 80/20 Rule

0.295s

Parallel downloads

Parallel downloads

Best Practices

1. Make fewer HTTP requests

1. Make fewer HTTP requests

CSS Sprites

#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px -140px}

1. Make fewer HTTP requests

Inline images

1. Make fewer HTTP requests

Combine CSS/JS

2. Use a CDN

3. Gzip components

3. Gzip components

4. Move CSS to the top

4. Move JS to the bottom

5. Minify JS and CSS

6. Make dynamic images cacheable

6. Make dynamic images cacheable

ETags Expires Headers

6. Make dynamic images cacheable

First send the cache related headers

6. Make dynamic images cacheable

Then generate an Etag and check the request

6. Make dynamic images cacheable

Check the modified since request header

6. Make dynamic images cacheable

And finally output the image if no cache match

6. Make dynamic images cacheable

7. Optimize images

7. Anticipate updates

Tools Usefull tools for optimization

Standalone

Firefox plugins