Optimizing For Performance
       Make Your WordPress Blog Faster




Chris Olbekson
http://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

2   Caching WordPress

3   Server Optimization
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 Grading
         YSlow from Yahoo
         Use a CDN
         Make fewer HTTP requests
         Add Expires headers
         Compress components with gzip
         Put CSS at top
         Put Javascript at bottom
         Avoid CSS expressions
         Make JavaScript and CSS external
         Reduce DNS lookups
         Minify JavaScript and CSS
         Avoid URL redirects
         Configure Etags
         Make Ajax cacheable
         Reduce cookie size
         Use cookie-free domains
         Do not scale images
Performance Grading
           Google Page Speed
           Parallelize Downloads Across
           Hostnames
           Specify image dimensions
           Leverage browser caching
           Minify HTML
           Minify JavaScript
           Optimize Images
           Serve Static Content from a
           cookieless domain
           Specify a Vary Accecpt-
           Encoding header
           Specify a cache validator
           Remove unused CSS
           Use efficient CSS selectors
Front End Performance
             Lets Start Optimizing
1. Make Fewer File Requests
       CSS Sprites




 http://wordcamp-houston.pastebin.com/Lcu93yjj
Front End Performance
             Lets Start Optimizing
1. Make Fewer File Requests
       CSS Sprites




 http://wordcamp-houston.pastebin.com/VLAYsFGv
Front End Performance
              Lets Start Optimizing
1. Make Fewer File Requests
       CSS Sprites

  http://spriteme.org/
  SpriteMe does all the work for you
  And renders the changes live in the
  Browser to verify it worked
Front End Performance
             Lets Start Optimizing
1. Make Fewer File Requests
       CSS Sprites
       Combine and Minify External JavaScript and CSS

           W3 Total Cache Does This For You
Front End Performance
             Lets Start Optimizing
1. Make Fewer File Requests
       CSS Sprites
       Combine and Minify External JavaScript and CSS
       Death by Share This Social Media buttons
Front End Performance
             Lets Start Optimizing
      CSS Sprites
      Combine and Minify External JavaScript and CSS
      Death by Share This Social Media Buttons
      Improving Social Media Button Performance

  Embed social media buttons in <iframe>’s to promote progressive
  rendering




http://wordcamp-houston.pastebin.com/YsEfB4hZ
Front End Performance
                Lets Start Optimizing
  Concurrent Downloads

CSS at the Top and Js at the Bottom
= “The Waterfall Effect”
JavaScript in <head> causes the white
Page effect



  Tip: Use Google CDN for jQuery




http://wordcamp-houston.pastebin.com/hWegNNeV
Front End Performance
         Lets Start Optimizing
 Leverage Browser Caching with Expires Headers and
 Public/Proxy Cache Control Headers
 Enable gzip Compression for Reduced File Sizes




                                 =
http://wordcamp-houston.pastebin.com/9C8nQNTT
Caching WordPress
             Lets Optimize Some More

Caching increases performance 10x to 1000x
Types 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
Caching WordPress
              Lets Optimize Some More
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
Caching WordPress
          Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster


       Best Performance when running PHP as DSO(mod_php)
       Does not work as well when running mod_fcgid (cPanel)
       Better with mod_fastcgi
       Does not work with suPHP
Caching WordPress
          Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster
        A.P.C.
                                 Caches PHP
                                 in-memory key/value store
                                 Stable
                                 Relatively Easy to Install
                                 Easy to Configure
                                 Supports WordPress built in Object Caching API
                                 Use with Plugins
                                       W3-Total Cache >> Fastest
                                       Mark Jaquith’s APC Object-Cache Backend
                                     Plugin

                              Does not work with Zend Optimizer
Caching WordPress
            Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster
         A.P.C. – Compile from Source




http://wordcamp-houston.pastebin.com/XTE9Dti5
Caching WordPress
          Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster
        eAccelerator
                                Caches PHP
                                in-memory key/value store
                                Stable >>Most Stable
                                Easy to Install
                                Easy to Configure
                                Supports 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
          Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster
        X-Cache
                                Caches PHP
                                in-memory key/value store
                                Not as Stable
                                Easy to Install
                                Easy to Configure
                                Supports WordPress built in Object Caching API
                                Harder to Configure
Caching WordPress
          Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster
        Memcached + Memcached Server
                               Persist across multiple servers
                               Cache stored in memory
                               Harder to configure
                               Supports WordPress built in Transient API
                               Used across WordPress.com server infrastructure
                               Isn’t effected by web server restarts
                               Works together with Batcache and WordPress
                              Object Cache
Caching WordPress
             Lets Optimize Some More
Static Page Caching + Opcode Caching >> Much Faster
          Memcached + WordPress Transient API
    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
               Lets Optimize Some More
   Static Page Caching + Opcode Caching >> Much Faster
             Memcached + WordPress Transient API

                                    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 Stack                             LEMP Stack
Traditional Server environment          Alternate Server environment
Linux –Apache-MySQL-PHP                 Linux-NGINX-MySQL-PHP

                    Choose Your Flavor of Linux
                   Arch 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.0
                   Gentoo 2008.0 (i386 and x86_64)
Server Optimization
LAMP Stack
Linux –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 Stack
                     Insanely 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

       # ab –n 1000 –c 100 http://mywpsite.com/

       1000 Requests carried out 100 at a time

       Result:
       1712.33 Requests completed per second

        The Server:
        XEN VPS w/ Debian Lenny 1000M Ram

        WordPress Environment:
        W3-Total Cache using Memcached Object
        Cache and enhanced disk page cache

