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

Website Performance: server- and clientside techniques

on

  • 3,874 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,874
Views on SlideShare
3,726
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

11 of 1

  • 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