Your SlideShare is downloading. ×
Website Performance Basics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Website Performance Basics

525
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
525
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Website Performance Basicshttp://www.flickr.com/photos/jerseygal2009/5762584119/ 1
  • 2. About• Georg Kunz• Working at www.local.ch• Organizer of Ruby on Rails Usergroup Switzerland www.rubyonrails.ch 2
  • 3. Agenda• Whats wrong?• Solutions• Website Performance Analysis• Rails Solution 3
  • 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. Fewer Requests 5
  • 6. Combine CSS and JavaScript 6
  • 7. Images Sprites .image {   background-position: -75px 0;   width: 25px;   height: 36px; } 7
  • 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. Parallel Downloads • CDN • Additional hostnameshttp://www.flickr.com/photos/spinnn/3493452660/ 9
  • 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. 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. Minimize File Sizehttp://www.flickr.com/photos/ssanyal/347789298/ 12
  • 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. 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. YUI Compressor Minify CSS/JS • Closure Compiler • UglifyJS • JSMin • YUI Compressor 15
  • 16. Check your page http://www.webpagetest.org/result/110909_QY_22b0fa55b1bae814dd5af2579b041926/ 16
  • 17. Rails 3.1Asset Pipeline 17
  • 18. Resources• http://code.google.com/speed/page-speed/ docs/rules_intro.htmls• http://www.webpagetest.org By Steve Souders 18
  • 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. Questions 20