Your SlideShare is downloading. ×
John Levandowski                          @JohnLevandowski                   WordCamp Salt Lake City 2012 #wcslc          ...
@JohnLevandowski   2
 Introduction      Tools      Compression      Browser Caching      Image Optimization      Let’s Get ‘r Done      ...
 Business Intelligence and       Data Warehousing at the       University of Utah      2005 - WordPress 1.5      Develo...
 WordPress 3.4.2      Hosted by Someone           Shared Hosting      Do not have root access         to server       ...
 Have Fun!      Learn at least one thing YOU CAN DO tomorrow@JohnLevandowski                                      6
 A Fast WordPress Site is Cool      It’s also profitable $$$           Can save you $$$      Google cares about page s...
 Google Page Speed (Browser Extension)           http://developers.google.com/speed/pagespeed/      Yahoo Yslow Plugin ...
 WebPageTest           http://www.webpagetest.org/      Pingdom Full Page Test           http://tools.pingdom.com/fpt/...
 Twenty Eleven Theme 1.4      No WordPress plugins      Page Speed Grade      YSlow Grade      Zoompf Score      Pag...
@JohnLevandowski   11
@JohnLevandowski   12
@JohnLevandowski   13
@JohnLevandowski   14
@JohnLevandowski   15
 DNS Lookup      Server Connection      Waiting      Content Transfer@JohnLevandowski           16
 BACKUP your site before implementing any changes@JohnLevandowski                                          17
 “A .htaccess (hypertext access) file is a directory-level       configuration file supported by several web servers,    ...
HTTP Compression and Minification@JohnLevandowski                            19
 “HTTP compression is a capability that can be built       into web servers and web clients to make better use of       a...
 Add to .htaccess file:          <IfModule mod_deflate.c>          AddOutputFilterByType DEFLATE text/html text/css      ...
 “Minification is the                     process of removing all                     unnecessary characters             ...
 style.css           Not Minified              57,094 bytes           Minified             40,494 bytes           Mi...
 WordPress theme style.css required headers           http://codex.wordpress.org/Theme_Development           Change lin...
Static Content@JohnLevandowski         25
 Last-Modified and ETag           Weak caching headers – request to server needed           “Have you changed from the ...
 Add to .htaccess file:          <IfModule mod_headers.c>          Header unset ETag          FileETag None          </If...
 Add to .htaccess file:       <IfModule mod_expires.c>       ExpiresActive on       ExpiresByType image/jpeg "access plus...
 If you cache static content you should never change         this content           Your frequent visitors will not see ...
 Original           <link rel="stylesheet" type="text/css" media="all"             href="<?php bloginfo( stylesheet_url ...
 favicon.ico           Have one at the root of your website           Or inside your <head> section using a <link> tag@...
Lossless and Lossy@JohnLevandowski             32
August 1, 2011                           August 1, 2012     http://httparchive.org/interesting.php   http://httparchive.or...
@JohnLevandowski   34
 300 X 224 Pixels    600 X 448 Pixels@JohnLevandowski                               35
@JohnLevandowski   36
 300 X 224 Pixels    600 X 448 Pixels      57,854 bytes        57,749 bytes@JohnLevandowski                           ...
 Lossless           allows the exact original data to be reconstructed from            the compressed data           re...
 PNGOUT, AdvPNG, Pngcrush, OptiPNG, JpegOptim,       jpegrescan, jpegtran, Gifsicle, pngquant, pngnq …      ImageOptim f...
 Do not scale images in browser           Resize image before uploading to intended display size           Exceptions f...
 chessboard.jpg                  comment-bubble.png           Original                     Original              53,9...
