Your SlideShare is downloading. ×
WordPress Performance Optimization for Mere Mortals
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WordPress Performance Optimization for Mere Mortals

1,204
views

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,204
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
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