Speed Up WordpressMake Readers Happy and Your Site Green

Jason Grigsby • http://cloudour.com/blog • Twitter: @grigs • Slides at http://slideshare.net/grigs

We’ve remade the Internet in our image.

Obese

We’ve Become Bandwidth Gluttons

Since 2003:

• Web Page Size Tripled• # of Objects Doubled

Since 1995:

• Web Page Size: 22x• # of Objects: 21x

Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/

I blame WordPress.

Ok, maybe that’s a bit much.

But there are just so many cool plugins.Who can resist?

Just one more little bite plugin.

Source: http://www.websiteoptimization.com/bw/0708

Broadband & 4G = What, Me Worry?

Shackel’s Acceptability ParadigmSource: Speed Up Your Site by Andrew King, p. 6.

Speed = Success

Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW

Web Speed = Perception

Flickr: Uploaded October 15, 2006 by mattlogelin

Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW

Web Speed = Perception

UsabilityQuality

ServiceCredibility

Flickr: Uploaded October 15, 2006 by mattlogelin

Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW

0.1 seconds — Viewed as Instantaneous

1.0 seconds — Moving Freely

10 seconds — Retain Focus on Task

Optimizing for Flow

Flickr: Uploaded August 7, 2007 by .Hessam

Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW

Flickr: Uploaded November 7, 2005 by Tracy O

Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW

• Ecommerce Bailout Rates

• Bandwidth Charges

Flickr: Uploaded November 7, 2005 by Tracy O

Daily

Weekly

Ever in Month

0 17500 35000 52500 70000

63182

19283

22369

36870

10312

10821

Jan 08 Jan 09

http://www.comscore.com/press/release.asp?press=2752

Unique Users (000s)

Mobile Web Doubled in 2008

Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/

Slow Sites = Environmental Impact

Storage Networking World 2007

http://www.flickr.com/photos/13244105@N00/29463820/

Prep Work: Get Measurement Tools

Firebug for Firefoxhttp://getfirebug.com

YSlow Firebug Plugin from Yahoohttp://developer.yahoo.com/yslow/

Google Page Speedhttp://code.google.com/speed/page-speed/

YSlow Firebug Pluginhttp://developer.yahoo.com/yslow/

Our Guinea Pig

Step 1: Server vs. Client Performance

How long does it take for the HTML file to download?

Look at network graph

SQL Monitorhttp://wordpress.org/extend/plugins/sqlmon/

WP Super Cachehttp://wordpress.org/extend/plugins/wp-super-cache/

Find a New Web Host

Server Solutions

Source: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/

Most of the Time, It’s Not the Server

Yahoo!’s 14 Performance Rules (Now 34!)

1. Make Fewer HTTP Requests

2. Use a Content Delivery Network

3. Add an Expires Header

4. Gzip Components

5. Put Stylesheets at the Top

6. Move Scripts to the Bottom

7. Avoid CSS Expressions

8. Make JavaScript and CSS External

9. Reduce DNS Lookups

10.Minify JavaScript

11.Avoid Redirects

12.Remove Duplicate Scripts

13.Configure ETags

14.Make AJAX Cacheable

Source: http://developer.yahoo.com/performance/rules.html

Step 2: Take a Benchmark Measurement

Step 3: GZIP Like Your Life Depended on It

GZIP is compression. If you do nothing else. DO THIS.

Flickr photo by amaneiro: http://www.flickr.com/

photos/amaneiro/2396649106/

Version HTML CSS JS Total

Original 40,837 bytes

17,764 bytes

1,443 bytes

60,044bytes

Optimized 24,907bytes

5,320 bytes

1,443 bytes

31,670 bytes

GZIP 5,722bytes

5,320bytes

1,443bytes*

12,485bytes

Case Study: Nearly 80% reduction in file size.

How to tell? Use YSlow Components Tab.

Add three lines to .htaccess & save the world?

<IfModule mod_deflate.c>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml</IfModule>

Step 4: Tell Browsers to Cache Everything

Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l

Aggressively Encourage Caching

•Goal #1: No HTTP HEAD Requests.

•Add Expires header. Put it far into the future.

•Develop naming conventions for versioning of files. Update filename when file is modified.

e.g., logo20090523.png

•Keep files under 25k for mobile devices.

•Configure or remove ETags from files.

•Watch your logs to make sure caching works.

Add these lines to .htaccess

<IfModule mod_expires.c> ExpiresActive on ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-icon "access plus 1 year" </IfModule>

If your server does not have mod_expires, alternatively use:

<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css)$"> Header set Expires "Sun, 22 Apr 2018 01:10:54 GMT" Header set Cache-Control "max-age=315360000" Header unset Pragma </FilesMatch>

Step 5: Reduce the Number of Files

Many Browsers have only 2 Concurrent Connections

One Domain

Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4

Two Domains

WP’s Biggest Performance Challenge:

Problem solved in WP2.8? Not exactly.

@lyzadanger

Install PHP Speedy WP

http://aciddrop.com/2009/02/02/php-speedy-wp-052-bug-fix/

Step 6: Images with Correct Size & Format

PNG (or GIF)LogosLine art

JPEGPhotos

Complex gradients

618x460, 50.7k

211x15711k

Resize Images to Fit the Usage

Bonus: CSS Sprites

74 icons in single file.http;//us.i1.yimg.com/us.yimg.com/i/ww/sp/trough_1.5.gif

http://spriteme.org

The End Result

Speed Up WordpressMake Readers Happy and Your Site Green

Jason Grigsby • http://cloudour.com/blog • Twitter: @grigs • Slides at http://slideshare.net/grigs

Thank You!