enterprise wordpress - performance, scalability and redundancy
TRANSCRIPT
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