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/
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
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?
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
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
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
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)
28. Load Testing
• Never on production
• Never before notifying everyone
• Always for sites that will have potential high load or
DDoS target
Never
Never
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
