make your site speedy

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