28
Optimizing For Performance Make Your WordPress Blog Faster Chris Olbekson http://C3mdigital.com http://Twitter.com/chris_olbekson http://wordpress.org/support/profile/c3mdigital

Optimizing WordPress for Performance - WordCamp Houston

Embed Size (px)

DESCRIPTION

Speeding up websites is important- Not just to site owners but to all Internet users. In this session, we’ll look at some techniques you can use to speed up your WordPress site including optimizing theme files and database queries, caching and some tips on improving server performance. Note: This talk will be geared towards users who have a basic understanding of theme template files and experience with web development tools, such as Firebug.

Citation preview

Page 1: Optimizing WordPress for Performance - WordCamp Houston

Optimizing For PerformanceMake Your WordPress Blog Faster

Chris Olbeksonhttp://C3mdigital.com

http://Twitter.com/chris_olbekson

http://wordpress.org/support/profile/c3mdigital

Page 2: Optimizing WordPress for Performance - WordCamp Houston

Why Performance Matters?

• User Experience

• Search Engine Rankings

• Server Resources / Costs

• Digg Slashdot Effect

• Clients / Users Will Love You

Page 3: Optimizing WordPress for Performance - WordCamp Houston

1 Front End Performance

2Server Optimization

Caching WordPress

3

Page 4: Optimizing WordPress for Performance - WordCamp Houston

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

Page 5: Optimizing WordPress for Performance - WordCamp Houston

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

Page 6: Optimizing WordPress for Performance - WordCamp Houston

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

Page 7: Optimizing WordPress for Performance - WordCamp Houston

Front End Performance

1. Make Fewer File Requests

CSS Sprites

Lets Start Optimizing

http://wordcamp-houston.pastebin.com/Lcu93yjj

Page 8: Optimizing WordPress for Performance - WordCamp Houston

Front End Performance

1. Make Fewer File Requests

CSS Sprites

Lets Start Optimizing

http://wordcamp-houston.pastebin.com/VLAYsFGv

Page 9: Optimizing WordPress for Performance - WordCamp Houston

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/

Page 10: Optimizing WordPress for Performance - WordCamp Houston

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

Page 11: Optimizing WordPress for Performance - WordCamp Houston

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

Page 12: Optimizing WordPress for Performance - WordCamp Houston

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

Page 13: Optimizing WordPress for Performance - WordCamp Houston

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

Page 14: Optimizing WordPress for Performance - WordCamp Houston

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

Page 15: Optimizing WordPress for Performance - WordCamp Houston

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

Page 16: Optimizing WordPress for Performance - WordCamp Houston

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

Page 17: Optimizing WordPress for Performance - WordCamp Houston

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)

Page 18: Optimizing WordPress for Performance - WordCamp Houston

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

Page 19: Optimizing WordPress for Performance - WordCamp Houston

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

Page 20: Optimizing WordPress for Performance - WordCamp Houston

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

Page 21: Optimizing WordPress for Performance - WordCamp Houston

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

Page 22: Optimizing WordPress for Performance - WordCamp Houston

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

Page 23: Optimizing WordPress for Performance - WordCamp Houston

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

Page 24: Optimizing WordPress for Performance - WordCamp Houston

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

Page 25: Optimizing WordPress for Performance - WordCamp Houston

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)

Page 26: Optimizing WordPress for Performance - WordCamp Houston

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!

Page 27: Optimizing WordPress for Performance - WordCamp Houston

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.

Page 28: Optimizing WordPress for Performance - WordCamp Houston

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