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/

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.

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 September 19 • DevGroup NW Jason Grigsby • http://userﬁrstweb.com

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 September 19 • DevGroup NW Jason Grigsby • http://userﬁrstweb.com

Flickr: Uploaded November 7, 2005 by Tracy O September 19 • DevGroup NW Jason Grigsby • http://userﬁrstweb.com

• Ecommerce Bailout Rates • Bandwidth Charges Flickr: Uploaded November 7, 2005 by Tracy O September 19 • DevGroup NW Jason Grigsby • http://userﬁrstweb.com

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/

Storage Networking World 2007

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/

Our Guinea Pig

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

Bonus: CSS Sprites

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

http://spriteme.org

The End Result

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

http://www.lvidmar.com	6
http://www.slideshare.net	5
http://www.iweb34.com	2
http://www.linkedin.com	1

Speed Up Wordpress Wordcamp Pdx 2009

by Jason Grigsby

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 14

Statistics

Speed Up Wordpress Wordcamp Pdx 2009 Presentation Transcript