Making WordPress Faster: Front-end Performance Techniques

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

mailto:[email protected]


Making WordPress Faster FRONT-END PERFORMANCE TIPS

AgendaWhat is front-end performance?

Let’s make it faster.

Recap and questions

01

02

03



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.



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.


FRONT-END PERFORMANCE TIPS

What is front-end performance?

01

Making WordPress Faster



What is front-end performance?01






• 80/20 Principle


FRONT-END PERFORMANCE TIPSMaking WordPress Faster


Steve Souders




80/20 Principle




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 Speed14 Rules 26 Rules




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)




• 80/20 Principle






• 80/20 Principle


• 3 Basic Concepts:





• 80/20 Principle



01 — Make fewer file requests





• 80/20 Principle




02 — Download files concurrently





• 80/20 Principle





03 — Far-future cache expiration




Let’s make it faster.

02




Let’s make it faster.02






• Standard WordPress Installation




• WordPress

• ChocoTheme

• Plugins

• Lightbox 2

• Google Analyticator

Standard WordPress Installation






• Statistics before performance tuning




• Page Load: 2.3s

• Page Weight:

• 183KB (empty)

• 4KB (primed)

• # of file requests: 36

• % HTML: 22%

Statistics before performance tuning



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




Make sure your plugins are usingone JavaScript Framework





CSS Sprites





SpriteMe.org





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



http://code.google.com/p/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




Recap and questions

03




Recap and questions03







• 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 ROBBINTwitter: @srobbinE-mail: [email protected]: srobbin.com


http://twitter.com/srobbin

http://twitter.com/srobbin



http://srobbin.com/

http://srobbin.com/

Making WordPress Faster: Front-end Performance Techniques

Technology

Transcript of Making WordPress Faster: Front-end Performance Techniques