How to Super Charge WordPress for Speed & Fast Page Load

So let’s start with the real issue.  Why is wordpress sometimes slow and often sluggish compared to a standard html website?  This is a complex answer,  but in layman’s terms, there are more resources and more requests required to fetch information from the server to load a wordpress page compared to a standard html web page.  A wordpress site also stores information in a database,  so there is an increased time required to lookup and call up page content from database storage. WordPress themes and plugins are also being built with more features including jquery and ajax components becoming more prevalent, which can be resource hungry.

You have two options, to rebuild your website with a custom wordpress theme and producing a lighter weight theme or compensate for a slower theme by optimising and configuring the theme.

 

 

Why a Slow website is Bad for Business?

1. Your customers lose trust and interest in your product or services, becomes frustrated and will leave your site, relegating themselves to obscurity…

2. Google now uses website page load time in it’s ranking algorithms and in its pay-per-click adwords algorithm.

3. Can tarnish your brand

 

If you want to know how you can speed up your site, scroll down …

One of the main problems is is the way the internet browser is limited to pulling information from the server. It can only handle 2 parallel requests, so has to keep requesting information repeatedly until it has procerssed and  loaded all the page content. Lets not get in too deep and look instead at actually how the speed of your wordpress can be greatly improved.

So what qualifies as a slow website in terms of load time.  In my experience of analysing visitor data over the years, anything over 2 seconds is really too long.  Visitors expect better!

 

The Main factors that can effect website speed:

1.  Your internet connection (I can’t do anything about this)

2. Your web hosting and server resources (We recommend WPENGINE – Get 20% OFF HERE for fast hosting)

3.  The wordpress theme

4. Executing PHP script

5. The number of plugins and poorly written wordpress plugins

6. The size of the images (eg. slider images)

7. The number of external uses of javascript.

8.  The number and size of CSS files

9. The number of DNS lookups

 

Take the following steps to improve your page load times and performance;

1.  Run a website speed testing tool.

There are a number available including tools.pingdom.com, chrome yslow extension or Gmetrix.  

I prefer Pingdom’s Website Speed Test.  It breaks down the page elements in a clear and concise way displayed in a waterfall, showing the files by size, and load times.  The load time is broken down into seconds broken down into  DNS, CONNECT, SEND WAIT and RECEIVE times.

Sort by ‘load time’ and see which files or scripts are taking a long time to load.  Immediately in this example you can see that there are a lot of separate .js (javascript) and jquery files.  These files and functionality are inherent within the theme or plugins.  There are javascript files associated with various sliders (revolution slider, flexi slider, carousel sliders). On closer inspection of the wordpress files and coding, it reveals that the theme has also been built with a 3rd party ‘Swift Page Builder’.  These are sometimes laden with scripts and additional coding.  Obviously changing the wordpress theme to a lighter framework at this stage is not a solution, so we must improve the existing configuration and tune the wordpress environment to its optimum.

 

 

2.  Identify the Plugins that are slowing you down

Lets kick off with the quick wins – those slow plugins.   Simply run the p3 profiler plugin and it will highlight the plugins which are causing slow performance.

A common cause are the  social-sharing plugins, most of which bloat page-loading times and can easily be replaced by embedding social buttons into the theme’s source code.  Once you know which plugins are slowing down your website, you can make a decision on whether to keep them, replace them with an alternative or remove them altogether.

 

 3.   Combine external JavaScript files

This should be a simple exercise,  merging java script files, but this can cause issues later on if upgrading your theme or plugins.  During an upgrade your themes javascript files will be overwritten and you would need to merge them again.

I came across one wordpress site that had over 33 javascript files.  This is too many. 10 is ok.

 

4. Enable GZip to Compress Files

When installed, Gzip automatically compresses your website’s files, saving bandwidth and speeding up page-loading times. When a user visits your website, their browser will automatically unzip the files.  The improvement from enabling Gzip can make a significant difference.   You can either add a Gzip wordpress plugin, but I would recommend enabling it manually by doing the following;

a. First check if Gzip is enabled, by visiting  www.checkgzipcompression.com.  Enter your URL and the answer will be revealed.

b.  Add the following lines to your htaccess to enable Gzip-compression.

For Apache servers:

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

If you are using the W3 cache plugin, then Gzip can be enabled in the browser cache settings.  By default it is enabled, so all you have to do is install and enable the W3 cache plugin.

 