Optimizing WordPress for Performance - WordCamp Houston

  • 1.
    Optimizing For Performance Make Your WordPress Blog Faster Chris Olbekson http://C3mdigital.com http://Twitter.com/chris_olbekson http://wordpress.org/support/profile/c3mdigital
  • 2.
    Why Performance Matters? •User Experience • Search Engine Rankings • Server Resources / Costs • Digg Slashdot Effect • Clients / Users Will Love You
  • 3.
    1 Front End Performance 2 Caching WordPress 3 Server Optimization
  • 4.
    Front End Performance BasicConcepts 1. Make Fewer File Requests 2. Progressive Rendering 3. Concurrent Downloads 4. Expires Headers / Browser Caching 5. Reduce File Size With gzip Encoding
  • 5.
    Performance Grading YSlow from Yahoo Use a CDN Make fewer HTTP requests Add Expires headers Compress components with gzip Put CSS at top Put Javascript at bottom Avoid CSS expressions Make JavaScript and CSS external Reduce DNS lookups Minify JavaScript and CSS Avoid URL redirects Configure Etags Make Ajax cacheable Reduce cookie size Use cookie-free domains Do not scale images
  • 6.
    Performance Grading Google Page Speed Parallelize Downloads Across Hostnames Specify image dimensions Leverage browser caching Minify HTML Minify JavaScript Optimize Images Serve Static Content from a cookieless domain Specify a Vary Accecpt- Encoding header Specify a cache validator Remove unused CSS Use efficient CSS selectors
  • 7.
    Front End Performance Lets Start Optimizing 1. Make Fewer File Requests CSS Sprites http://wordcamp-houston.pastebin.com/Lcu93yjj
  • 8.
    Front End Performance Lets Start Optimizing 1. Make Fewer File Requests CSS Sprites http://wordcamp-houston.pastebin.com/VLAYsFGv
  • 9.
    Front End Performance Lets Start Optimizing 1. Make Fewer File Requests CSS Sprites http://spriteme.org/ SpriteMe does all the work for you And renders the changes live in the Browser to verify it worked
  • 10.
    Front End Performance Lets Start Optimizing 1. Make Fewer File Requests CSS Sprites Combine and Minify External JavaScript and CSS W3 Total Cache Does This For You
  • 11.
    Front End Performance Lets Start Optimizing 1. Make Fewer File Requests CSS Sprites Combine and Minify External JavaScript and CSS Death by Share This Social Media buttons
  • 12.
    Front End Performance Lets Start Optimizing CSS Sprites Combine and Minify External JavaScript and CSS Death by Share This Social Media Buttons Improving Social Media Button Performance Embed social media buttons in <iframe>’s to promote progressive rendering http://wordcamp-houston.pastebin.com/YsEfB4hZ
  • 13.
    Front End Performance Lets Start Optimizing Concurrent Downloads CSS at the Top and Js at the Bottom = “The Waterfall Effect” JavaScript in <head> causes the white Page effect Tip: Use Google CDN for jQuery http://wordcamp-houston.pastebin.com/hWegNNeV
  • 14.
    Front End Performance Lets Start Optimizing Leverage Browser Caching with Expires Headers and Public/Proxy Cache Control Headers Enable gzip Compression for Reduced File Sizes = http://wordcamp-houston.pastebin.com/9C8nQNTT
  • 15.
    Caching WordPress Lets Optimize Some More Caching increases performance 10x to 1000x Types 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
  • 16.
    Caching WordPress Lets Optimize Some More 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
  • 17.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster Best Performance when running PHP as DSO(mod_php) Does not work as well when running mod_fcgid (cPanel) Better with mod_fastcgi Does not work with suPHP
  • 18.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster A.P.C. Caches PHP in-memory key/value store Stable Relatively Easy to Install Easy to Configure Supports WordPress built in Object Caching API Use with Plugins W3-Total Cache >> Fastest Mark Jaquith’s APC Object-Cache Backend Plugin Does not work with Zend Optimizer
  • 19.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster A.P.C. – Compile from Source http://wordcamp-houston.pastebin.com/XTE9Dti5
  • 20.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster eAccelerator Caches PHP in-memory key/value store Stable >>Most Stable Easy to Install Easy to Configure Supports 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
  • 21.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster X-Cache Caches PHP in-memory key/value store Not as Stable Easy to Install Easy to Configure Supports WordPress built in Object Caching API Harder to Configure
  • 22.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster Memcached + Memcached Server Persist across multiple servers Cache stored in memory Harder to configure Supports WordPress built in Transient API Used across WordPress.com server infrastructure Isn’t effected by web server restarts Works together with Batcache and WordPress Object Cache
  • 23.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster Memcached + WordPress Transient API 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
  • 24.
    Caching WordPress Lets Optimize Some More Static Page Caching + Opcode Caching >> Much Faster Memcached + WordPress Transient API 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
  • 25.
    Server Optimization LAMPStack LEMP Stack Traditional Server environment Alternate Server environment Linux –Apache-MySQL-PHP Linux-NGINX-MySQL-PHP Choose Your Flavor of Linux Arch 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.0 Gentoo 2008.0 (i386 and x86_64)
  • 26.
    Server Optimization LAMP Stack Linux–Apache-MySQL-PHP Apache Web Server •Why are there so many directives? •Why are dynamic vhosts so darned hard? •Hackers Love it!
  • 27.
    Server Optimization LEMP LEAP Stack Insanely 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.
  • 28.
    Server Optimization LEAP Stack Benchmark Results # ab –n 1000 –c 100 http://mywpsite.com/ 1000 Requests carried out 100 at a time Result: 1712.33 Requests completed per second The Server: XEN VPS w/ Debian Lenny 1000M Ram WordPress Environment: W3-Total Cache using Memcached Object Cache and enhanced disk page cache