make your site speedy
DESCRIPTION
How to improve the performance of your ExpressionEngine website. Written by me, with contributions from the awesome attendees at the BostonEErs September 2010 event: http://www.meetup.com/BostonEErs/calendar/14247978/TRANSCRIPT
Make Your Site SpEEdyImproving the performance ofyour ExpressionEngine website
Prepared by Ruthie BenDor for the BostonEErs September 2010 Meetup
Part I: Tools and techniques for
Measuring Performance
Web server
What impacts site speed?
BrowserServer-sidescriptsDatabase
Filesystem
1. Browser rendering time
2. Component transmission time
3. Server-side script execution
123
4
5
4. Filesystem disk accessing time
5. Database query execution time
Web server
What impacts site speed?
BrowserExpressionEngineMySQL
Filesystem
1. Browser rendering time
2. Component transmission time
3. Server-side script execution
123
4
5
4. Filesystem disk accessing time
5. Database query execution time
HTML fragments, CSS files, Javascript
files, images
Page render time and component load time
1
can be measured with YSlow and/or Google Page Speed for Firebug.
(Also useful: Webkit’s Developer Tools.)
2
Server-side script execution
can be measured by enabling EE’s Template Debugging.
3
In EE 1.6.x’s Control Panel:Admin › System Preferences › Output and Debugging Preferences
In EE 2.1’s Control Panel:Admin › System Administration › Output and Debugging
Database queries
can be seen by enabling EE’s output profiler. Note that this doesn’t tell us how long a single query takes to run, but it does show us the full query.
5
In EE 1.6.x’s Control Panel:Admin › System Preferences › Output and Debugging Preferences
In EE 2.1’s Control Panel:Admin › System Administration › Output and Debugging
Part 2: Recommendations for
Improving Performance
The site optimization cycle
Measure performance.
(“Benchmark.”) Identify the biggest (or
easiest-to-fix) bottleneck.
Remove that bottleneck.
Web server
What impacts site speed?
BrowserExpressionEngineMySQL
Filesystem
1. Browser rendering time
2. Component transmission time
3. Server-side script execution
123
4
5
4. Filesystem disk accessing time
5. Database query execution time
HTML fragments, CSS files, Javascript
files, images
Browser rendering time optimizations
1
• Make your Javascript and CSS more efficient, so the browser is able to render (draw) the completed page more quickly.
• For writing faster CSS, check out OOCSS: http://wiki.github.com/stubbornella/oocss/
• For writing faster JavaScript, speed-test snippets using JSPerf: http://jsperf.com/
Component transmission time optimizations
2
• Minify and concatenate all JavaScript into a single file, and minify and concatenate all CSS into a single file. • If you keep your Javascript and CSS in EE templates, concatenate these
assets using this technique: http://easy-reader.net/archives/2010/07/11/template-based-asset-munging-in-expressionengine
• To concatenate and minify JS/CSS in EE templates, try SL Combinator http://experienceinternet.co.uk/software/sl-combinator/docs/, which uses an old version of Minify http://code.google.com/p/minify/
• If you keep your JS and CSS assets outside of EE, use Minify http://code.google.com/p/minify/
Component transmission time optimizations (con’t)
2
• Serve optimized images.• Prevent content maintainers from uploading content images that are too
large by using http://www.lumis.com/page/imgsizer/
• Run all site image assets through http://smush.it/ to reduce filesize as much as possible.
• Where possible, combine (aka sprite) site image assets.
• Enable GZIP compression in EE.
In EE 1.6.x’s Control Panel:Admin › System Preferences › Output and Debugging Preferences
In EE 2.1’s Control Panel:Admin › System Administration › Output and Debugging
Server-side script execution optimizations
3
• Cache individual tags.• Tag caches are time-based, set in minutes. Use on any EE tag like so:
{exp:some:tag cache="yes" refresh="30"}
• Cache entire templates.• Enabled on a per-template basis. In EE1, look in Templates > Preferences. In EE2,
look in Design > Templates > Template Preferences.
• Template caches are time-based, mostly - certain events will clear the cache: http://expressionengine.com/user_guide/general/caching.html#template_caching
• Template caching supercedes tag caching, so if you’re caching the entire template, there’s no reason to also cache individual tags.
• A cached template in EE is still heavier, performance-wise, than a 100% static page served from outside EE.
Server-side script execution optimizations (con’t)
3
• Where possible, use Global Variables and Snippets instead of embedded templates.• Snippets can contain EE tags, while Global Variables can contain only HTML.
• Snippets are EE2-only.
• Why Snippets are faster than embedded templates: http://www.meetup.com/BostonEErs/messages/boards/thread/9783637
• Where possible, avoid nesting embedded templates.
Filesystem optimizations
4
• Don’t save templates as flat files.• Why? “Saving templates as files can marginally increase disk 1/o as teach
template must be retrieved from disk in addition to the standard database query responsible for managing your template’s meta data (access, PHP parsing, template type, etc.)” - http://expressionengine.com/user_guide/general/handling_extreme_traffic.html
• But flat files are really convenient during development!• Suggestion: work with templates as flat files during development. At site
launch, sync all templates back to the database, and set all templates to no longer save as flat files. How?
• In EE2, use the built-in Synchronize Templates tool under Design > Templates.
• In EE1, either sync manually, or use the free DC Template Manager module: http://devot-ee.com/add-ons/dc-template-manager/
Database query optimizations
5
• Set the database connection to non-persistent.
• In EE2, set Persistent Database Connection to No at Admin › System Administration › Database Settings
• In EE1, set Database Connection Type to Non Persistent at Admin › System Preferences › Database Settings
• Reduce the number of queries each page calls.• http://expressionengine.com/wiki/Reduce_Queries/
• Cache frequently used queries.
• In EE2, set Enable SQL Query Caching to Yes at Admin › System Administration › Database Settings
• In EE1, set Enable SQL Query Caching to Yes at Admin › System Preferences › Database Settings
Database query optimizations (con’t)
5
• Enable dynamic channel query caching.• Only enable if your site doesn’t use future, expiring, or random entries.
• In EE1, set Cache Dynamic Channel Queries? to Yes at Admin › Weblog Administration › Global Weblog Preferences.
• In EE2, set Cache Dynamic Channel Queries? to Yes at Admin › Channel Administration › Global Preferences.
• Disable unused parts of {exp:channel:entries} queries.• In EE1, six things can be disabled: {exp:channel:entries disable="categories|
category_fields|custom_fields|member_data|pagination|trackbacks"}
• In EE2, trackbacks have been removed, so five things can be disabled:{exp:channel:entries disable="categories|category_fields|custom_fields|member_data|pagination"}
Database query optimizations (con’t)
5
• Repair and optimize EE’s MySQL tables.• In EE1, look under Admin › Utilities › SQL Manager › Manage Database Tables.
• In EE2, look under Tools › Data › SQL Manager › Manage Database Tables.
• Disable template tracking.• In EE1, look under Admin › System Preferences › Tracking Preferences.
• In EE2, these options must be set manually in config.php.
Part 3:
More Resources
Online Resources
• ExpressionEngine.com User Guide
• http://expressionengine.com/user_guide/general/caching.html
• http://expressionengine.com/user_guide/general/handling_extreme_traffic.html
• http://expressionengine.com/user_guide/templates/flat_file_templates.html
• http://expressionengine.com/legacy_docs/cp/admin/system_preferences/tracking_preferences.html
• SolSpace’s EE Website Performance Guidelines
• http://www2.grist.org/misc/Performance_Guidelines.pdf
Books
• High Performance Web Sites, by Steve Souders: http://www.amazon.com/gp/product/0596529309
• Even Faster Web Sites, also by Steve Souders: http://www.amazon.com/gp/product/0596522304
Nearby Groups
• Boston Web Performance Group: http://www.meetup.com/Web-Performance-Boston/
Thanks!
http://twitter.com/BostonEErs
http://BostonEErs.org