Optimizing For Performance Make Your WordPress Blog Faster Chris Olbekson http://C3mdigital.com http://Twitter.com/chris_olbekson http://wordpress.org/support/profile/c3mdigital
May 17, 2015
Optimizing For PerformanceMake Your WordPress Blog Faster
Chris Olbeksonhttp://C3mdigital.com
http://Twitter.com/chris_olbekson
http://wordpress.org/support/profile/c3mdigital
Why Performance Matters?
• User Experience
• Search Engine Rankings
• Server Resources / Costs
• Digg Slashdot Effect
• Clients / Users Will Love You
1 Front End Performance
2Server Optimization
Caching WordPress
3
Front End Performance
Basic Concepts
1. Make Fewer File Requests
2. Progressive Rendering
3. Concurrent Downloads
4. Expires Headers / Browser Caching
5. Reduce File Size With gzip Encoding
Performance GradingYSlow from YahooUse a CDNMake fewer HTTP requestsAdd Expires headersCompress components with gzipPut CSS at topPut Javascript at bottomAvoid CSS expressionsMake JavaScript and CSS externalReduce DNS lookupsMinify JavaScript and CSSAvoid URL redirectsConfigure EtagsMake Ajax cacheableReduce cookie sizeUse cookie-free domainsDo not scale images
Parallelize Downloads Across HostnamesSpecify image dimensionsLeverage browser cachingMinify HTMLMinify JavaScriptOptimize ImagesServe Static Content from a cookieless domainSpecify a Vary Accecpt-Encoding headerSpecify a cache validatorRemove unused CSSUse efficient CSS selectors
Performance GradingGoogle Page Speed
Front End Performance
1. Make Fewer File Requests
CSS Sprites
Lets Start Optimizing
http://wordcamp-houston.pastebin.com/Lcu93yjj
Front End Performance
1. Make Fewer File Requests
CSS Sprites
Lets Start Optimizing
http://wordcamp-houston.pastebin.com/VLAYsFGv
Front End Performance
1. Make Fewer File Requests
CSS Sprites
Lets Start Optimizing
SpriteMe does all the work for youAnd renders the changes live in the Browser to verify it worked
http://spriteme.org/
Front End Performance
1. Make Fewer File RequestsCSS SpritesCombine and Minify External JavaScript and CSS
Lets Start Optimizing
W3 Total Cache Does This For You
Front End Performance
1. Make Fewer File Requests
CSS Sprites
Combine and Minify External JavaScript and CSS
Death by Share This Social Media buttons
Lets Start Optimizing
Front End Performance
CSS Sprites
Combine and Minify External JavaScript and CSS
Death by Share This Social Media Buttons
Improving Social Media Button Performance
Lets Start Optimizing
Embed social media buttons in <iframe>’s to promote progressive rendering
http://wordcamp-houston.pastebin.com/YsEfB4hZ
Front End Performance
Concurrent Downloads
Lets Start Optimizing
CSS at the Top and Js at the Bottom= “The Waterfall Effect”
JavaScript in <head> causes the whitePage effect
Tip: Use Google CDN for jQuery
http://wordcamp-houston.pastebin.com/hWegNNeV
Front End Performance
Leverage Browser Caching with Expires Headers and Public/Proxy Cache Control Headers
Enable gzip Compression for Reduced File Sizes
Lets Start Optimizing
=
http://wordcamp-houston.pastebin.com/9C8nQNTT
Caching WordPress
Caching increases performance 10x to 1000xTypes of Caching:
Static Page Caching
Opcode(PHP) & Object Caching with:
A.P.C., eAccelerator, X-Cache
Memcached Server with PECL Memcache Extension
WordPress Transient API
Lets Optimize Some More
Caching WordPress
Static Page Caching >> Fast
Stores a WordPress page as static HTML
Cache can be rebuilt via page loads ->> Good
Cache can be rebuilt via WordPress cron job >> Much Better
Always server non logged in users a static version of the page
Lets Optimize Some More
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
Does not work as well when running mod_fcgid (cPanel)
Better with mod_fastcgi
Lets Optimize Some More
Does not work with suPHP
Best Performance when running PHP as DSO(mod_php)
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
A.P.C.
Lets Optimize Some More
Caches PHP in-memory key/value storeStableRelatively Easy to InstallEasy to ConfigureSupports WordPress built in Object Caching APIUse with Plugins
W3-Total Cache >> FastestMark Jaquith’s APC Object-Cache Backend
Plugin
Does not work with Zend Optimizer
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
A.P.C. – Compile from Source
Lets Optimize Some More
http://wordcamp-houston.pastebin.com/XTE9Dti5
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
eAccelerator
Lets Optimize Some More
Caches PHP in-memory key/value storeStable >>Most StableEasy to InstallEasy to ConfigureSupports WordPress built in Object Caching API
Stopped Supporting Object Cache after version.9.5.3 current version=0.9.6.1
Can be used as a Zend extesion
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
X-Cache
Lets Optimize Some More
Caches PHP in-memory key/value storeNot as Stable Easy to InstallEasy to ConfigureSupports WordPress built in Object Caching APIHarder to Configure
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
Memcached + Memcached Server
Lets Optimize Some More
Persist across multiple servers Cache stored in memory Harder to configureSupports WordPress built in Transient APIUsed across WordPress.com server infrastructureIsn’t effected by web server restarts Works together with Batcache and WordPress
Object Cache
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
Memcached + WordPress Transient API
Lets Optimize Some More
Transients are small fragments of data that you expect to expire that WordPress stores as cache in MySQL
If Memcached is installed WordPress will store the cache in memory
Caching WordPress
Static Page Caching + Opcode Caching >> Much Faster
Memcached + WordPress Transient API
Lets Optimize Some More
Get Twitter status updates and store them as a Transient. You choose when they expire. If Transient is expired automatically returns false.
http://wordcamp-houston.pastebin.com/ndWRB0WB
Server Optimization
LAMP StackTraditional Server environment
Linux –Apache-MySQL-PHP
LEMP StackAlternate Server environment
Linux-NGINX-MySQL-PHP
Choose Your Flavor of LinuxArch Linux 2010.05 (i386 and x86_64)CentOS 5.5 (i386 and x86_64)Debian 5.0 (i386 and x86_64)Fedora 13 (i386 and x86_64)Slackware 13.1 (i386 and x86_64)Ubuntu 10.04 LTS (i386 and x86_64)OpenSUSE 11.0Gentoo 2008.0 (i386 and x86_64)
Server Optimization
LAMP StackLinux –Apache-MySQL-PHP
Apache Web Server
•Why are there so many directives?
•Why are dynamic vhosts so darned hard?
•Hackers Love it!
Server Optimization
LEMP LEAP StackInsanely Fast WordPress
Linux-NGINX (Reverse Proxy)-Apache-PHP
Nginx is a lightweight, high-performance Web server/reverse proxy that does one thing really well and that is to serve content at insanely fast speeds.
Nginx listens for http connections on port:80 and serves static content directly while passing off the PHP to the Apache backend. Apache vhost must be changed to listen on alternate port.
Server Optimization
LEAP Stack Benchmark Results
1000 Requests carried out 100 at a time
# ab –n 1000 –c 100 http://mywpsite.com/
Result:1712.33 Requests completed per second
The Server:XEN VPS w/ Debian Lenny 1000M Ram
WordPress Environment:W3-Total Cache using Memcached ObjectCache and enhanced disk page cache