website performance: server- and clientside techniques
Post on 15-Jan-2015
2.649 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related