12 Tips to Improve the Performance of Your WordPress Website

12 Tips to Improve the Performance of Your WordPress Website Robin Waite http://www.hostpipe.co.uk http://twitter.com/hostpipe

http://www.hostpipe.co.uk/

http://twitter.com/hostpipe

12 Tips to Improve the Performance of Your WordPress Website

1

CONTENTS______________________________________________________________________ 1

1. ENABLE GZIP ENCODING _______________________________________________________ 2

HOW TO TEST FOR GZIP ENCODING: ___________________________________________________ 2

SOLUTION 1: ____________________________________________________________________ 2

SOLUTION 2: ____________________________________________________________________ 3

2. LEVERAGE BROWSER CACHING _________________________________________________ 4

SOLUTION: _____________________________________________________________________ 4

3. ENABLE KEEP-ALIVE ___________________________________________________________ 6

SOLUTION: _____________________________________________________________________ 6

4. SPECIFY A VARY:ACCEPT-ENCODING HEADER ____________________________________ 7

SOLUTION: _____________________________________________________________________ 7

5. DEFER PARSING OF JAVASCRIPT ________________________________________________ 8

SOLUTION: _____________________________________________________________________ 8

6. ADD EXPIRES HEADERS ________________________________________________________ 9

SOLUTION: _____________________________________________________________________ 9

7. CONFIGURE ENTITY TAGS (ETAGS) _____________________________________________ 11

SOLUTION: ____________________________________________________________________ 11

8. USE A CONTENT DELIVERY NETWORK (CDN) _____________________________________ 12

SOLUTION: ____________________________________________________________________ 12

9. MINIFY AND COMBINE CSS AND JAVASCRIPT ____________________________________ 13

10. OPTIMISE IMAGES FOR THE WEB ______________________________________________ 14

11. EMPTY YOUR TRASH _________________________________________________________ 15

12. MONITOR YOUR PLUGINS _____________________________________________________ 16

BONUS TIP. TURN OFF PINGBACKS AND TRACKBACKS _____________________________ 18

ABOUT THE AUTHOR _____________________________________________________________ 19

OUR VISION: ___________________________________________________________________ 19

OUR GUARANTEE: _______________________________________________________________ 19

DISCLAIMER: ___________________________________________________________________ 20


2

GZip Encoding is a method of compressing a websites overall size so that it is

smaller and downloads quicker. GZIP compression is widely supported and

reduces the load time of a web page.

Go to http://nibbler.silktide.com/ and enter your website URL. Under the “Server

Behaviour” heading

The most typical web server settings for Wordpress websites is for your web

server to be running Apache. You can test which web server software your

website is hosted on by going to the following URL:

http://browserspy.dk/webserver.php.

Find and modify your .htaccess file – this might be in the root directory of your

website. For those that are not tech savvy, modifying the .htaccess file might

seem a little daunting. In reality, it is quite simple.

#Gzip

<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml

text/css application/x-javascript application/javascript text/javascript

</ifmodule>

#End Gzip

This code can most likely be placed anywhere in the .htaccess file. I like to put it

below the Rewrite conditions and above the Expires for organizational purposes.

Note that the If statements are really only needed if you are unsure that your

host has it enabled or not.

