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.

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