Speed Up Wordpress Wordcamp Pdx 2009
Upcoming SlideShare
Loading in...5
×
 

Speed Up Wordpress Wordcamp Pdx 2009

on

  • 8,957 views

Why performance matters and some simple steps to optimize Wordpress.

Why performance matters and some simple steps to optimize Wordpress.

Presented at Wordcamp 2009.

Statistics

Views

Total Views
8,957
Views on SlideShare
8,941
Embed Views
16

Actions

Likes
12
Downloads
128
Comments
1

4 Embeds 16

http://www.lvidmar.com 7
http://www.slideshare.net 5
http://www.iweb34.com 2
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Speed Up Wordpress Wordcamp Pdx 2009 Speed Up Wordpress Wordcamp Pdx 2009 Presentation Transcript

  • Speed Up Wordpress Make Readers Happy and Your Site Green Jason Grigsby • http://cloudour.com/blog • Twitter: @grigs • Slides at http://slideshare.net/grigs
  • We’ve remade the Internet in our image.
  • Obese
  • We’ve Become Bandwidth Gluttons Since 2003: • Web Page Size Tripled •# of Objects Doubled Since 1995: • Web Page Size: 22x •# of Objects: 21x Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
  • I blame WordPress.
  • Ok, maybe that’s a bit much.
  • But there are just so many cool plugins. Who can resist? Just one more little bite plugin.
  • Broadband & 4G = What, Me Worry? Source: http://www.websiteoptimization.com/bw/0708
  • Speed = Success Shackel’s Acceptability Paradigm Source: Speed Up Your Site by Andrew King, p. 6.
  • Web Speed = Perception Flickr: Uploaded October 15, 2006 by mattlogelin September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • Web Speed = Perception Qu ality U sab ility ed ibility Cr Serv ice Flickr: Uploaded October 15, 2006 by mattlogelin September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • Optimizing for Flow 0.1 seconds — Viewed as Instantaneous 1.0 seconds — Moving Freely 10 seconds — Retain Focus on Task Flickr: Uploaded August 7, 2007 by .Hessam September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • Flickr: Uploaded November 7, 2005 by Tracy O September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • • Ecommerce Bailout Rates • Bandwidth Charges Flickr: Uploaded November 7, 2005 by Tracy O September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • Mobile Web Doubled in 2008 Jan 08 Jan 09 10821 Daily 22369 10312 Weekly 19283 36870 Ever in Month 63182 0 17500 35000 52500 70000 Unique Users (000s) http://www.comscore.com/press/release.asp?press=2752
  • Slow Sites = Environmental Impact Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
  • Storage Networking World 2007
  • http://www.flickr.com/photos/13244105@N00/29463820/
  • Prep Work: Get Measurement Tools
  • Firebug for Firefox http://getfirebug.com YSlow Firebug Plugin from Yahoo http://developer.yahoo.com/yslow/ Google Page Speed http://code.google.com/speed/page-speed/
  • YSlow Firebug Plugin http://developer.yahoo.com/yslow/
  • Our Guinea Pig
  • Step 1: Server vs. Client Performance
  • How long does it take for the HTML file to download? Look at network graph
  • Server Solutions SQL Monitor http://wordpress.org/extend/plugins/sqlmon/ WP Super Cache http://wordpress.org/extend/plugins/wp-super-cache/ Find a New Web Host
  • Most of the Time, It’s Not the Server Source: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  • Yahoo!’s 14 Performance Rules (Now 34!) 1. Make Fewer HTTP Requests 8. Make JavaScript and CSS External 2. Use a Content Delivery Network 9. Reduce DNS Lookups 3. Add an Expires Header 10.Minify JavaScript 4. Gzip Components 11.Avoid Redirects 5. Put Stylesheets at the Top 12.Remove Duplicate Scripts 6. Move Scripts to the Bottom 13.Configure ETags 7. Avoid CSS Expressions 14.Make AJAX Cacheable Source: http://developer.yahoo.com/performance/rules.html
  • Step 2: Take a Benchmark Measurement
  • Step 3: GZIP Like Your Life Depended on It
  • Flickr photo by amaneiro: http://www.flickr.com/ photos/amaneiro/ 2396649106/ GZIP is compression. If you do nothing else. DO THIS.
  • Case Study: Nearly 80% reduction in file size. Version HTML CSS JS Total 40,837 17,764 1,443 60,044 Original bytes bytes bytes bytes 24,907 5,320 1,443 31,670 Optimized bytes bytes bytes bytes 5,722 5,320 1,443 12,485 GZIP bytes bytes bytes* bytes
  • How to tell? Use YSlow Components Tab.
  • Add three lines to .htaccess & save the world? <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/ css application/javascript application/x-javascript application/x- httpd-php application/rss+xml application/atom_xml </IfModule>
  • Step 4: Tell Browsers to Cache Everything
  • Aggressively Encourage Caching •Goal #1: No HTTP HEAD Requests. •Add Expires header. Put it far into the future. •Develop naming conventions for versioning of files. Update filename when file is modified. e.g., logo20090523.png •Keep files under 25k for mobile devices. •Configure or remove ETags from files. •Watch your logs to make sure caching works. Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l
  • Add these lines to .htaccess <IfModule mod_expires.c> ExpiresActive on ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-icon "access plus 1 year" </IfModule> If your server does not have mod_expires, alternatively use: <FilesMatch ".(ico|jpg|jpeg|png|gif|js|css)$"> Header set Expires "Sun, 22 Apr 2018 01:10:54 GMT" Header set Cache-Control "max-age=315360000" Header unset Pragma </FilesMatch>
  • Step 5: Reduce the Number of Files
  • Many Browsers have only 2 Concurrent Connections One Domain Two Domains Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4
  • WP’s Biggest Performance Challenge:
  • Problem solved in WP2.8? Not exactly. @lyzadanger
  • Install PHP Speedy WP http://aciddrop.com/2009/02/02/php-speedy-wp-052-bug-fix/
  • Step 6: Images with Correct Size & Format
  • PNG (or GIF) Logos Line art JPEG Photos Complex gradients
  • Resize Images to Fit the Usage 211x157 11k 618x460, 50.7k
  • Bonus: CSS Sprites
  • 74 icons in single file. http;//us.i1.yimg.com/us.yimg.com/i/ww/sp/trough_1.5.gif
  • http://spriteme.org
  • The End Result
  • Speed Up Wordpress Make Readers Happy and Your Site Green Thank You! Jason Grigsby • http://cloudour.com/blog • Twitter: @grigs • Slides at http://slideshare.net/grigs