speed up wordpress wordcamp pdx 2009
Post on 08-May-2015
6.445 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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!
top related