Optimising WordPress and the server

At kc web design kent we’ve become obsessed with getting WordPress to work at peak performance over the last few months so we thought it would be good to document some of things we’ve been doing to increase WordPress performance and reduce loading times. Not all of these things work on all servers and you may get different millage out of some but they’re all worth a try and a look at the principles behind them. First off, lets look at the server…

Server optimisation

The first thing to look at is the server and with htaccess files enabled there are a few tricks that we can use to speed things up. A great place to look at advanced htaccess rules is the brilliant HTML5 Boilerplate but it can get quite complex. To start with lets just tackle the major ones.

GZIP and Deflate

Compression is very important and can speed up your WordPress site a considerable amount. Check if either of these modules are installed for Apache or just add the code for both into your htaccess file. Here’s an example for deflate. Please note the mod_filter wrapper around this code, if you don’t have the filter module enable in Apache then this won’t work so check its installed or in later versions of Apache just remove these wrapper tags.

 

<IfModule mod_deflate.c>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/x-javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/x-web-app-manifest+json \
application/x-httpd-php \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/javascript \
text/plain \
text/x-component \
text/xml
</IfModule>
</IfModule> 

EXPIRES CACHING

Setting the cache expiry means the server won’t be dishing out new files with every page request which will speed things up for the user. Make sure to set the limits at a realistic level and if you site is always changing then set them shorter. If it never changes then set them longer!

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

Set keep-alive’s

When you run Googles Pagespeed tests – which you really should be doing – it sometimes alerts you to keep alives. This is to do with the server keep connections open while serving all the files and not closing the connection after each file is served. If you’re serving lots of small files then closing and opening new connections each time can slow things down. To keep connections open you can add this to the htaccess file.

<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule

Memory limits

WordPress can be power hungry at times. We’ve had instances at kc web design kent where a new VPS with only 256 memory was struggling with a basic WordPress site. If you can, go for more memory on your server and then change the default memory allocation for WordPress by adding this in the htaccess file.

php_value memory_limit 128M php_value upload_max_filesize 20M php_value post_max_size 20M

There are many, many more things you can do with a htaccess file but these will make a big difference on the speed and performance of you WordPress site and should be done on all installations.

WordPress optimisations

When using WordPress it’s important to know what it’s limits are and how it works on a server. We’ve already mentioned that it can be quite power hungry so just throwing any old template on it for a professional website isn’t always the best idea.

When creating your won WordPress web design theme for a client try and limit the amount of database calls you use to pull out paths to CSS and JS files and reduce the amount of queries. When using a bought theme check its not one that gives you endless options for this frontage or 3 different shop systems or endless page layouts as these will significantly increase the amount of data pulls on the site even if you’re not using half of what available in the theme. You can trim things down by removing php paths and hard coding things.

Another area to be watchful of is plugins. They can add lots of files and weight to a page that you just don’t know about. If you can do it yourself with code you know in the theme files then thats the way I would go first. If you do need a plugin then try a few out, read reviews and forums and test on a dev platform first before using on a live site.

Be careful of render blocking elements. Google Pagespeed loves this one and its always cropping up, especially on WordPress sites. Render blocking elements are CSS or mainly JS code in the head of a page that prevents the rest of the page loading and working before these files have loaded themselves. Jquery is the main culprit and some WordPress plugins like to stick a lot of code in the head so watch out for those. These days its good practice to put all JS in the footer to avoid this problem. If you have to put scripts in the head you can add this little bit of PHP code just before you body tag to help ease the problem…

<?php flush(); // http://developer.yahoo.com/performance/rules.html#flush ?>

And lastly, minify all HTML/CSS/JS and use a caching plugin such as WP Super Cache to speed up serving pages to users. After you change any of these points above check on Google Pagespeed for improvements and keep optimising until you get a good score.

Oh, and one more thing, you could also use a CDN service like Cloudflare to server all you static files. We used it on kc web design kent as a test and saw some big improvements.

Subscription based websites with Expression Engine

Expression Engine is our CMS of choice at kc web design kent and we use it on a lot of larger projects. It has great flexibility, if built on a robust framework and the community of users and add-ons is very good. It is one of the best web design CMS frameworks around and a joy to use.

At kc web design kent we recently built a web app based on Expression Engine and needed to create a subscription based service that would allow users to purchase subscription plans and then give them access to certain areas of the web app based on what plan they’d bought. We also need a good user interface for managing subscription packages that would be easy for the client to use and easy for us to setup and manage. After looking around we came across an add-on for Expression Engine called Membrr. Membrr did all the things we need and had a good payment system built in. The company that make Membrr also make a service called Open Gateway (which comes bundled with Membrr) that allows full integration of recurring subscription payment and automated payments through a whole host of payment gateways.

Membrr was very easy to setup and get started with and the examples on the site are very good. It takes a little while to get into using the hooks correctly to display things in your own templates but as always the community support is great and if you know Expression Engine syntax and template tags then it won’t take long to pick things up. The Expression Engine admin interface is very good and makes managing subscriptions and members very easy. There is a separate login for Open Gateway and you need to set up a few cron jobs on your server (so best to be using this on a good server and not a low-end shared host) to deal with the recurring payments but once done things should run smoothly.

All in all Membrr seems to be a very good system and is working well for us at kc web design kent on this particular project. If you have a web app or website design project that needs a good CMS then talk to kc web design kent about Expression Engine.