speed up wordpress wordcamp pdx 2009

Download Speed Up Wordpress Wordcamp Pdx 2009

Post on 08-May-2015

6.443 views

Category:

Technology

0 download

Embed Size (px)

DESCRIPTION

Why performance matters and some simple steps to optimize Wordpress.Presented at Wordcamp 2009.

TRANSCRIPT

  • 1.Speed Up Wordpress Make Readers Happy and Your Site Green Jason Grigsby http://cloudour.com/blog Twitter: @grigs Slides at http://slideshare.net/grigs

2. Weve remade the Internet in our image. 3. Obese 4. Weve Become Bandwidth Gluttons Since 2003: Web Page Size Tripled#of Objects Doubled Since 1995: Web Page Size: 22x#of Objects: 21xSource: http://www.websiteoptimization.com/speed/tweak/average-web-page/ 5. I blame WordPress. 6. Ok, maybe thats a bit much. 7. But there are just so many cool plugins. Who can resist?Just one more little bite plugin. 8. Broadband & 4G = What, Me Worry? Source: http://www.websiteoptimization.com/bw/0708 9. Speed = Success Shackels Acceptability Paradigm Source: Speed Up Your Site by Andrew King, p. 6. 10. Web Speed = PerceptionFlickr: Uploaded October 15, 2006 by mattlogelinSeptember 19 DevGroup NW Jason Grigsby http://userrstweb.com 11. Web Speed = PerceptionQu ality U sab ility ed ibility CrServ ice Flickr: Uploaded October 15, 2006 by mattlogelinSeptember 19 DevGroup NWJason Grigsby http://userrstweb.com 12. Optimizing for Flow0.1 seconds Viewed asInstantaneous1.0 seconds Moving Freely10 seconds Retain Focus on TaskFlickr: Uploaded August 7, 2007 by .HessamSeptember 19 DevGroup NW Jason Grigsby http://userrstweb.com 13. Flickr: Uploaded November 7, 2005 by Tracy OSeptember 19 DevGroup NW Jason Grigsby http://userrstweb.com 14. Ecommerce Bailout Rates Bandwidth Charges Flickr: Uploaded November 7, 2005 by Tracy OSeptember 19 DevGroup NWJason Grigsby http://userrstweb.com 15. Mobile Web Doubled in 2008 Jan 08 Jan 0910821 Daily2236910312 Weekly 19283 36870 Ever in Month63182 017500 35000 52500 70000 Unique Users (000s) http://www.comscore.com/press/release.asp?press=2752 16. Slow Sites = Environmental Impact Flickr photo by Pingnews: http://www.ickr.com/photos/pingnews/370061022/ 17. Storage Networking World 2007 18. http://www.ickr.com/photos/13244105@N00/29463820/ 19. Prep Work: Get Measurement Tools 20. Firebug for Firefox http://getrebug.comYSlow Firebug Plugin from Yahoo http://developer.yahoo.com/yslow/Google Page Speed http://code.google.com/speed/page-speed/ 21. YSlow Firebug Plugin http://developer.yahoo.com/yslow/ 22. Our Guinea Pig 23. Step 1: Server vs. Client Performance 24. How long does it take for the HTML le to download? Look at network graph 25. 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 26. Most of the Time, Its Not the ServerSource: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ 27. Yahoo!s 14 Performance Rules (Now 34!)1. Make Fewer HTTP Requests8. Make JavaScript and CSS External 2. Use a Content Delivery Network9. Reduce DNS Lookups 3. Add an Expires Header 10.Minify JavaScript 4. Gzip Components 11.Avoid Redirects 5. Put Stylesheets at the Top12.Remove Duplicate Scripts 6. Move Scripts to the Bottom13.Congure ETags 7. Avoid CSS Expressions 14.Make AJAX Cacheable Source: http://developer.yahoo.com/performance/rules.html 28. Step 2: Take a Benchmark Measurement 29. Step 3: GZIP Like Your Life Depended on It 30. Flickr photo by amaneiro: http://www.ickr.com/ photos/amaneiro/2396649106/ GZIP is compression. If you do nothing else. DO THIS. 31. Case Study: Nearly 80% reduction in le size. Version HTMLCSSJS Total40,837 17,764 1,44360,044Originalbytesbytes bytes bytes24,907 5,3201,44331,670 Optimizedbytes bytesbytes bytes5,7225,3201,44312,485 GZIP bytesbytesbytes*bytes 32. How to tell? Use YSlow Components Tab. 33. Add three lines to .htaccess & save the world? 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 34. Step 4: Tell Browsers to Cache Everything 35. Aggressively Encourage Caching Goal #1: No HTTP HEAD Requests.Add Expires header. Put it far into the future.Develop naming conventions for versioning ofles. Update lename when le is modied.e.g., logo20090523.pngKeep les under 25k for mobile devices.Congure or remove ETags from les.Watch your logs to make sure caching works.Flickr photo by John Wardell (Netinho): http://www.ickr.com/photo_zoom.gne?id=760902403&size=l 36. Add these lines to .htaccessExpiresActive onExpiresByType 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"If your server does not have mod_expires, alternatively use:Header set Expires "Sun, 22 Apr 2018 01:10:54 GMT"Header set Cache-Control "max-age=315360000"Header unset Pragma 37. Step 5: Reduce the Number of Files 38. Many Browsers have only 2 Concurrent Connections One Domain Two DomainsSource: http://yuiblog.com/blog/2007/04/11/performance-research-part-4 39. WPs Biggest Performance Challenge: 40. Problem solved in WP2.8? Not exactly. @lyzadanger 41. Install PHP Speedy WP http://aciddrop.com/2009/02/02/php-speedy-wp-052-bug-x/ 42. Step 6: Images with Correct Size & Format 43. PNG (or GIF) Logos Line art JPEG Photos Complex gradients 44. Resize Images to Fit the Usage211x15711k 618x460, 50.7k 45. Bonus: CSS Sprites 46. 74 icons in single le. http;//us.i1.yimg.com/us.yimg.com/i/ww/sp/trough_1.5.gif 47. http://spriteme.org 48. The End Result 49. 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