Making WordPress Faster: Front-end Performance Techniques

3,761 views

Published on

Presented at WordCamp Chicago 2010:

Optimizing WordPress database queries and caching is an important part of improving site performance, no doubt, but did you know that 80-90% of a page’s response time is spent waiting for front-end components to load? In this session, we’ll look at a few simple techniques that you can use to speed up your WordPress theme.

Published in: Technology, Business
3 Comments
8 Likes
Statistics
Notes
  • I want to make my site faster. Will you do the job for a fee?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • YUI Compressor is a little bit harder to use, but will yield better minification results: http://developer.yahoo.com/yui/compressor/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • On Slide 43, you recommend de-registering jQuery so that you can add it from Google's CDN. However, you didn't re-register it the URL to jQuery with WordPress. This could potentially cause issues for other plugins that depend on jQuery. You should always use the wp_register_script / wp_enqueue_script functions to add Javascripts to your WordPress site, no exceptions.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,761
On SlideShare
0
From Embeds
0
Number of Embeds
1,489
Actions
Shares
0
Downloads
88
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Making WordPress Faster: Front-end Performance Techniques

  1. 1. JUNE 5 2010 Making WordPress Faster Front-end Performance Tips We craft engaging interactive experiences on open & sustainable platforms — Scott Robbin — scott@weightshift.com Saturday, June 5, 2010
  2. 2. Saturday, June 5, 2010
  3. 3. Making WordPress Faster FRONT-END PERFORMANCE TIPS Agenda 01 What is front-end performance? 02 Let’s make it faster. 03 Recap and questions Saturday, June 5, 2010
  4. 4. Making WordPress Faster FRONT-END PERFORMANCE TIPS Who? • Have an understanding of HTML, CSS and how websites are delivered. • Are a theme developer, do client work or just want to make your website faster. • Know how to use FTP and ability to edit .htaccess or Apache config files. Saturday, June 5, 2010
  5. 5. Making WordPress Faster FRONT-END PERFORMANCE TIPS Why? • Google now uses page speed in their calculation of Page Rank. • Improve user experience and conversion rates. • Helps with Digg, Slashdot or getting Fireballed. • Reduce costs for high-traffic websites. Saturday, June 5, 2010
  6. 6. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? Saturday, June 5, 2010
  7. 7. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? Saturday, June 5, 2010
  8. 8. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle Saturday, June 5, 2010
  9. 9. Making WordPress Faster FRONT-END PERFORMANCE TIPS Steve Souders 01 What is front-end performance? Saturday, June 5, 2010
  10. 10. Making WordPress Faster FRONT-END PERFORMANCE TIPS 80/20 Principle 01 What is front-end performance? Saturday, June 5, 2010
  11. 11. Making WordPress Faster FRONT-END PERFORMANCE TIPS 80/20 Principle 01 What is front-end performance? Saturday, June 5, 2010
  12. 12. Making WordPress Faster FRONT-END PERFORMANCE TIPS h-mag.com 13% smashingapps.com 2% zeldman.com 12% mightygirl.net 1% gigaom.com 2% ma.tt 14% 80/20 Principle 01 What is front-end performance? Saturday, June 5, 2010
  13. 13. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle Saturday, June 5, 2010
  14. 14. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) Saturday, June 5, 2010
  15. 15. Making WordPress Faster FRONT-END PERFORMANCE TIPS Yahoo! YSlow Google Page Speed 14 Rules 26 Rules 01 What is front-end performance? Saturday, June 5, 2010
  16. 16. Making WordPress Faster FRONT-END PERFORMANCE TIPS h-mag.com E (51) smashingapps.com D (66) zeldman.com D (60) mightygirl.net E (57) gigaom.com E (56) ma.tt D (68) YSlow Scores 01 What is front-end performance? Saturday, June 5, 2010
  17. 17. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) Saturday, June 5, 2010
  18. 18. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) • 3 Basic Concepts: Saturday, June 5, 2010
  19. 19. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) • 3 Basic Concepts: 01 — Make fewer file requests Saturday, June 5, 2010
  20. 20. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently Saturday, June 5, 2010
  21. 21. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently 03 — Far-future cache expiration Saturday, June 5, 2010
  22. 22. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. Saturday, June 5, 2010
  23. 23. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. Saturday, June 5, 2010
  24. 24. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation Saturday, June 5, 2010
  25. 25. Making WordPress Faster FRONT-END PERFORMANCE TIPS Standard WordPress Installation • WordPress • ChocoTheme • Plugins • Lightbox 2 • Google Analyticator 02 Let’s make it faster. Saturday, June 5, 2010
  26. 26. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation Saturday, June 5, 2010
  27. 27. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning Saturday, June 5, 2010
  28. 28. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics before performance tuning • Page Load: 2.3s • Page Weight: • 183KB (empty) • 4KB (primed) • # of file requests: 36 • % HTML: 22% 02 Let’s make it faster. Saturday, June 5, 2010
  29. 29. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics before performance tuning • YSlow: D (67) • 9 JavaScript files • All in the <head> • 3 CSS files • 19 background images • 34 files w/o far-future expires • 33 files w/ misconfigured ETags 02 Let’s make it faster Saturday, June 5, 2010
  30. 30. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning Saturday, June 5, 2010
  31. 31. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: Saturday, June 5, 2010
  32. 32. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests Saturday, June 5, 2010
  33. 33. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 — Make fewer file requests Make sure your plugins are using one JavaScript Framework 02 Let’s make it faster. Saturday, June 5, 2010
  34. 34. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 — Make fewer file requests CSS Sprites 02 Let’s make it faster. Saturday, June 5, 2010
  35. 35. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 — Make fewer file requests SpriteMe.org 02 Let’s make it faster. Saturday, June 5, 2010
  36. 36. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 — Make fewer file requests PHP minify http://code.google.com/p/minify/ 02 Let’s make it faster. Saturday, June 5, 2010
  37. 37. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests Saturday, June 5, 2010
  38. 38. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently Saturday, June 5, 2010
  39. 39. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 — Download files concurrently CSS at the top, JS at the bottom 02 Let’s make it faster. Saturday, June 5, 2010
  40. 40. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 — Download files concurrently 02 Let’s make it faster. Saturday, June 5, 2010
  41. 41. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 — Download files concurrently JavaScript to Footer Plugin 02 Let’s make it faster. Saturday, June 5, 2010
  42. 42. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 — Download files concurrently Google Analytics for WP Plugin 02 Let’s make it faster. Saturday, June 5, 2010
  43. 43. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 — Download files concurrently CDN: Google-hosted jQuery 02 Let’s make it faster. Saturday, June 5, 2010
  44. 44. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently Saturday, June 5, 2010
  45. 45. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently 03 — Far-future cache expiration Saturday, June 5, 2010
  46. 46. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 — Far-future cache expiration Simple changes to .htaccess 02 Let’s make it faster. Saturday, June 5, 2010
  47. 47. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently 03 — Far-future cache expiration Saturday, June 5, 2010
  48. 48. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation • Statistics before performance tuning • 3 Basic Concepts: 01 — Make fewer file requests 02 — Download files concurrently 03 — Far-future cache expiration • Statistics after performance tuning Saturday, June 5, 2010
  49. 49. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning 02 Let’s make it faster. Saturday, June 5, 2010
  50. 50. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow 02 Let’s make it faster. Saturday, June 5, 2010
  51. 51. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) 02 Let’s make it faster. Saturday, June 5, 2010
  52. 52. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) 02 Let’s make it faster. Saturday, June 5, 2010
  53. 53. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) • # of File Requests 02 Let’s make it faster. Saturday, June 5, 2010
  54. 54. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) • # of File Requests • Before: 36 02 Let’s make it faster. Saturday, June 5, 2010
  55. 55. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) • # of File Requests • Before: 36 • After: 17 02 Let’s make it faster. Saturday, June 5, 2010
  56. 56. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) • # of File Requests • Before: 36 • After: 17 • Page Load Time 02 Let’s make it faster. Saturday, June 5, 2010
  57. 57. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) • # of File Requests • Before: 36 • After: 17 • Page Load Time • Before: 2.3s 02 Let’s make it faster. Saturday, June 5, 2010
  58. 58. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow • Before: D (67) • After: B (86) • # of File Requests • Before: 36 • After: 17 • Page Load Time • Before: 2.3s • After: 1.3s 02 Let’s make it faster. Saturday, June 5, 2010
  59. 59. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions Saturday, June 5, 2010
  60. 60. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions Saturday, June 5, 2010
  61. 61. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests Saturday, June 5, 2010
  62. 62. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework Saturday, June 5, 2010
  63. 63. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) Saturday, June 5, 2010
  64. 64. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) • PHP Minify Saturday, June 5, 2010
  65. 65. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) • PHP Minify 02 — Download files concurrently Saturday, June 5, 2010
  66. 66. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) • PHP Minify 02 — Download files concurrently • CSS at the top, JavaScript at the bottom Saturday, June 5, 2010
  67. 67. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) • PHP Minify 02 — Download files concurrently • CSS at the top, JavaScript at the bottom • CDN: Google-hosted jQuery Saturday, June 5, 2010
  68. 68. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) • PHP Minify 02 — Download files concurrently • CSS at the top, JavaScript at the bottom • CDN: Google-hosted jQuery 03 — Far-future cache expiration Saturday, June 5, 2010
  69. 69. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests • One JavaScript framework • CSS Sprites (SpriteMe.org) • PHP Minify 02 — Download files concurrently • CSS at the top, JavaScript at the bottom • CDN: Google-hosted jQuery 03 — Far-future cache expiration • ETag and mod_expires directives for .htaccess Saturday, June 5, 2010
  70. 70. Making WordPress Faster FRONT-END PERFORMANCE TIPS Thank you. SCOTT ROBBIN Twitter: @srobbin E-mail: scott@weightshift.com Web: srobbin.com Saturday, June 5, 2010

×