5. Choose a good web hosting provider

So is a shared web hosting platform ok?  Do you need a dedicated server or cloud? On the whole now.  Wordpress sites that are very slow, and  will still be sluggish if you  spend time and money on moving it onto a dedicated server.

I would recommend WpEngine (We recommend WPENGINE – Get 20% OFF HERE for fast hosting)

 

6. Choose a light WordPress theme

This is without doubt the most important decision you will make.  Using a theme with robust and light framework maybe slim on the ‘bells and whistles’, but be careful not too opt for the all singing and dancing theme that can do everything.  It’s better to add your own plugins and edits so you can control the number of features.  A compromise is sometimes required, but if buying a theme from Themeforest, it can all be too late when you find out later it runs like an old dog.  I would recommend the Thesis framework themes which is a trusted wordpress themes used by many.  If you’re a seasoned developer, then creating your site from scratch using  Twenty Ten/Twenty Eleven “framework” (aka the default WP themes) which are fast frameworks to use.

 

7.  Use a Good WordPress Caching Plugin

In my opinion, the best cache plugin is W3 total cache.  It’s straight forward to install and configure, and will be one of the most effective actions in speeding up your wordpress site.

 

8. Utilise a Content Delivery Network (CDN)

A CDN will serve up your static files (CSS, Javascript and images etc)  from different server hosts that are closest to you.  Using different hosts, gets past the limitations of the Internet Browser in downloading multiple files simultaneously from a single server host.  Basically spreading them out amongst different hosts, will improve the load speed.    The MAXCDN product integrates with the w3 cache plugin and together can maximise the speed load time of your wordpress environment.

9.  Optimise Your Images

Ensure your images are optimised for web quality.  If you have a home page slider, ensure that your images are not larger than 100 kb in size. (per image).  Look out for huge background images, portfolio images and lighbox images.  The site should be using CSS sprites for backgrounds.   You can use this free WP-SmushIt plugin which will automatically optimise your images.

 

10. Optimise Your Home Page to Load Fast

So what can you do.

a.  Keep widgets and plugins to a minimum

b. Don’t show too many posts.  Keep them to a minimum

c. Show post excerpts

d. Remove inactive plugins

 

11. Add an expires header to static resources

An Expires header is a way to specify a time far enough in the future so that the clients (browsers) don’t have to re-fetch any static content (such as css file, javascript, images etc).

This  can cut your load time significantly for your regular users.

You will need to add the following code and modify your .htaccess file:

ExpiresActive On

ExpiresByType image/jpg A2592000

ExpiresByType image/jpeg A2592000

ExpiresByType image/gif A2592000

ExpiresByType image/png A2592000

 

 12. Replace PHP with static HTML, when necessary

WordPress often references content using it’s own built in parameters within PHP script.   This generic PHP code can be replaced with some static HTML in order to save CPU processing time and database queries, and under load this can make a big enough difference in performance.   You need to be quite a competent developer to implement this one.  Check these step by step instructions to make this change.  

 

13. Optimise Your WordPress Database 

Try this if you want to squeeze every last ounce of speed from your wordpress site. Not surprisingly, there is a plugin for this called WP-Optimize.  This will optimise your database, remove spam and unapproved comments, clears up trash posts and comments, removers trackbacks and pingbacks.

 

And the smallest things can seem so trivial…

There are  a number of examples of plugins that I can think of that have caused increased page load times.  And surprisingly, sometimes innocuous, but they can add up to a couple of seconds of  ‘wait time’.

Example :  Logo slider plugin

A client was using a simple logo slider plugin, and one of the settings was to disable the next and previous arrows.  The plugin had been designed so that when ‘no arrow’ was selected in the configuration, the css would load an image that didn’t exist. (working as designed, so that no arrow images were displayed)   The solution was to strip out the echo command in the logo-slider.php file, so that the images were not being requested by the server.  To display the arrows obviously didn’t cause increased wait time, as the arrow images actually existed.   Resolving this simple issue resulted in shaving 2.44 seconds from the page load time.

 

The Results after 3 Stages of WordPress Tuning and Optimization

After Stage 1 Optimisation

After Stage 2 Optimisation

 

After Stage 3 Optimisation

 

 

 

FYI:  The speed of our StartaDesign blog has a load of time of 1.17 seconds….  It’s faster than 86% of all websites.  SLAM DUNK!