Best Practices for Successful Launches

Launch Check Introduction

1. Top reasons why your site could be slow2. Take action to improve your site’s performance3. What an underperforming site looks like4. Which third-party performance tools to use

What we’re covering:

Launch CheckPerformance Recommendations

Pantheon Dashboard > Site Environment > Status

Best Practices

● No multi-site● sites/all and sites/default exist● No extra files in /sites● Drupal Fast 404 pages on● sites/default/settings.php exists

Launch Check: Best practices

Drupal’s caching settings

● Anonymous page cache: enabled● Minimum cache lifetime: none● Cached page compression: off● Expiration of cached pages: 15 min+● Aggregate and compress CSS: on● Aggregate JavaScript: on

Launch Check: Drupal’s caching settings - before

● Enabled● Last run● Currently running

Drupal Cron

Launch Check: Cron

● collation - UTF8 is best● storage engine - InnoDB is optimal

Drupal Database

Launch Check: Drupal’s Database

● Count● Duplicates● Not recommended● Development● Missing

Extensions (modules & themes)

Launch Check: Extensions - before

Drupal’s System Status

Users

Views

Watchdog Database Logs

● PHP messages● Date range● Number of 404 entries● dblog status: enabled● syslog status: not enabled● Count

Launch Check: Watchdog

● Simple Drupal 7 site● Apache Bench - 10,000 requests to home

page (5 concurrent)● Warmed cache, cleared watchdog● Comparison

○ Bad config, 1 PHP notice and warning in theme○ Good config, no PHP notices or warnings

Test Configuration

Test Result

Bad config, errors● 20 min, 52 sec● Requests per

second: 7.98● Time per request:

626.192 ms

Good config, no errors● 10 min, 25 sec● Requests per

second: 15.99● Time per request:

312.780 ms

Why is my site slow?

1. Bad caching configurationa. Tune!

2. PHP errorsa. Fix them!

3. Wrong database storage enginea. Convert it!

4. Browser renderinga. Enable aggregationb. How to detect slowness?

WaterfallingRendering Optimizations

The Critical Render PathThe critical rendering path is a series of steps that need to take place in order to render a page in a browser.

Waterfall Diagram

Resource timing

● Proxy● DNS Lookup● Blocking● Connecting● Sending ● Waiting● Receiving

Minimizing Round-Trip Times

TTFB Page Size Complete Load DomContentLoad

55 1.53s 6.7kb 3.68s 3.50 2.8s

Before Aggregation of JS/CSS

Reduce the number of serial requests

TTFB Page Size Complete Load DomContentLoad

35 419ms 189kb 2.29s 2.07 1.49s

After Aggregation of JS/CSS

Minimizing Request OverheadDisable unused modules

TTFB Page Size Complete Load DomContentLoad

28 400ms 146kb 2.19s 1.8s 1.42s

Optimizing Images

PNGhttp://www.smushit.com/ysmush.it/http://www.punypng.com/https://tinypng.com/http://pngcrush.com/http://pmt.sourceforge.net/pngcrush/

JPGhttp://jpeg-optimizer.com/PhotoshopGimp

Best Practices● Minimize DNS lookups● Minimize redirects● Avoid bad requests● Combine external JavaScript● Combine external CSS● Combine images using CSS sprites● Optimize the order of styles and scripts● Avoid document.write● Avoid CSS @import● Prefer asynchronous resources● Parallelize downloads across hostnames

Optimizing Browser Rendering● Use efficient CSS selectors● Avoid CSS expressions● Put CSS in the document head● Specify image dimensions

Where to from here?

Add automation:● JS Validation● JS lint● CSS Validation● CSS lint● Grunt pagespeed

Front-end tools

● Google Pagespeed● Pingdom● YSlow● Firebug● Webpagetest.org

Set Benchmarks

● Prevent against regressions● Improve user experience● Visitor retention/acquisition

Launch Check

● Launch continuously● Deploying changes like updating themes● Catalog result

Questions?http://www.getpantheon.com/product/launchcheck