Speed Up Wordpress Wordcamp Pdx 2009

Speed Up
Wordpress
Make 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.

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/

Ok, maybe that’s a bit much.

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

Just one more little bite plugin.

Broadband & 4G = What, Me Worry?

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

Speed = Success

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

Web Speed = Perception

Flickr: Uploaded October 15, 2006 by mattlogelin

September 19 • DevGroup NW Jason Grigsby • http://userﬁrstweb.com

Web Speed = Perception
Qu ality
U sab ility

ed ibility
Cr
Serv ice
Flickr: Uploaded October 15, 2006 by mattlogelin


Optimizing for Flow
0.1 seconds —
Viewed as
Instantaneous
1.0 seconds —
Moving Freely
10 seconds —
Retain Focus on Task

Flickr: Uploaded August 7, 2007 by .Hessam


Flickr: Uploaded November 7, 2005 by Tracy O


• Ecommerce
Bailout Rates
• Bandwidth
Charges

Flickr: Uploaded November 7, 2005 by Tracy O


Mobile Web Doubled in 2008
Jan 08 Jan 09

10821
Daily
22369

10312
Weekly
19283

36870
Ever in Month
63182

0 17500 35000 52500 70000

Unique Users (000s)
http://www.comscore.com/press/release.asp?press=2752

Slow Sites = Environmental Impact

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

http://www.ﬂickr.com/photos/13244105@N00/29463820/

Prep Work: Get Measurement Tools

Firebug for Firefox
http://getﬁrebug.com

YSlow Firebug Plugin from Yahoo
http://developer.yahoo.com/yslow/

Google Page Speed
http://code.google.com/speed/page-speed/

YSlow Firebug Plugin
http://developer.yahoo.com/yslow/

Step 1: Server vs. Client Performance

How long does it take for the
HTML ﬁle to download?

Look at network graph

Server Solutions

SQL Monitor
http://wordpress.org/extend/plugins/sqlmon/

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

Find a New Web Host

Most of the Time, It’s Not the Server

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

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

1. Make Fewer HTTP Requests 8. Make JavaScript and CSS External

2. Use a Content Delivery Network 9. Reduce DNS Lookups

3. Add an Expires Header 10.Minify JavaScript

4. Gzip Components 11.Avoid Redirects

5. Put Stylesheets at the Top 12.Remove Duplicate Scripts

6. Move Scripts to the Bottom 13.Conﬁgure ETags

7. Avoid CSS Expressions 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

Flickr photo by amaneiro:
http://www.ﬂickr.com/
photos/amaneiro/
2396649106/

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

Case Study: Nearly 80% reduction in ﬁle size.

Version HTML CSS JS Total

40,837 17,764 1,443 60,044
Original
bytes bytes bytes bytes

24,907 5,320 1,443 31,670
Optimized
bytes bytes bytes bytes

5,722 5,320 1,443 12,485
GZIP
bytes bytes bytes* bytes

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

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.

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

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 Two Domains

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

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-ﬁx/

Step 6: Images with Correct Size & Format

PNG (or GIF)
Logos
Line art

JPEG
Photos
Complex gradients

Resize Images to Fit the Usage

211x157
11k

618x460, 50.7k

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

Speed Up
Wordpress
Make Readers
Happy and Your
Site Green

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

Speed Up Wordpress Wordcamp Pdx 2009

More Related Content

What's hot

Viewers also liked

Similar to Speed Up Wordpress Wordcamp Pdx 2009

More from Jason Grigsby

Recently uploaded

Speed Up Wordpress Wordcamp Pdx 2009