Slides on how to build your WordPress site so that it performs like an enterprise application. Associated video: http://wordpress.tv/2014/06/25/john-giaconia-enterprise-wordpress-performance-scalability-and-redundancy/

1. Enterprise WordPress
Performance, Scalability & Redundancy
@JohnGiaconia
Senior Manager, Technology
The Walt Disney Company

2. Focus Areas
Architecture Caching
Optimizing Testing

3. Part 1
Architecture Caching
Optimizing Testing

4. 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

5. 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

6. Firewall
CDN
Load
Balancer

7. 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.

8. 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?

9. Part 2
Architecture Caching
Optimizing Testing

10. Types of Caching
Object
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

11. Think of caching…

12. Firewall
Load
Balancer

13. 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

14. 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

15. CDN - Origin Source
Content Request
CDN Source

16. 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

17. 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.com
and your CDN is http://cdn.example.com

18. 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

19. Part 3
Architecture Caching
Optimizing Testing

20. Optimizing
Tools Techniques Concepts

21. Optimizing
Tools Techniques Concepts
Browser Tools
YSlow
Page Speed
Firebug
External Tools
webpagetest.org
Xenu / Integrity

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

23. Waterfall View

24. 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

25. 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

26. 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)

27. Part 4
Architecture Caching
Optimizing Testing

28. Load Testing
• Never on production
• Never before notifying everyone
• Always for sites that will have potential high load or
DDoS target
Never
Never

29. Performance Testing
• WebPageTest.org
• Automated testing tools
• Behavior Driven Development frameworks
• Browser automation tools

30. 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

31. Jasmine BDD Framework
describe("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 spec
is just a function, so it can contain any code
can have more than one expectation

32. Browser Automation
• Time can be tracked for test runtime
• Initial QA can be performed before any manual
testing
• Example: Selenium

33. Focus Areas
Architecture Caching
Optimizing Testing

34. Questions?
@JohnGiaconia
Senior Manager, Technology
The Walt Disney Company

35. Thank you!
@JohnGiaconia
Senior Manager, Technology
The Walt Disney Company