Making WordPress Faster: Front-end Performance Techniques

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

Making WordPress Faster FRONT-END PERFORMANCE TIPS

Agenda
01 What is front-end performance?

02 Let’s make it faster.

03 Recap and questions



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 conﬁg ﬁles.



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-traﬃc websites.



01
What is front-end
performance?



• 80/20 Principle



Steve Souders


80/20 Principle



h-mag.com 13%

smashingapps.com 2%

zeldman.com 12%

mightygirl.net 1%

gigaom.com 2%

ma.tt 14%

80/20 Principle



• 80/20 Principle
• Performance Grading (YSlow)



Yahoo! YSlow Google Page Speed
14 Rules 26 Rules



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



• 80/20 Principle
• 3 Basic Concepts:



• 80/20 Principle
01 — Make fewer ﬁle requests



• 80/20 Principle
02 — Download ﬁles concurrently



• 80/20 Principle
03 — Far-future cache expiration



02
Let’s make it faster.



• Standard WordPress Installation



Standard WordPress Installation

• WordPress
• ChocoTheme
• Plugins
• Lightbox 2
• Google Analyticator



• Statistics before performance tuning



Statistics before performance tuning

• Page Load: 2.3s
• Page Weight:
• 183KB (empty)
• 4KB (primed)
• # of ﬁle requests: 36
• % HTML: 22%



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



Make sure your plugins are using
one JavaScript Framework




CSS Sprites




SpriteMe.org



PHP minify
http://code.google.com/p/minify/




CSS at the top, JS at the bottom




JavaScript to Footer Plugin




Google Analytics for WP Plugin



CDN: Google-hosted jQuery




Simple changes to .htaccess



• Statistics after performance tuning


Statistics after performance tuning




•YSlow




•YSlow
• Before: D (67)




•YSlow
• Before: D (67)
• After: B (86)




•YSlow
• Before: D (67)
• After: B (86)
• # of File Requests




•YSlow
• Before: D (67)
• After: B (86)
• Before: 36




•YSlow
• Before: D (67)
• After: B (86)
• Before: 36
• After: 17




•YSlow
• Before: D (67)
• After: B (86)
• Before: 36
• After: 17
• Page Load Time




•YSlow
• Before: D (67)
• After: B (86)
• Before: 36
• After: 17
• Page Load Time
• Before: 2.3s




•YSlow
• Before: D (67)
• After: B (86)
• Before: 36
• After: 17
• Page Load Time
• Before: 2.3s
• After: 1.3s


03
Recap and questions



• One JavaScript framework



• CSS Sprites (SpriteMe.org)



• PHP Minify



• PHP Minify
• CSS at the top, JavaScript at the bottom



• PHP Minify
• CDN: Google-hosted jQuery



• PHP Minify



• PHP Minify
• ETag and mod_expires directives for .htaccess



Thank you.

SCOTT ROBBIN
Twitter: @srobbin
E-mail: scott@weightshift.com
Web: srobbin.com

Making WordPress Faster: Front-end Performance Techniques

Recommandé

Recommandé

Contenu connexe

Similaire à Making WordPress Faster: Front-end Performance Techniques

Similaire à Making WordPress Faster: Front-end Performance Techniques (20)

Dernier

Dernier (20)

Making WordPress Faster: Front-end Performance Techniques