WordPress Performance Optimization for Mere Mortals

  • 1,162 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,162
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
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. John Levandowski @JohnLevandowski WordCamp Salt Lake City 2012 #wcslc The University of Utah@JohnLevandowski 1
  • 2. @JohnLevandowski 2
  • 3.  Introduction  Tools  Compression  Browser Caching  Image Optimization  Let’s Get ‘r Done  Questions  Bonus Content@JohnLevandowski 3
  • 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.  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.  Have Fun!  Learn at least one thing YOU CAN DO tomorrow@JohnLevandowski 6
  • 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.  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.  WebPageTest  http://www.webpagetest.org/  Pingdom Full Page Test  http://tools.pingdom.com/fpt/  Zoompf  http://zoompf.com/@JohnLevandowski 9
  • 10.  Twenty Eleven Theme 1.4  No WordPress plugins  Page Speed Grade  YSlow Grade  Zoompf Score  Page Size@JohnLevandowski 10
  • 11. @JohnLevandowski 11
  • 12. @JohnLevandowski 12
  • 13. @JohnLevandowski 13
  • 14. @JohnLevandowski 14
  • 15. @JohnLevandowski 15
  • 16.  DNS Lookup  Server Connection  Waiting  Content Transfer@JohnLevandowski 16
  • 17.  BACKUP your site before implementing any changes@JohnLevandowski 17
  • 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. HTTP Compression and Minification@JohnLevandowski 19
  • 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.  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.  “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.  style.css  Not Minified  57,094 bytes  Minified  40,494 bytes  Minified and Compressed  8,208 bytes@JohnLevandowski 23
  • 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. Static Content@JohnLevandowski 25
  • 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.  Add to .htaccess file: <IfModule mod_headers.c> Header unset ETag FileETag None </IfModule>@JohnLevandowski 27
  • 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.  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.  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.  favicon.ico  Have one at the root of your website  Or inside your <head> section using a <link> tag@JohnLevandowski 31
  • 32. Lossless and Lossy@JohnLevandowski 32
  • 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. @JohnLevandowski 34
  • 35.  300 X 224 Pixels  600 X 448 Pixels@JohnLevandowski 35
  • 36. @JohnLevandowski 36
  • 37.  300 X 224 Pixels  600 X 448 Pixels  57,854 bytes  57,749 bytes@JohnLevandowski 37
  • 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.  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.  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.  chessboard.jpg  comment-bubble.png  Original  Original  53,906 bytes  925 bytes  Optimized - 79% quality  Optimized  40,150 bytes  767 bytes@JohnLevandowski 41
  • 42. @JohnLevandowski 42
  • 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. @JohnLevandowski 44
  • 45. Time Permitting@JohnLevandowski 45
  • 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.  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.  WP Super Cache  W3 Total Cache@JohnLevandowski 48
  • 49.  @JohnLevandowski  http://wpselect.com/  http://en.gravatar.com/jlevandowski  Slides will soon be available at:  http://wpselect.com/@JohnLevandowski 49
  • 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.  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