making wordpress faster: front-end performance techniques
DESCRIPTION
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.TRANSCRIPT
JUNE 5 2010
Making WordPress FasterFront-end Performance Tips
We craft engaging interactive experiences on open & sustainable platforms
— Scott Robbin— [email protected]
Saturday, June 5, 2010
Saturday, June 5, 2010
Making WordPress Faster FRONT-END PERFORMANCE TIPS
AgendaWhat is front-end performance?
Let’s make it faster.
Recap and questions
01
02
03
Saturday, June 5, 2010
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
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
FRONT-END PERFORMANCE TIPS
What is front-end performance?
01
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
Making WordPress Faster
• 80/20 Principle
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
What is front-end performance?01
Steve Souders
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
What is front-end performance?01
80/20 Principle
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
What is front-end performance?01
80/20 Principle
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
What is front-end performance?01
80/20 Principle
h-mag.com 13%
smashingapps.com 2%
zeldman.com 12%
mightygirl.net 1%
gigaom.com 2%
ma.tt 14%
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
• Performance Grading (YSlow)
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
What is front-end performance?01
Yahoo! YSlow Google Page Speed14 Rules 26 Rules
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
What is front-end performance?01
YSlow Scores
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)
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
• Performance Grading (YSlow)
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
• Performance Grading (YSlow)
• 3 Basic Concepts:
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
• Performance Grading (YSlow)
• 3 Basic Concepts:
01 — Make fewer file requests
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
• Performance Grading (YSlow)
• 3 Basic Concepts:
01 — Make fewer file requests
02 — Download files concurrently
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
What is front-end performance?01
• 80/20 Principle
• Performance Grading (YSlow)
• 3 Basic Concepts:
01 — Make fewer file requests
02 — Download files concurrently
03 — Far-future cache expiration
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.
02
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
Making WordPress Faster
• Standard WordPress Installation
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
• WordPress
• ChocoTheme
• Plugins
• Lightbox 2
• Google Analyticator
Standard WordPress Installation
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
Making WordPress Faster
• Standard WordPress Installation
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
Making WordPress Faster
• Standard WordPress Installation
• Statistics before performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
• Page Load: 2.3s
• Page Weight:
• 183KB (empty)
• 4KB (primed)
• # of file requests: 36
• % HTML: 22%
Statistics before performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster02
• 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
Statistics before performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
01 — Make fewer file requests
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
Make sure your plugins are usingone JavaScript Framework
01 — Make fewer file requests
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
CSS Sprites
01 — Make fewer file requests
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
SpriteMe.org
01 — Make fewer file requests
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
PHP minifyhttp://code.google.com/p/minify/
01 — Make fewer file requests
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
01 — Make fewer file requests
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
01 — Make fewer file requests
02 — Download files concurrently
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
CSS at the top, JS at the bottom
02 — Download files concurrently
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
02 — Download files concurrently
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
JavaScript to Footer Plugin
02 — Download files concurrently
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
Google Analytics for WP Plugin
02 — Download files concurrently
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
CDN: Google-hosted jQuery
02 — Download files concurrently
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
01 — Make fewer file requests
02 — Download files concurrently
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
01 — Make fewer file requests
02 — Download files concurrently
03 — Far-future cache expiration
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
Simple changes to .htaccess
03 — Far-future cache expiration
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• Standard WordPress Installation
• Statistics before performance tuning
• 3 Basic Concepts:
01 — Make fewer file requests
02 — Download files concurrently
03 — Far-future cache expiration
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Let’s make it faster.02
• 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
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests
• Before: 36
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests
• Before: 36
• After: 17
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests
• Before: 36
• After: 17
• Page Load Time
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests
• Before: 36
• After: 17
• Page Load Time
• Before: 2.3s
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPSMaking WordPress Faster
Let’s make it faster.02
•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests
• Before: 36
• After: 17
• Page Load Time
• Before: 2.3s
• After: 1.3s
Statistics after performance tuning
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions
03
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
01 — Make fewer file requests
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
01 — Make fewer file requests
• One JavaScript framework
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
01 — Make fewer file requests
• One JavaScript framework
• CSS Sprites (SpriteMe.org)
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
01 — Make fewer file requests
• One JavaScript framework
• CSS Sprites (SpriteMe.org)
• PHP Minify
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
01 — Make fewer file requests
• One JavaScript framework
• CSS Sprites (SpriteMe.org)
• PHP Minify
02 — Download files concurrently
Saturday, June 5, 2010
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
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
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
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
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
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
FRONT-END PERFORMANCE TIPS
Recap and questions03
Making WordPress Faster
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
Making WordPress Faster FRONT-END PERFORMANCE TIPS
Thank you.
SCOTT ROBBINTwitter: @srobbinE-mail: [email protected]: srobbin.com
Saturday, June 5, 2010