Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Performance Basics

736 views

Published on

Slides for my Website Performance Basic presentation at http://frontendconf.ch/ in Zurich.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Website Performance Basics

  1. 1. Website Performance Basicshttp://www.flickr.com/photos/jerseygal2009/5762584119/ 1
  2. 2. About• Georg Kunz• Working at www.local.ch• Organizer of Ruby on Rails Usergroup Switzerland www.rubyonrails.ch 2
  3. 3. Agenda• Whats wrong?• Solutions• Website Performance Analysis• Rails Solution 3
  4. 4. Whats wrong?<!DOCTYPE html><html lang=en><head>  <title>Jobs at local.ch</title>  <link href="/styles/site.css" media="all" rel="stylesheet" type="text/css" /> <link href="/styles/page.css" media="all" rel="stylesheet" type="text/css" /></head><body> <div id="header">   <img alt="logo" src="/images/logo.gif"/>  </div>... • Many requests • Limited parallel downloads • No caching • File size 4
  5. 5. Fewer Requests 5
  6. 6. Combine CSS and JavaScript 6
  7. 7. Images Sprites .image {   background-position: -75px 0;   width: 25px;   height: 36px; } 7
  8. 8. Inline Images in CSS background-image: url("data:image/ png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEU gAAABcAAAAfCAIAAACDG8GaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArp JREFUeNpi/Pr1669fv169evXu3bvv378zEA04OTmFhITExMTY2NgY379/f/ 36dUlJSVFRUW5ubuJNAVr/+vXr58+fa2pqsgBZQCMUFBQYSATcYABkAE1gAroF6Cpk6f +EALJioF6gCSw/fvzg4uKCCP379w/CmLn11e6zH289+f7kza+Fpcq +loJo1gBJJiYmIAnUCzSBhZGREVkOApbve3Pp/jcIe+rml8L8LFZavGg+AqqH6AWSTHBTgA6Bu3l/ j6auIsiBLMyMT17/2nn6A6a/4A5HMQVN0f5uDaBBhUES6d6ie85/si++tu/CR6wBBDQBu48gYF +XOoQRaCVYu+hp4+KnX7799bEQQFOGzy3IQEKIZXaBvLU2T9mcx68+/ MZ0CxPxCaQ5XtpIhTui9e7Hr3/RpJhISmmLyxW/// q3cPcbikwBAmtt3u2nP1FqSoqnyMevfyg1RV2G4+8/ hocvfyELskASMtaYxgOQ4whoAr70ghXcfPIDaK +cGCuxqQ4rmLvjjQAXM7JilFRHJDh69au7CR9a2mVhZmZGKxbwgITeRxxsjLHOAsiKgSaQ4KOGJS/ O3/m+p0OJl5MJzUdEmfL83Z+mZS/vPf/ ZmiAhzMuMphJkCp6Ydq26b6PNJSHIuubIRxYmhqpwMTtdbkxl+GLapfL+rac/bz/9KSbA4m/ BVxUhisu9OH3kVHH/7nNQ6vz7778gD7OkMAse/6KYgmyQtRYXHxfzkze/X3/846jPFe/ Mj2kKXCOKKUDv/fkDzWaNMaKYhT4agCcRUKoD1o8/f/ 4Ecvj4+FhYWIhJhCDLWViA6oFsoF6gCSzACuXLly/s7OwQg0jN4kC9QBOYeHh4Pn78+PbtW2CdT5J +oHqgLqBeoAmMwEr779+/ "); QBLYYPj9+zfxprCysgKbDcCqGhhAAAEGAMqnupnRLnW1AAAAAElFTkSuQmCC 8
  9. 9. Parallel Downloads • CDN • Additional hostnameshttp://www.flickr.com/photos/spinnn/3493452660/ 9
  10. 10. Headerscurl -I http://page/styles/site.cssCache-Control: max-age=31536000, publicExpires: Sat, 08 Sep 2012 22:41:49 GMT Caching<!DOCTYPE html><html lang=en><head>  <title>Jobs at local.ch</title>  <link href="/styles/site.css" media="all" rel="stylesheet" type="text/css" /> <link href="/styles/page.css" media="all" rel="stylesheet" type="text/css" /></head><body> <div id="header">   <img alt="logo" src="/images/logo.gif"/>  </div>... 10
  11. 11. Cache Busting <link href="/styles/site-8af74128f904600e41a6e39241464e03.css" media="all" rel="styleshe <img alt="logo" src="/images/logo-6b940dbed280e11507510cf378ac1d7f.gif"/>http://www.flickr.com/photos/rhysasplundh/5201859761/ 11
  12. 12. Minimize File Sizehttp://www.flickr.com/photos/ssanyal/347789298/ 12
  13. 13. Compress Files1. Generate compressed files 2. <LocationMatch  "^/assets/.*$">    #  2  lines  to  serve  pre-­‐gzipped  version    RewriteCond  %{REQUEST_FILENAME}.gz  -­‐s    RewriteRule  ^(.+)  $1.gz  [L]      #  without  it,  Content-­‐Type  will  be  "application/x-­‐gzip"    <FilesMatch  .*.css.gz>            ForceType  text/css    </FilesMatch>      <FilesMatch  .*.js.gz>            ForceType  text/javascript    </FilesMatch> </LocationMatch> 13
  14. 14. Enable Compression<IfModule mod_deflate.c> <IfModule mod_setenvif.c> <IfModule mod_headers.c> SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s,?s(gzip|deflate)? RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding </IfModule> </IfModule> # html, txt, css, js, json, xml, htc: <IfModule filter_module> FilterDeclare COMPRESS FilterProvider COMPRESS DEFLATE resp=Content-Type /text/(html|css|javascript|plain|x(ml|-component))/ FilterProvider COMPRESS DEFLATE resp=Content-Type /application/(javascript|json|xml|x-javascript)/ FilterChain COMPRESS FilterProtocol COMPRESS change=yes;byteranges=no </IfModule> <IfModule !mod_filter.c> # Legacy versions of Apache AddOutputFilterByType DEFLATE text/html text/plain text/css application/json AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript AddOutputFilterByType DEFLATE text/xml application/xml text/x-component </IfModule> # webfonts and svg: <FilesMatch ".(ttf|otf|eot|svg)$" > SetOutputFilter DEFLATE </FilesMatch></IfModule> 14
  15. 15. YUI Compressor Minify CSS/JS • Closure Compiler • UglifyJS • JSMin • YUI Compressor 15
  16. 16. Check your page http://www.webpagetest.org/result/110909_QY_22b0fa55b1bae814dd5af2579b041926/ 16
  17. 17. Rails 3.1Asset Pipeline 17
  18. 18. Resources• http://code.google.com/speed/page-speed/ docs/rules_intro.htmls• http://www.webpagetest.org By Steve Souders 18
  19. 19. BTW• We’re hiring• Our jobs are open source: http://github.com/local-ch/local-ch.github.com• Looking forward to pull requests! 19
  20. 20. Questions 20

×