@JohnLevandowski   42
Original   Optimized   % of Original                          (bytes)    (bytes)     html page            7,551      2,342...
@JohnLevandowski   44
Time Permitting@JohnLevandowski          45
 Default jpeg quality is 90 for resized images      Change jpeg quality in functions.php          /** Lower jpeg quality...
 To reduce the number of requests the browser makes       to the server      Combine numerous small images      CSS is ...
 WP Super Cache      W3 Total Cache@JohnLevandowski        48
 @JohnLevandowski      http://wpselect.com/      http://en.gravatar.com/jlevandowski      Slides will soon be availabl...
 http://wpselect.com/blog/web-page-response-time/      http://wpselect.com/blog/optimize-wordpress-for-page-       speed...
 http://www.flickr.com/photos/vernhart/1574355646/      http://www.flickr.com/photos/joshfassbind/4683365102/      http...
Upcoming SlideShare
Loading in...5
×

WordPress Performance Optimization for Mere Mortals

1,270

Published on

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
1,270
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "WordPress Performance Optimization for Mere Mortals"

  1. 1. John Levandowski @JohnLevandowski WordCamp Salt Lake City 2012 #wcslc The University of Utah@JohnLevandowski 1
  2. 2. @JohnLevandowski 2
  3. 3.  Introduction  Tools  Compression  Browser Caching  Image Optimization  Let’s Get ‘r Done  Questions  Bonus Content@JohnLevandowski 3
  4. 4.  Business Intelligence and Data Warehousing at the University of Utah  2005 - WordPress 1.5  Developed blog to deliver internal campus news  Syndicated content via RSS to campus portal@JohnLevandowski 4
  5. 5.  WordPress 3.4.2  Hosted by Someone  Shared Hosting  Do not have root access to server  Concepts still apply  Use Apache Web Server  Concepts still apply@JohnLevandowski 5
  6. 6.  Have Fun!  Learn at least one thing YOU CAN DO tomorrow@JohnLevandowski 6
  7. 7.  A Fast WordPress Site is Cool  It’s also profitable $$$  Can save you $$$  Google cares about page speed  So do your customers@JohnLevandowski 7
  8. 8.  Google Page Speed (Browser Extension)  http://developers.google.com/speed/pagespeed/  Yahoo Yslow Plugin (Browser Extension)  http://developer.yahoo.com/yslow/  GTmetrix  http://gtmetrix.com/@JohnLevandowski 8
  9. 9.  WebPageTest  http://www.webpagetest.org/  Pingdom Full Page Test  http://tools.pingdom.com/fpt/  Zoompf  http://zoompf.com/@JohnLevandowski 9
  10. 10.  Twenty Eleven Theme 1.4  No WordPress plugins  Page Speed Grade  YSlow Grade  Zoompf Score  Page Size@JohnLevandowski 10
  11. 11. @JohnLevandowski 11
  12. 12. @JohnLevandowski 12
  13. 13. @JohnLevandowski 13
  14. 14. @JohnLevandowski 14
  15. 15. @JohnLevandowski 15
  16. 16.  DNS Lookup  Server Connection  Waiting  Content Transfer@JohnLevandowski 16
  17. 17.  BACKUP your site before implementing any changes@JohnLevandowski 17
  18. 18.  “A .htaccess (hypertext access) file is a directory-level configuration file supported by several web servers, that allows for decentralized management of web server configuration.”  WordPress configuration for “Pretty Permalinks” # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress@JohnLevandowski 18
  19. 19. HTTP Compression and Minification@JohnLevandowski 19
  20. 20.  “HTTP compression is a capability that can be built into web servers and web clients to make better use of available bandwidth, and provide faster transmission speeds between both.”  Gzip  style.css  Not Compressed  57,094 bytes  Compressed  11,347 bytes@JohnLevandowski 20
  21. 21.  Add to .htaccess file: <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/javascript application/x- javascript </IfModule>@JohnLevandowski 21
  22. 22.  “Minification is the process of removing all unnecessary characters from source code, without changing its functionality.”  YUI Compressor  http://refresh-sf.com/yui/@JohnLevandowski 22
  23. 23.  style.css  Not Minified  57,094 bytes  Minified  40,494 bytes  Minified and Compressed  8,208 bytes@JohnLevandowski 23
  24. 24.  WordPress theme style.css required headers  http://codex.wordpress.org/Theme_Development  Change link to style.css in header.php to minified version  Original  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( stylesheet_url ); ?>" />  Minified  <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/style- min.css" />  There are fancier ways to do this with filters, etc.@JohnLevandowski 24
  25. 25. Static Content@JohnLevandowski 25
  26. 26.  Last-Modified and ETag  Weak caching headers – request to server needed  “Have you changed from the last time”  Expires and Cache-Control: max-age  Strong caching headers – no request to server needed  Cache static content  CSS  JavaScript  Images@JohnLevandowski 26
  27. 27.  Add to .htaccess file: <IfModule mod_headers.c> Header unset ETag FileETag None </IfModule>@JohnLevandowski 27
  28. 28.  Add to .htaccess file: <IfModule mod_expires.c> ExpiresActive on ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType image/gif "access plus 6 months" ExpiresByType image/x-icon "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType application/javascript "access plus 6 months" ExpiresByType application/x-javascript "access plus 6 months" </IfModule>@JohnLevandowski 28
  29. 29.  If you cache static content you should never change this content  Your frequent visitors will not see the change  If you change the content you need to change the URL to that content  Images – upload new image with different file name  CSS and JS – add version number to URLs  http://example.com/style.css?ver=3.4.2@JohnLevandowski 29
  30. 30.  Original  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( stylesheet_url ); ?>" />  Minified  <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/style-min.css" />  Minified with Version  <link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/style-min.css?ver=<?php echo filemtime( get_stylesheet_directory() . /style-min.css ); ?>" />@JohnLevandowski 30
  31. 31.  favicon.ico  Have one at the root of your website  Or inside your <head> section using a <link> tag@JohnLevandowski 31
  32. 32. Lossless and Lossy@JohnLevandowski 32
  33. 33. August 1, 2011 August 1, 2012 http://httparchive.org/interesting.php http://httparchive.org/interesting.php ?a=All&l=Aug%201%202011 ?a=All&l=Aug%201%202012@JohnLevandowski 33
  34. 34. @JohnLevandowski 34
  35. 35.  300 X 224 Pixels  600 X 448 Pixels@JohnLevandowski 35
  36. 36. @JohnLevandowski 36
  37. 37.  300 X 224 Pixels  600 X 448 Pixels  57,854 bytes  57,749 bytes@JohnLevandowski 37
  38. 38.  Lossless  allows the exact original data to be reconstructed from the compressed data  removing unnecessary comments, meta-data, and color profiles  Lossy  compresses data by discarding (losing) some of it  Images (JPEG)  Audio (MP3, AAC, Dolby Digital AC-3)  Blu-ray (MPEG-2, H.264/MPEG-4 AVC, VC-1)@JohnLevandowski 38
  39. 39.  PNGOUT, AdvPNG, Pngcrush, OptiPNG, JpegOptim, jpegrescan, jpegtran, Gifsicle, pngquant, pngnq …  ImageOptim for Mac  http://imageoptim.com/  ImageAlpha for Mac  http://pngmini.com/  Convert from 24-bit to 8-bit PNG  Similar tools are available for Windows  http://smush.it/  http://www.jpegmini.com/@JohnLevandowski 39
  40. 40.  Do not scale images in browser  Resize image before uploading to intended display size  Exceptions for HiDPI Retina displays  <img height=“100" width=“100" alt=“Alt Text" src="http://example.com/wp- content/uploads/2012/09/image.jpg" title=“Title Text" class="alignnone size-full wp-image-1">  Image returned should natively be 100 x 100 pixels@JohnLevandowski 40
  41. 41.  chessboard.jpg  comment-bubble.png  Original  Original  53,906 bytes  925 bytes  Optimized - 79% quality  Optimized  40,150 bytes  767 bytes@JohnLevandowski 41
  42. 42. @JohnLevandowski 42
  43. 43. Original Optimized % of Original (bytes) (bytes) html page 7,551 2,342 31% style.css 57,094 8,208 14% chessboard.jpg 53,906 40,150 74% comment-bubble.png 925 767 83% search.png 441 441 100% TOTAL bytes 119,917 51,908 43% Page Speed 58 98 YSlow 91 97 Zoompf 61 92@JohnLevandowski 43
  44. 44. @JohnLevandowski 44
  45. 45. Time Permitting@JohnLevandowski 45
  46. 46.  Default jpeg quality is 90 for resized images  Change jpeg quality in functions.php /** Lower jpeg quality for media */ add_filter( jpeg_quality, wpselect_jpeg_quality ); function wpselect_jpeg_quality( $quality ) { return (int)79; }  Insert code in a plugin or theme@JohnLevandowski 46
  47. 47.  To reduce the number of requests the browser makes to the server  Combine numerous small images  CSS is used to select the parts of the composite image to display at different points in the page  http://spriteme.org/@JohnLevandowski 47
  48. 48.  WP Super Cache  W3 Total Cache@JohnLevandowski 48
  49. 49.  @JohnLevandowski  http://wpselect.com/  http://en.gravatar.com/jlevandowski  Slides will soon be available at:  http://wpselect.com/@JohnLevandowski 49
  50. 50.  http://wpselect.com/blog/web-page-response-time/  http://wpselect.com/blog/optimize-wordpress-for-page- speed-yslow-and-zoompf/  http://wpselect.com/blog/wordpress-performance- opcode-cache/  http://wpselect.com/blog/optimize-images-for-web-jpeg/  http://wpselect.com/blog/optimize-images-for-web-png/@JohnLevandowski 50
  51. 51.  http://www.flickr.com/photos/vernhart/1574355646/  http://www.flickr.com/photos/joshfassbind/4683365102/  http://www.flickr.com/photos/mytudut/5188623575/  http://www.flickr.com/photos/left-hand/2863299383/  http://www.flickr.com/photos/wbob/4171615158/  http://www.flickr.com/photos/96dpi/466946465/  http://www.flickr.com/photos/62172402@N07/6237005541/  http://www.flickr.com/photos/russmorris/28389687/  http://www.flickr.com/photos/30928442@N08/3508534114/  http://www.flickr.com/photos/infelix/1449066379/  http://www.flickr.com/photos/tomitapio/5126337639/  http://www.flickr.com/photos/massenpunkt/91952193/  http://www.flickr.com/photos/dvids/4644922363/  http://www.flickr.com/photos/crystaljingsr/3914729343/  http://www.flickr.com/photos/wwworks/4759535950/@JohnLevandowski 51

×