Website Performance: server- and clientside techniques
Upcoming SlideShare
Loading in...5
×
 

Website Performance: server- and clientside techniques

on

  • 3,882 views

A talk on how to increase your website performance. Both server- and clientside techniques get attention

A talk on how to increase your website performance. Both server- and clientside techniques get attention

Statistics

Views

Total Views
3,882
Views on SlideShare
3,734
Embed Views
148

Actions

Likes
5
Downloads
59
Comments
1

6 Embeds 148

http://www.inventis.be 130
http://intranet 11
http://www.slideshare.net 3
http://www.linkedin.com 2
http://209.85.229.132 1
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Website Performance: server- and clientside techniques Website Performance: server- and clientside techniques Presentation Transcript

  • 6 /08/2 009 ting 2 elux mee PHP Ben Welkom!
  • r form ance Websi te Pe es end te chniqu t nd fron Back- a
  • 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
  • rverside Se … C oding, e, Ca ching, s ling, Databa Sca
  • ts icates i rk in a Sc aling of opertyandle grow m a syste ing amo ind which unts of wo A pr to h ability ul manner gracef
  • 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
  • cd.com www.xk e bas mization, Query optimization, Data se opti Databa s Indexe
  • 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) Master Slave (read) Slave (read) Even userId’s Uneven userId’s
  • Scaling databases Master / Slave setup Sharding
  • Master / Slave setup
  • Sharding code example
  • cd.com www.xk hing al g origin earlier, Cac in d uplicatcomputed ction of data here or sive to fet ch A colle stored elsew ata is expen values the original d where
  • Basics of caching DATA REQUEST YES NO CACHED AND FRESH? FETCH FROM CACHE FETCH FROM DATABASE SAVE IN CACHE RETURN DATA
  • Basics of caching: example
  • Three methods of caching TTL Invalidation Updating
  • Caching: TTL
  • Caching: Invalidation
  • Caching: Updating
  • Caching types
  • Intermediate Cache webserver cache server Internet
  • 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
  • C lient side ,… ineers ronte nd eng r f t ices fo Be st prac
  • Why optimize clientside? Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
  • 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 ls for o pt imizatio n Usefull too
  • Standalone
  • Firefox plugins