talk nerdy to me: optimizing big websites

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?




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 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.




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.




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.


Session 3Session 3Session 3Session 3


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!



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!


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



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!


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.




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


My session has My session has id 1id 1

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


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.





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


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




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


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?

[email protected] - @andreascreten

talk nerdy to me: optimizing big websites

Technology