Enterprise WordPressPerformance, Scalability & Redundancy

@JohnGiaconia Senior Manager, Technology The Walt Disney Company

Focus Areas

Architecture Caching

Optimizing Testing

Part 1

Architecture Caching

Optimizing Testing

Server Architecture• Dedicated server for Admin Traffic

• Not affected by load on the front end

• Can be secured more tightly

• 3 front end servers

• Redundancy even if one is out of rotation

• Monitors

Specialized Servers• Dedicated servers for Database

• Offload the processing from Web Servers

• Memcache servers

• Load balancer

• Handle SSL offloading

• Restrict admin requests to whitelist source traffic

Fire

wal

l

CDN

Load Balancer

Why is this important?

By distributing the work to specialized servers, the servers can be more tuned & optimized for a certain task.

Bottlenecks can be addressed at a more granular level.

This sounds like a lot of servers

Multiple web applications can share specialized servers.

Plan ahead when architecting a new site. Will additional specialized servers need to be added into rotation?

Part 2

Architecture Caching

Optimizing Testing

Types of CachingObject

Proxy

Assets

• Stores objects as a key-value pair • Managed at the code level • Development tasks

• Stores HTML • Managed at the system level • Config and development tasks

• ESI - Edge Side Includes

• CDN

Think of caching…

Fire

wal

lLoad

Balancer

CDN - Approaches• Approach 1: FTP Ingest assets manually

• I want to upload specific files to an FTP server

• Approach 2: Origin Source assets from my site

• CDN will lazy load the assets from your website as they are requested and host a copy of them

• The CDN doesn’t have the image until someone on the internet requests it

CDN - FTP Ingest• Manual file management via FTP

• Methods for refresh:

• TTL (configurable at the path level)

• Cache busting query string parameter

• Alternate URL

• Forced expiration (manual or API)

• Key Feature: Great for very large assets or documents

CDN - Origin Source

Content Request

CDN Source

CDN - Origin Source• Automatic replication to CDN

• Can use programmatically generated cache busting query string params to get latest content

• /wp-content/uploads/foo.jpg?ts=20140607

• Key Feature: Can be made to work with WordPress’ provided media library with path adjustment

• Also CSS and JavaScript

you can reference that same image at http://cdn.example.com/wp-content/uploads/mickey.jpg

Path adjustment…?

and you have an image at http://example.com/wp-content/uploads/mickey.jpg and your CDN is set to use your site as its source

If your site is http://example.comand your CDN is http://cdn.example.com

Additional Caching• Browser Caching:

• Expires: Date that the content expires and should be refreshed by the browser

• Cache-Control: Maximum age of the content — somewhat redundant with the Expires tag

• Last-Modified: date that the content was last modified

• Warning: If set too high, browser caching will cause stale content to appear on your sites and you will not have a server side “trigger” to clear the cached content.

• WordPress Plugins

Part 3

Architecture Caching

Optimizing Testing

Optimizing

Tools Techniques Concepts

Optimizing

Tools Techniques Concepts

Browser Tools YSlow Page Speed Firebug

External Tools webpagetest.org Xenu / Integrity

www.webpagetest.org/result/131002_Y3_11B1/1/details/

Waterfall View

Optimizing

Tools Techniques Concepts

JavaScript JSLint Minify “Smash”

CSS Minify “Smash” SASS & LESS

Images Optimize for web Standard Formats: png, gif, jpeg, etc Vector based: svg

Optimizing

Tools Techniques Concepts

Images CSS Sprites Progressive vs baseline JPEGs Progressive “enhances”

Icon Font Library Common re-usable icons Scalable Screen reader compatible FontAwesome

Optimizing - Sprites• Reduces number of requests

• Group similar “size” images

• Items that change very infrequently

• Applications:

• Borders, Gradients, Flourishes, etc.

• Common items across multiple pages

• NOT recommended for contextual images

• Usability issue (“alt” tag)

Part 4

Architecture Caching

Optimizing Testing

Load Testing

• Never on production

• Never before notifying everyone

• Always for sites that will have potential high load or DDoS target

Never

Never

Performance Testing

• WebPageTest.org

• Automated testing tools

• Behavior Driven Development frameworks

• Browser automation tools

Behavior Driven Development

• Takes Test Driven Development one step further to include Business Analysis.

• Automatic performance test can be executed periodically and tracked

• Trends and outliers will help identify changes the impact performance

• Can be integrated into build process

• Encourages simpler, cleaner code via TDD engineering process

• Example: Jasmine Behavior Driven Development Framework

Jasmine BDD Frameworkdescribe("A spec", function() { it("is just a function, so it can contain any code", function() { var foo = 0; foo += 1;

expect(foo).toEqual(1); });

it("can have more than one expectation", function() { var foo = 0; foo += 1;

expect(foo).toEqual(1); expect(true).toEqual(true); });});

A specis just a function, so it can contain any codecan have more than one expectation

Browser Automation

• Time can be tracked for test runtime

• Initial QA can be performed before any manual testing

• Example: Selenium

Focus Areas

Architecture Caching

Optimizing Testing

Questions?

@JohnGiaconia Senior Manager, Technology The Walt Disney Company

Thank you!

@JohnGiaconia Senior Manager, Technology The Walt Disney Company