Optimizing big websitesOptimizing big websites

Talk Nerdy to MeDecember 8th, 2010

Andreas Creten

Hi, I’m Andreas

We are madewithlove,We are madewithlove,so are our products.so are our products.

Big websitesBig websites

Efficient?Efficient?I don’t think soI don’t think so

wireframeswireframeswireframeswireframes

back-endback-endback-endback-end

designdesigndesigndesign

supportsupportsupportsupport

front-endfront-endfront-endfront-end

hostinghostinghostinghosting

conceptconceptconceptconcept

ConceptConceptRealistic?Realistic?

WireframesWireframesNot to complex?Not to complex?How many information do we need to show?How many information do we need to show?

DesignDesignFast vs. fancyFast vs. fancy

Front-endFront-endRequests and Kb’sRequests and Kb’s

FrameworkFramework

SpritesSprites

Compress, merge, minifyCompress, merge, minify

336 Bytes336 Bytes

133 Bytes133 Bytes

Avoid external requestsAvoid external requests

Back-endBack-endExecution timeExecution time

Less is moreLess is more

Keep it simpleKeep it simple

CachingCaching

Performing a lot of queries on a database Performing a lot of queries on a database server might overload it, especially when a server might overload it, especially when a lot of users are using the application.lot of users are using the application.

ServerServerServerServer

Can you give me an Can you give me an overview of all our overview of all our

clients?clients?

Yeah, sure! I’ll load Yeah, sure! I’ll load them from the them from the

database.database.

Pff, I’ll get me a Pff, I’ll get me a coffee in coffee in

meanwhile.meanwhile.

DatabasDatabasee

DatabasDatabasee

Dude, calm down, Dude, calm down, I’m still getting the I’m still getting the

first one!first one!Database, can you give Database, can you give

me client 1?me client 1?Database, can you give Database, can you give

me client 2?me client 2?

Database, can you give Database, can you give me client 3?me client 3?

Database, can you give Database, can you give me client 4?me client 4?

Database, can you give Database, can you give me client 5?me client 5?

Database, can you give Database, can you give me client 6?me client 6?

It’s getting hot It’s getting hot in herein here

The database gets overloaded

CachingCaching

By storing the results from the database in a By storing the results from the database in a temporary in-memory cache we reduce the temporary in-memory cache we reduce the number of database request and decrease the number of database request and decrease the page load time.page load time.

ServerServerServerServerCan you give me an Can you give me an overview of all our overview of all our

clients?clients?

Yeah, sure! I’ll check if Yeah, sure! I’ll check if I can remember them, I can remember them,

otherwise I’ll load otherwise I’ll load them from the them from the

database.database.

Wow, I’ll have to Wow, I’ll have to call my secretary call my secretary

to bring some to bring some coffee.coffee.

DatabasDatabasee

DatabasDatabasee

Database, can you give Database, can you give me client 4?me client 4?Database, can you give Database, can you give

me client 6?me client 6?

I’m boredI’m bored

Client 1Client 1Client 1Client 1

Client 2Client 2Client 2Client 2

Client 3Client 3Client 3Client 3

Client 5Client 5Client 5Client 5

Client 6Client 6Client 6Client 6Client 4Client 4Client 4Client 4

Background workersBackground workers

When a user performs a server intensive When a user performs a server intensive action it might slow down the whole server.action it might slow down the whole server.By executing the tasks in the background we By executing the tasks in the background we off-load the server.off-load the server.

Ex: the user request a zip file of all the Ex: the user request a zip file of all the photos he uploaded.photos he uploaded.

Background workersBackground workers

When a user performs a server intensive When a user performs a server intensive action it might slow down the whole server.action it might slow down the whole server.By executing the tasks in the background we By executing the tasks in the background we off-load the server.off-load the server.

ServerServerServerServer

Can you send me all Can you send me all my photo’s in a zip my photo’s in a zip

archive?archive?

Yeah, sure! But it Yeah, sure! But it might take a while.might take a while.

Dude, this takes for Dude, this takes for hours! And the site is hours! And the site is

super slow now!super slow now!

I told you. I can’t do I told you. I can’t do everything at once.everything at once.

Background workersBackground workers

When a user performs a server intensive When a user performs a server intensive action it might slow down the whole server.action it might slow down the whole server.By executing the tasks in the background we By executing the tasks in the background we off-load the server.off-load the server.

ServerServerServerServer

