Talk Nerdy to Me: Optimizing big websites
-
Upload
andreas-creten -
Category
Technology
-
view
1.354 -
download
0
Transcript of Talk Nerdy to Me: Optimizing big websites
![Page 1: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/1.jpg)
Optimizing big websitesOptimizing big websites
Talk Nerdy to MeDecember 8th, 2010
Andreas Creten
![Page 2: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/2.jpg)
Hi, I’m Andreas
![Page 3: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/3.jpg)
We are madewithlove,We are madewithlove,so are our products.so are our products.
![Page 4: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/4.jpg)
![Page 5: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/5.jpg)
Big websitesBig websites
![Page 6: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/6.jpg)
![Page 7: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/7.jpg)
![Page 8: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/8.jpg)
Efficient?Efficient?I don’t think soI don’t think so
![Page 9: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/9.jpg)
wireframeswireframeswireframeswireframes
back-endback-endback-endback-end
designdesigndesigndesign
supportsupportsupportsupport
front-endfront-endfront-endfront-end
hostinghostinghostinghosting
conceptconceptconceptconcept
![Page 10: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/10.jpg)
ConceptConceptRealistic?Realistic?
![Page 11: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/11.jpg)
WireframesWireframesNot to complex?Not to complex?How many information do we need to show?How many information do we need to show?
![Page 12: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/12.jpg)
DesignDesignFast vs. fancyFast vs. fancy
![Page 13: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/13.jpg)
Front-endFront-endRequests and Kb’sRequests and Kb’s
![Page 14: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/14.jpg)
FrameworkFramework
![Page 15: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/15.jpg)
SpritesSprites
![Page 16: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/16.jpg)
![Page 17: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/17.jpg)
![Page 18: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/18.jpg)
![Page 19: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/19.jpg)
![Page 20: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/20.jpg)
Compress, merge, minifyCompress, merge, minify
![Page 21: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/21.jpg)
![Page 22: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/22.jpg)
![Page 23: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/23.jpg)
336 Bytes336 Bytes
133 Bytes133 Bytes
![Page 24: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/24.jpg)
Avoid external requestsAvoid external requests
![Page 25: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/25.jpg)
Back-endBack-endExecution timeExecution time
![Page 26: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/26.jpg)
Less is moreLess is more
![Page 27: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/27.jpg)
Keep it simpleKeep it simple
![Page 28: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/28.jpg)
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
![Page 29: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/29.jpg)
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
![Page 30: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/30.jpg)
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.
![Page 31: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/31.jpg)
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.
![Page 32: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/32.jpg)
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!
![Page 33: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/33.jpg)
Review your codeReview your code
![Page 34: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/34.jpg)
HostingHostingScalabilityScalability
![Page 35: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/35.jpg)
Fine-tuningFine-tuning
![Page 36: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/36.jpg)
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.
![Page 37: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/37.jpg)
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
![Page 38: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/38.jpg)
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!
![Page 39: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/39.jpg)
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!
![Page 40: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/40.jpg)
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
![Page 41: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/41.jpg)
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
![Page 42: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/42.jpg)
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
![Page 43: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/43.jpg)
HostedHostedvs.vs.
ManagedManagedvs.vs.
CloudCloudvs.vs.
In-houseIn-house
![Page 44: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/44.jpg)
Reverse-proxy cachingReverse-proxy caching
![Page 45: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/45.jpg)
3th party services3th party services
![Page 46: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/46.jpg)
Team/companyTeam/companyPicking the right peoplePicking the right people
![Page 47: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/47.jpg)
wireframeswireframeswireframeswireframes
back-endback-endback-endback-end
designdesigndesigndesign
supportsupportsupportsupport
front-endfront-endfront-endfront-end
hostinghostinghostinghosting
conceptconceptconceptconcept
![Page 48: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/48.jpg)
InternsInternsTo do the impossibleTo do the impossible
![Page 49: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/49.jpg)
![Page 50: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/50.jpg)
![Page 51: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/51.jpg)
![Page 52: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/52.jpg)
![Page 54: Talk Nerdy to Me: Optimizing big websites](https://reader036.fdocuments.us/reader036/viewer/2022070315/554dd8f4b4c905c70e8b4e3c/html5/thumbnails/54.jpg)