[Source - http://salscode.com/tutorials/2009/10/15/gzip-htaccess/]

http://nibbler.silktide.com/

http://browserspy.dk/webserver.php

http://salscode.com/tutorials/2009/10/15/gzip-htaccess/


3

Gzip can be enabled via the WordPress options page. You can find this page at

www.yourwebsite.com/wp-admin/options.php. To enable Gzip, simply change

the value of the Gzip field from 0 to 1.


4

Browser caching enables your main static files (images, CSS, PDF’s, JS, etc.) to be

cached in order to produce faster loading times in the future. This reduces the

load times of pages by storing commonly used files from your website on your

visitor’s web browser.

The benefits of leveraging browser caching are: to reduce page load times for

repeat visitors and it’s particularly effective on websites where users regularly re-

visit the same areas of the website.

Find and modify your .htaccess file – this might be in the root directory of your

website. For those that are not tech savvy, modifying the .htaccess file might

seem a little daunting. In reality, it is quite simple. For this tutorial, if you can cut

and paste correctly, you should be worry-free.

Or you can access your .htaccess file through cPanel by clicking on the File

Manager. When the popup box appears, click on the Web Root option and make

sure that the “Show hidden files” option is checked. Open up your .htaccess file and

paste in the following directives at the top of the file:


5

## EXPIRES CACHING ##

<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 application/x-shockwave-flash "access 1 month"

ExpiresByType image/x-icon "access 1 year"

ExpiresDefault "access 2 days"

</IfModule>

## EXPIRES CACHING ##

Now save your .htaccess file and view your site through the eyes of PageSpeed

and YSlow! – you are now leveraging browser caching for your site!

Source - http://thomasgriffinmedia.com/blog/2010/11/how-to-leverage-browser-caching-in-wordpress-via-

htaccess/

http://thomasgriffinmedia.com/blog/2010/11/how-to-leverage-browser-caching-in-wordpress-via-htaccess/

http://thomasgriffinmedia.com/blog/2010/11/how-to-leverage-browser-caching-in-wordpress-via-htaccess/


6

Enabling HTTP Keep-Alive or HTTP persistent connections allow the same TCP

connection to send and receive multiple HTTP requests, thus reducing the

latency for subsequent requests.

This can be simply turned on in your Apache server configuration or by adding

the following lines into your .htaccess file:

<ifModule mod_headers.c>

Header set Connection keep-alive

</ifModule>


7

Bugs in some public proxies may lead to compressed versions of your resources

being served to users that don't support compression. Specifying the Vary:

Accept-Encoding header instructs the proxy to store both a compressed and

uncompressed version of the resource.

Specify Vary:Accept-Encoding by adding the following lines into your .htaccess

file:

<IfModule mod_headers.c> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule>


8

In order to load a page, the browser must parse the contents of all <script>tags,

which adds additional time to the page load. By minimizing the amount of

JavaScript needed to render the page, and deferring parsing of unneeded

JavaScript until it needs to be executed, you can reduce the initial load time of

your page.

Deferring loading of JavaScript functions that are not called at startup reduces

the initial download size, allowing other resources to be downloaded in parallel,

and speeding up execution and rendering time.

Add the following code just before the end body tag:

<script defer="defer" type="text/javascript"> window.onload=function(){ var mycode; mycode=document.createElement("script"); mycode.type="text/javascript"; mycode.src="http://www.example.com/path/yourjavascriptfile.js"; document.getElementsByTagName("head")[0].appendChild(mycode); } </script>

Or refer to the following website where a number of solutions are

recommended for Wordpress:

http://wordpress.org/support/topic/plugin-w3-total-cache-defer-javascript-parsing

Alternatively you can add in the attribute within your script tags for external

script inclusion:

<script defer="defer">

http://wordpress.org/support/topic/plugin-w3-total-cache-defer-javascript-parsing


9

Expires headers let the browser know whether to serve a cached version of the

page.

When you visit a website your browser is responsible for communicating with

the webserver to download all the required files. It then compiles those files to

display the web page. As web pages become richer in graphics and content,

more and more files are being transferred between your machine and the web

server.

Expires Headers are rather simple in how they work. They tell the browser how

long to store a file in the cache so subsequent page views and visits they don't

have to download the file again. You are right to assume Expires Headers don't

improve page speed for a first time visit as this visitor would have to download

all the files for the first time. Using Expires Headers helps increase load times for

returning visitors.

If your server is Apache, use the ExpiresDefault directive to set an expiration

date relative to the current date. This example of the ExpiresDefault directive

sets the Expires date 10 years out from the time of the request.

In Apache, mod_expires is a module that allows you to set a given period of time

to live for web pages and other objects served from web pages. The idea is to

inform web browsers how often they should reload objects from the server. This

will save you bandwidth and server load, because clients who follow the header

will reload objects less frequently.


10

The expires module is not compiled by default and must be enabled in the

Apachehttpd.conf file. Make sure the following is present and uncommented

(remove preceding the #):

LoadModule expires_module modules/mod_expires.so

To set an expires header, simply add the following to the <virtualHost> section

of your Apache vhost configuration:

ExpiresActive On

ExpiresByType image/gif "access plus 1 months"

ExpiresByType image/jpg "access plus 1 months"

ExpiresByType image/jpeg "access plus 1 months"

ExpiresByType image/png "access plus 1 months"

ExpiresByType image/vnd.microsoft.icon "access plus 1 months"

ExpiresByType image/x-icon "access plus 1 months"

ExpiresByType image/ico "access plus 1 months"

ExpiresByType application/javascript "now plus 1 months"

ExpiresByType application/x-javascript "now plus 1 months"

ExpiresByType text/javascript "now plus 1 months"

ExpiresByType text/css "now plus 1 months"

ExpiresDefault "access plus 1 days"

Alternatively you can add it to your htaccess file in an <ifModule mod_expires.c>

</ifModule> block.

Source - http://www.simonwhatley.co.uk/how-to-set-an-expires-header-in-apache

http://www.simonwhatley.co.uk/how-to-set-an-expires-header-in-apache


11

Entity tags (ETags) are a mechanism web servers and browsers use to determine

whether a component in the browser's cache matches one on the origin server.

Since ETags are typically constructed using attributes that make them unique to

a specific server hosting a site, the tags will not match when a browser gets the

original component from one server and later tries to validate that component

on a different server.

The ETag format for Apache 1.3 and 2.x is inode-size-timestamp. Although a

given file may reside in the same directory across multiple servers, and have the

same file size, permissions, timestamp, etc., its inode is different from one

server to the next.

In Apache, this is done by simply adding the following line to your Apache

configuration file:

FileETag none


12

A content delivery network or content distribution network (CDN) is a large

distributed system of servers deployed in multiple data centres across

the Internet. The goal of a CDN is to serve content to end-users with high

availability and high performance.

CDNs serve a large fraction of the Internet content today, including web objects

(text, graphics and scripts), downloadable objects (media files, software, and

documents), applications (e-commerce, portals), live streaming media, on-

demand streaming media, and social networks.

Source - http://en.wikipedia.org/wiki/Content_delivery_network

Some large Internet companies own their own CDN, but it's cost-effective to use

a CDN service provider, such as CloudFlare, Akamai Technologies, Mirror Image

Internet, or Limelight Networks.

For start-up companies and private web sites, the cost of a CDN service can be

prohibitive, but as your target audience grows larger and becomes more global,

a CDN is necessary to achieve fast response times.

However, CloudFlare does offer a FREE plan. They also have some great

documentation on how to configure your domain name to work with CloudFlare.

http://en.wikipedia.org/wiki/Server_(computing)

http://en.wikipedia.org/wiki/Data_centers

http://en.wikipedia.org/wiki/Internet

http://en.wikipedia.org/wiki/Live_streaming

http://en.wikipedia.org/wiki/Content_delivery_network

http://www.cloudflare.com/

http://www.akamai.com/

http://www.mirror-image.com/

http://www.mirror-image.com/

http://www.limelightnetworks.com/


13

Each call to your CSS and Javascript files is an HTTP request. This means that

when someone visits your web page, their computer sends a request for a file

and then the server sends it back. The more requests there are to your server,

the longer it will take for your pages to load.

The PHP5 application Minify combines multiple CSS and Javascript files into a

single file. This greatly reduces the number of HTTP requests. The application

also removes unnecessary whitespace and comments.

There are a number of WordPress plugins available that will minify your CSS and

Javascript files. I recommend using either WP Minify or Better WordPress Minify.

http://wordpress.org/plugins/wp-minify/

http://wordpress.org/plugins/bwp-minify/


14

Images can help break up long pieces of text and can help your articles be

shared more frequently on social media services; however they also take up a lot

of storage. Therefore, pages that contain many images can take a long time to

load.

It is therefore in your best interests to optimise your images for the internet

before you upload them to your website. Most photo editing applications, such

as Photoshop, allow you to do this via the “Save for Web” option.

A good plugin to optimize images that have already been uploaded is WP

Smush.it. It uses the Smush.it API to optimize JPEG images, strip meta data from

JPEGs and convert GIF images to PNG. You should however be aware that the

plugin uses up a lot of resources when it is converting images, therefore your

website may be slow whilst it is running.

If you do not want to sacrifice image quality, check out Lazy Load. The plugin

ensures that images are only loaded when the area becomes visible to the user.

This will greatly reduce page loading times.

http://wordpress.org/plugins/wp-smushit/

http://wordpress.org/plugins/wp-smushit/

http://wordpress.org/plugins/lazy-load/


15

WordPress 2.9 introduced the WordPress trash system. Whenever content is

deleted, be it a comment, post, page, media etc; it is sent to trash. From here,

the content can either be restored or deleted permanently. It is effectively a fail-

safe system that helps you recover anything that was deleted accidentally (in

much the same way the recycling bin works in your computer).

Trash can take up a lot of unnecessary room in your website’s database. The

bigger the database, the longer it is to retrieve information from it.

By default, WordPress will automatically delete trash after thirty days. This can

be reduced by modifying the wp-config.php file. For example, you could reduce

this to seven days by adding the following:

define ('EMPTY_TRASH_DAYS', 7);

You can completely disable the trash system by adding this to your wp-

config.php file.

define ('EMPTY_TRASH_DAYS', 0);

[source - http://www.elegantthemes.com/blog/tips-tricks/optimize-your-wordpress-website]

http://www.elegantthemes.com/blog/tips-tricks/optimize-your-wordpress-website


16

Before you install any plugin on your website, ask yourself “Is this plugin

necessary?”

Plugins are one of the biggest causes of WordPress websites being slow. The

more plugins you install without research, the more likely you will face

performance issues; however the sheer number of plugins you have

installed is not the reason a WordPress website can slow down.

Certain plugins are known for causing websites to be slow. There are many

reasons for this including bad coding, calls to external servers and persistent

calls and updating of your WordPress database. Pay close attention to how

much CPU plugins use too. Many plugins can bottleneck your CPU due to

persistent processes. If this happens, your whole server could go down.

One plugin I highly recommend you use is P3 Profiler. Developed by GoDaddy,

the plugin will show you exactly how much load time your plugins are adding. A

http://wordpress.org/plugins/p3-profiler/


17

breakdown is given which displays exactly how much load each plugin adds. It is

the most effective way of seeing what plugins are slowing down your website.

[source - http://www.elegantthemes.com/blog/tips-tricks/optimize-your-wordpress-website]

http://www.elegantthemes.com/blog/tips-tricks/optimize-your-wordpress-website


18

By default, WordPress interacts with other blogs that are equipped with

pingbacks and trackbacks.

Every time another blog mentions you, it notifies your site, which in turn updates

data on the post. Turning this off will not destroy the backlinks to your site, just

the setting that generates a lot of work for your site.


19

Robin Waite is a Co-Founder of Hostpipe. We are an Online Strategy Agency who

specialise in building fantastic responsive websites for Start-ups, Small

Businesses and Not-for-Profit Organisation. We have helped over 200 business

with their online presence over the last 10 years. We believe in building highly

optimised websites for our customers which are designed to help their

organisations grow through increased online sales or enquiries.

We are experts in web standards ensuring that every website we build is:

Responsive

Web Standards Compliant

Accessible

Cross Browser Compatible

Cross Device Compatible

“To Make Websites Work for Anyone”

We achieve this by putting our own customers’ customers first so that

whomever and wherever they may be and whatever device and technology they

are using; they will have a pleasant browsing experience.

The one thing that we can guarantee that your current website is

underperforming.

We offer a range of Website Review products where we can create a

personalised report on how you can improve the performance of your existing

website. Your website may look great on the outside, however many website


20

owners are unaware that it is the engine behind the scenes which actually

determines how Search Engines and Web Browsers treat your website and

determine its quality.

By the way, we don’t actually work with WordPress. However, the processes

of testing and optimising a website are the same regardless of the framework

and technology the website is based upon.

Call Hostpipe on 01453 884100 for a quick chat about your website, email

[email protected] or visit www.hostpipe.co.uk for more information

mailto:[email protected]

http://www.hostpipe.co.uk/