Download - Speed Up Wordpress Wordcamp Pdx 2009
![Page 1: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/1.jpg)
Speed Up WordpressMake Readers Happy and Your Site Green
Jason Grigsby • http://cloudour.com/blog • Twitter: @grigs • Slides at http://slideshare.net/grigs
![Page 2: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/2.jpg)
We’ve remade the Internet in our image.
![Page 3: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/3.jpg)
Obese
![Page 4: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/4.jpg)
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/
![Page 5: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/5.jpg)
I blame WordPress.
![Page 6: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/6.jpg)
Ok, maybe that’s a bit much.
![Page 7: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/7.jpg)
But there are just so many cool plugins.Who can resist?
Just one more little bite plugin.
![Page 8: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/8.jpg)
Source: http://www.websiteoptimization.com/bw/0708
Broadband & 4G = What, Me Worry?
![Page 9: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/9.jpg)
Shackel’s Acceptability ParadigmSource: Speed Up Your Site by Andrew King, p. 6.
Speed = Success
![Page 10: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/10.jpg)
Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW
Web Speed = Perception
Flickr: Uploaded October 15, 2006 by mattlogelin
![Page 11: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/11.jpg)
Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW
Web Speed = Perception
UsabilityQuality
ServiceCredibility
Flickr: Uploaded October 15, 2006 by mattlogelin
![Page 12: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/12.jpg)
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
![Page 13: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/13.jpg)
Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW
Flickr: Uploaded November 7, 2005 by Tracy O
![Page 14: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/14.jpg)
Jason Grigsby • http://userfirstweb.comSeptember 19 • DevGroup NW
• Ecommerce Bailout Rates
• Bandwidth Charges
Flickr: Uploaded November 7, 2005 by Tracy O
![Page 15: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/15.jpg)
![Page 16: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/16.jpg)
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
![Page 17: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/17.jpg)
Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
Slow Sites = Environmental Impact
![Page 18: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/18.jpg)
Storage Networking World 2007
![Page 19: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/19.jpg)
http://www.flickr.com/photos/13244105@N00/29463820/
![Page 20: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/20.jpg)
![Page 21: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/21.jpg)
Prep Work: Get Measurement Tools
![Page 22: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/22.jpg)
Firebug for Firefoxhttp://getfirebug.com
YSlow Firebug Plugin from Yahoohttp://developer.yahoo.com/yslow/
Google Page Speedhttp://code.google.com/speed/page-speed/
![Page 23: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/23.jpg)
YSlow Firebug Pluginhttp://developer.yahoo.com/yslow/
![Page 24: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/24.jpg)
Our Guinea Pig
![Page 25: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/25.jpg)
Step 1: Server vs. Client Performance
![Page 26: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/26.jpg)
How long does it take for the HTML file to download?
Look at network graph
![Page 27: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/27.jpg)
![Page 28: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/28.jpg)
SQL Monitorhttp://wordpress.org/extend/plugins/sqlmon/
WP Super Cachehttp://wordpress.org/extend/plugins/wp-super-cache/
Find a New Web Host
Server Solutions
![Page 29: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/29.jpg)
Source: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Most of the Time, It’s Not the Server
![Page 30: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/30.jpg)
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
![Page 31: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/31.jpg)
Step 2: Take a Benchmark Measurement
![Page 32: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/32.jpg)
Step 3: GZIP Like Your Life Depended on It
![Page 33: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/33.jpg)
GZIP is compression. If you do nothing else. DO THIS.
Flickr photo by amaneiro: http://www.flickr.com/
photos/amaneiro/2396649106/
![Page 34: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/34.jpg)
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.
![Page 35: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/35.jpg)
How to tell? Use YSlow Components Tab.
![Page 36: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/36.jpg)
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>
![Page 37: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/37.jpg)
Step 4: Tell Browsers to Cache Everything
![Page 38: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/38.jpg)
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.
![Page 39: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/39.jpg)
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>
![Page 40: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/40.jpg)
Step 5: Reduce the Number of Files
![Page 41: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/41.jpg)
Many Browsers have only 2 Concurrent Connections
One Domain
Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4
Two Domains
![Page 42: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/42.jpg)
WP’s Biggest Performance Challenge:
![Page 43: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/43.jpg)
![Page 44: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/44.jpg)
Problem solved in WP2.8? Not exactly.
@lyzadanger
![Page 45: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/45.jpg)
Install PHP Speedy WP
http://aciddrop.com/2009/02/02/php-speedy-wp-052-bug-fix/
![Page 46: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/46.jpg)
Step 6: Images with Correct Size & Format
![Page 47: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/47.jpg)
PNG (or GIF)LogosLine art
JPEGPhotos
Complex gradients
![Page 48: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/48.jpg)
618x460, 50.7k
211x15711k
Resize Images to Fit the Usage
![Page 49: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/49.jpg)
Bonus: CSS Sprites
![Page 50: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/50.jpg)
74 icons in single file.http;//us.i1.yimg.com/us.yimg.com/i/ww/sp/trough_1.5.gif
![Page 52: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/52.jpg)
The End Result
![Page 53: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/53.jpg)
![Page 54: Speed Up Wordpress Wordcamp Pdx 2009](https://reader033.vdocument.in/reader033/viewer/2022052822/554bd2b2b4c905706a8b4db3/html5/thumbnails/54.jpg)
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!