10 Quick Tips: Optimizing & Speeding Up Your WordPress Site

We recently looked at 11 Quick Tips for Securing Your WordPress Site, which included some easy, but essential tips for the security of your WordPress blog. Today, we'll be looking at how to optimize your site to run as fast as it possibly can. So, without further adieu, here are 10 quick tips for optimizing your WordPress site!

From the coders perspective WordPress is pretty darned fast compared with other platforms... but still we can optimize the WordPress sites using common web optimization practices and using some good WordPress plugins.

Optimization Tip 1: Serve Static Content from a Cookie Free Domain

80-90% of the end-user response time is spent downloading all the components in the page: images, stylesheets, scripts, Flash, etc. As such, serving the static content from the cookie free domain is a good practice for all websites, where even a little extra time to load something can mean long lag times. WordPress happens to have a provision to enable this feature.

You need to set below two constants in your wp-config.php file.

define("WP_CONTENT_URL", "http://static.yourdomain.com");
define("COOKIE_DOMAIN", "www.yourdomain.com");

Please make sure that you have used "bloginfo ('template _directory')" to load your static content in theme files.

After this, Please make sure that you have used "bloginfo('template_directory')" function to load your static content in theme files.

For more information on how to setup the Cookie Free Domain for WordPress, look here.

Optimization Tip 2: Set an Expire Header for the Static Content

Setting the expire header to far future date will instruct your web browser to cache and serve those cached content until that expire date. You can set the expire header using some easy edits to your .htaccess file. I recommended to use the code provided by the HTML 5 Boiler Plate, You can review the same code below:

<IfModule mod_expires.c>
 ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault      "access plus 1 month"

# cache.appcache needs re-requests
# in FF 3.6 (thx Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
 ExpiresByType text/html "access plus 0 seconds"

# Data
 ExpiresByType text/xml "access plus 0 seconds"
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"

# RSS feed
 ExpiresByType application/rss+xml "access plus 1 hour"

# Favicon (cannot be renamed)
 ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"

# HTC files  (css3pie)
 ExpiresByType text/x-component "access plus 1 month"

# Webfonts
 ExpiresByType font/truetype "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff   "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType text/javascript "access plus 1 year"

 <IfModule mod_headers.c>
  Header append Cache-Control "public"
 </IfModule>
</IfModule>

Optimization Tip 3: Declare a Constant for Most Used WordPress Database Values (Updated!)

This can be useful for the theme developer to reduce the number of database query on database. As a being WordPress theme developer we need to use some WordPress function which we need to use most frequently and more than once in a page.

For example, to get the url of the home page we generally use the get_option('home');. This function actually perform the query on database and get the value we want. As we know this will be same for all cases and we might need this value on various places.

So what to do for this situation?

I used to create a new constant variable in wp-config.php like below:

define('MY_HOME','http://www.yourdomain.com');
define('BLOG_NAME','Expert Developer');

After declaring this constant you need to use this constant instead of the get_option('home') or similar function. So this will reduce the number query in the page. You can define constants for template directory too.

Editors Note: This tip has been totally debunked by Stephen Cronin! We'll be updating this in the next day or two with some new information. For the time being, read through Stephen Cronin's awesome follow up article for more notes on why this isn't necessarily the case. Thanks Stephen Cronin for pointing this out!!!

Optimization Tip 4: Optimize Your Database

There are a few plugins available which can take responsibility to optimize and maintain the WordPress database. I'll list just a few below, but if you search the WordPress Plugin Directory, you should be able to find quite a few more:

Keep in mind that lots of the bigger "Optimization/Caching Plugins" that help with caching and other stuff will do their own optimization as well - so if you have a caching plugin, you might already have this covered. Advanced users can also simply use PHPMyAdmin to optimize your WordPress database.

Optimization Tip 5: Caching is the Key to Success

Caching is the most important factor for the optimize the high traffic site. WordPress has various good plugins available which serve this purpose. These plugins will generally create .html files for each post and page, and it will serve these html files instead of making the database queries every time.

We have some good plugins for caching in the WordPress.

Above plugins generate the HTML files for the each posts and pages and serves it, but we have one plugin which cache the database query result.

DB Cache

Optimization Tip 6: Use a CDN for High Traffic Websites

Using a CDN (Content delivery network) is the better option for the high traffic site. CDN is the Content Delivery Network of the optimized servers all over the world. These servers works together to server your content via number of servers.

Most of the CDN's out there right now are paid and can be very costly. We have only one CDN which is free :)

Optimization Tip 7: Compress and Combine JS and CSS Files

Compressing the JS and CSS will give you a good improvement in site loading time. As compressing the JS and CSS files will decrease your overall page size.
Another good points to keep in mind is to combine CSS and JS files. Combining the multiple files into single file will reduce the number of HTTP request to your web server.

JS compressor:

CSS compressor:

Alternatively you can use WordPress wp minify plugin for combining various JS and CSS files into one file.

Optimization Tip 8: Compress Images

Like compressing CSS and JS files its also good to compress the images of your WordPress site. We have plugin which uses the API of the smush.it and provide the compressed images for your WordPress site.

WP Smush IT

Use of CSS Sprite is also beneficial in case of reducing the number of HTTP request.

Optimization Tip 9: Compress Your Static Content with gZip

Compressing the static contents with gZip compression will drastically change your site loading time. Its a good practice for general web development too. Again I will go with the HTML 5 Boiler Plate for this trick.

You just need to place below code in your htaccess file:

	<IfModule mod_deflate.c>
  # force deflate for mangled headers
  # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
  <IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
      SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
      RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
    </IfModule>
  </IfModule>

  # HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
  <IfModule filter_module>
    FilterDeclare   COMPRESS
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
    FilterChain     COMPRESS
    FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
  </IfModule>

  <IfModule !mod_filter.c>
    # Legacy versions of Apache
    AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
    AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
  </IfModule>
  </IfModule>

Optimization Tip 10: Manage eTags

eTags are also used for caching purpose, but if you have set a expire headers for the static contents then its good to disable the eTags functionality. Let's see how to disable the eTag using .htaccess file.

You need to place one line in your .htaccess file to disable the eTag.

	FileETag none

To know more about the eTag, you can visit this link.

Conclusion

There are many more tips and tricks to go with this, but I've tried my best to present the best "bang for your buck" tips for anyone out there just looking to get started with WordPress security. Be sure to check out our other WordPress scaling and cacheing articles for more information! Share your thoughts on this below!

HIGHLIGHTS OF THE DAY