Your SlideShare is downloading. ×
Making WordPress Faster: Front-end Performance Techniques
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Making WordPress Faster: Front-end Performance Techniques

3,363
views

Published on

Presented at WordCamp Chicago 2010: …

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,363
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
86
Comments
3
Likes
8
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. 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. Saturday, June 5, 2010
  • 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. 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. 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? Saturday, June 5, 2010
  • 7. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? Saturday, June 5, 2010
  • 8. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle Saturday, June 5, 2010
  • 9. Making WordPress Faster FRONT-END PERFORMANCE TIPS Steve Souders 01 What is front-end performance? Saturday, June 5, 2010
  • 10. Making WordPress Faster FRONT-END PERFORMANCE TIPS 80/20 Principle 01 What is front-end performance? Saturday, June 5, 2010
  • 11. Making WordPress Faster FRONT-END PERFORMANCE TIPS 80/20 Principle 01 What is front-end performance? Saturday, June 5, 2010
  • 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle Saturday, June 5, 2010
  • 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. 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. 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 01 What is front-end performance? • 80/20 Principle • Performance Grading (YSlow) Saturday, June 5, 2010
  • 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. 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. 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. 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. Saturday, June 5, 2010
  • 23. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. Saturday, June 5, 2010
  • 24. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation Saturday, June 5, 2010
  • 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 Let’s make it faster. • Standard WordPress Installation Saturday, June 5, 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 02 — Download files concurrently 02 Let’s make it faster. Saturday, June 5, 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning 02 Let’s make it faster. Saturday, June 5, 2010
  • 50. Making WordPress Faster FRONT-END PERFORMANCE TIPS Statistics after performance tuning •YSlow 02 Let’s make it faster. Saturday, June 5, 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions Saturday, June 5, 2010
  • 60. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions Saturday, June 5, 2010
  • 61. Making WordPress Faster FRONT-END PERFORMANCE TIPS 03 Recap and questions 01 — Make fewer file requests Saturday, June 5, 2010
  • 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. 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. 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. 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. 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. 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. 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. 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. 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

×