Can you send me all Can you send me all my photo’s in a zip my photo’s in a zip

archive?archive?

Yeah, sure! I’ll send it Yeah, sure! I’ll send it to a worker, come back to a worker, come back

in 10 mins.in 10 mins.

Hey, thanks, Hey, thanks, that was fast!that was fast!

WorkerWorkerWorkerWorker

Ok, I’ll do it Ok, I’ll do it straight awaystraight away

I’m ready, that I’m ready, that was an easy was an easy

one!one!

Review your codeReview your code

HostingHostingScalabilityScalability

Fine-tuningFine-tuning

ClustersClusters

When a user logs in, a session file is created When a user logs in, a session file is created on the server. This file us used as a on the server. This file us used as a temporary store.temporary store.

Ex: it enables us to keep a user logged in Ex: it enables us to keep a user logged in while browsing a site.while browsing a site.

Cluster supportCluster support

The first time a user opens a site we store a The first time a user opens a site we store a session cookie containing his session id.session cookie containing his session id.When they navigate to the next page they When they navigate to the next page they send us the session id and we know which send us the session id and we know which session to load.session to load.

ServerServerServerServer

Session 3Session 3Session 3Session 3

Session 2Session 2Session 2Session 2

I want to see my account pageI want to see my account page

Cool, who are you?Cool, who are you?

I’m that guy from Session 1I’m that guy from Session 1

Ok, there you go!Ok, there you go!

Session 1Session 1Session 1Session 1

Cluster supportCluster support

On a cluster the users are send to On a cluster the users are send to servers based on the server load.servers based on the server load.

ServerServerServerServer ServerServerServerServer

Load balancerLoad balancerLoad balancerLoad balancer

I want to see my I want to see my account pageaccount page

Ok, you can do Ok, you can do it.it.

Hey, I’ve Hey, I’ve nothing to do!nothing to do!

Cluster supportCluster support

So their next request might So their next request might get handled by another serverget handled by another server

ServerServerServerServer ServerServerServerServer

Load balancerLoad balancerLoad balancerLoad balancer

I want to see I want to see the homepage the homepage

pagepage

Ok, you can do Ok, you can do it.it.

Hey, I’ve Hey, I’ve nothing to do!nothing to do!

Cluster supportCluster support

Since the sessions are stored on the server,Since the sessions are stored on the server,the second server doesn’t know about the user’s session.the second server doesn’t know about the user’s session.

ServerServerServerServer ServerServerServerServer

Load balancerLoad balancerLoad balancerLoad balancer

I want to see my I want to see my account pageaccount page

What’s your What’s your session id?session id?

Session 1Session 1Session 1Session 1

My session has My session has id 1id 1

Hmm, I don’t know Hmm, I don’t know about that sessionabout that session

Cluster supportCluster support

Since the sessions are stored on the server,Since the sessions are stored on the server,the second server doesn’t know about the user’s session.the second server doesn’t know about the user’s session.

ServerServerServerServer ServerServerServerServer

Load balancerLoad balancerLoad balancerLoad balancer

I want to see my I want to see my account pageaccount page

Session 1Session 1Session 1Session 1

Hmm, I don’t know Hmm, I don’t know about that sessionabout that session

The second server is not

aware of the session on

the first one

Cluster supportCluster support

We solve this problem by storing We solve this problem by storing the sessions into a central database.the sessions into a central database.

DatabasDatabasee

DatabasDatabasee

ServerServerServerServer ServerServerServerServer

Load balancerLoad balancerLoad balancerLoad balancer

I want to see my I want to see my account pageaccount page

What’s your What’s your session id?session id?

My session has My session has id 1id 1

Let me check for that Let me check for that session in the databasesession in the databaseThere you goThere you go

Session 1Session 1Session 1Session 1

HostedHostedvs.vs.

ManagedManagedvs.vs.

CloudCloudvs.vs.

In-houseIn-house

Reverse-proxy cachingReverse-proxy caching

3th party services3th party services

Team/companyTeam/companyPicking the right peoplePicking the right people

wireframeswireframeswireframeswireframes

back-endback-endback-endback-end

designdesigndesigndesign

supportsupportsupportsupport

front-endfront-endfront-endfront-end

hostinghostinghostinghosting

conceptconceptconceptconcept

InternsInternsTo do the impossibleTo do the impossible

Thanks.Thanks.Any questions?Any questions?

andreas@madewithlove.be - @andreascreten