Having great content and a beautifully designed site doesn’t always cut the mustard.
A birthday gift idea comes to mind… I find my cold MacBook on the table, open it and login. My browser starts, Wifi connects and go to Google and make a quick search eager to find a shop where I can make a purchase.
Google displays my search result instantly and my eyes dart around looking for keywords and titles that match my gift. Not the first, not the second or third… fourth link down…
Click the headline on the search result and wait… nothing happens…
The browser goes white like snow …I wait
Some text blinks on the screen and disappears …I exhale and wait. Then a banner flashes into life and the text reappears…I wait more wondering if it would be quicker to eat soup with chopsticks.
Then a logo fades in… some colour appears and finally the border of the product image.
Disappointed with the site speed I hit the back button while the page is still trying to load, knowing I will increase their bounce rate.
11 seconds and 3 breaths of oxygen of my life wasted waiting for a webpage to load…
Did the site have what I wanted? Don’t know and don’t care, I could not face the pain of waiting for the site to load again. In total 11 seconds from doing the search and returning back to Google.
You only have seconds to grab a users attention. Don’t waste valuable milliseconds on big images or silly plugins trying to load on your webpage.
A little warning before we start…
This article contains a complete breakdown to optimizing your site for speed. Some of the steps are a little more technical, so please be advised we do consider this an intermediate to advanced level training.
How To Speed Up WordPress
Speeding up your website is a sure way to impress first-time visitors.
Google even included page speed as an indicator in search engine ranking and overall it produces a better user experience.
Your visitors and customers will be happier using a site that loads faster and studies have shown visitors stay longer on websites that load quicker.
A recent post on Google+ revealed a possible new label Google are testing to show users slow pages in search results.
We’re going to show you ways to get your site loading faster so you are not labelled slow if they do roll out this feature.
We’ll be looking at a number of different ways you can speed up your website using some plugins and making some tweak here and there.
Check Your Host
One of the first things you should do is check with your web host to find out if they use any particular plugins to help speed up WordPress. You might be advised to use a plugin like W3 Total Cache, don’t just use what you think is best.
A prime example of this is my recent host was running websites on clustered cloud networks and they recommended using WP Super Cache. I was using the W3 Total Cache, enabling leverage browser caching, database caching and my WordPress speed wasn’t improving much.
I contacted my host and discovered it was not something I could control with W3 Total Cache. So they recommended WP Super Cache, and I had to request they make changes directly on the server like browser caching, optimising the database, increase memory, enabling keep alive and other technical things you are about to learn.
So before you start trying speed up your WordPress site ask your host or check their support articles.
Scan Your Site
To get a report on your current site we’re going to run a test using GTmetrix.
It’s free tool to detect what is slowing down a particular page. You can do this for any page on your website, there also a GTmetrix plugin available to get reports inside your WordPress dashboard.
Google has their own version called page speed that you can use directly inside chrome. You can open up Chrome, right click the page, choose Inspect Element and run PageSpeed there.
or you can visit the online version at PageSpeed Insights.
After you scan your site you will be shown report with similar details to GTmetrix.
Do it now! Go run a report on your site and then follow some of the tips below to speed up your site.
1. Enable Caching
The two daddy’s on the block are W3 Total Cache and WP Super Cache. When using caching plugins you should always make a point to check your site after you configure any settings.
The best way to do this is open another browser. If using Chrome open and test your site in Firefox to see if your site is looking like it should.
To explain caching a little better here’s what happens. Each time a user visits a page on your WordPress website a request is made to the database to retrieve the data and generate the webpage.
Enabling caching can create static versions of pages that don’t change often. This means that the webpage is already generated and can be loaded in flash.
Imagine a site receives a thousand visits in ten seconds. Without caching that would be one thousand requests to the database to generate the same webpage over and over again and crash the server! Website down!
Now imaging the webpage is already generated and waiting to be loaded. You could throw a ton of traffic at the static file and it would load instantly. To go another step further you could use a Content Delivery Network (CDN) to delivery the webpage to the user from the nearest server, now we’re getting technical but don’t worry we cover this later.
To speed up WordPress and OptimizePress some caching plugins allow you to reduce files size. This means you can remove all the spacing in the html code to reduce the file size by a small amount. Look at the image below to see spacing in the code that could be removed.
The same applies to CSS files. This is called minifying code but we recommend you don’t use the Minify CSS option in your caching plugins. There are other settings to compensate this and keep your site loading fast.
Think of it like this – You own a shop and your penny sweets were at the back of the store. The kids keep going all the way to the back of the store to retrieve a penny sweet and come to the front and pay for it.
To improve your speed of service you move your penny sweets to the front of the store, and the kids can literally pick them off the shelf pay for them and leave.
W3 Total Cache
The W3 Total Cache plugin can seem very overwhelming at first but there are some basic options you can configure and get good results.
You can enable settings like leverage browser caching, page caching, database caching, object caching and lots more. Here’s are some of the features:
- Page cache
- Minify (Disable with OptimizePress)
- Database cache (minify if using CDN)
- Object Caching (Disable with OptimizePress)
- Browser Cache
- CDN (Content Delivery Network)
- Expire Headers
The default settings work pretty well but you can start customising each individual area to suit your host or website.
Do NOT use Minify CSS or Object Caching with OptimizePress
WP Super Cache
The second caching plug is similar and much easier to use as it doesn’t have lots of options to configure.
It works in the same way where it has page caching functions, and different features where you can set the timer of headers to expire, pre-load content, configure plugins, enable CDN and more. Here’s are some of the features:
- Page caching (Compress pages)
- Static pages
- Expire Headers
- Lock Down (Used for traffic spikes to pause caching refresh)
To use WP Super Cache enable it under the Easy tab then go to the Advanced settings and select the ‘recommended‘ options.
Click update when you have selected the settings above.
Next click the Update Mod_Rewrite Rules button.
Next change the timeout to 3600 – that’s one hour before old pages get deleted.
Click Change Expiration
That’s WP Super Cache ready to go!
GZip is a compression technique used at server level. Take advantage of this compression technique if you server has caching enabled. It can also be controlled using W3 Total Cache plugin or manually by editing the .htaccess file.
Contact your host and ask if they support Gzip compression or test your site using checkgzipcompression.com.
3. Leverage Browser Caching
If you don’t use W3 Total Cache and use WP Super Cache, you can manually configure browser caching by adding the following code to your .htaccess file via ftp. If you find this complicated ask your host for help.
This code caches the users browser so it loads instantly and doesn’t need to download from the server again.
4. Image Compression
Update: Smushit.com has been discontinued by Yahoo. The plugin, WP Smush.it, has been taken over by WPMU Dev and called WP Smush.
These is also another online tool that does image compression in the same way call www.imgopt.com (not tested by us yet).
A very easy way to speed up WordPress is to optimize your images for web viewing. A great online tool to compress images is Smush.it where you upload your images and Smush.it reduces the file size.
Smush.it also have a WordPress plugin that works the same.
Update: WP Smush.it is now called WP Smush.
Once you upload an image file into your media library, Smush.it automatically takes that file and compresses it reducing the file size so it loads quicker for the user. The image below shows the Smush.it column in the image library.
Smush.it doesn’t reduce the image quality, it’s removing elements in the image the eye can’t even see so the file size is reduced and image quality maintained.
What I like about GTmetrix is they also provide you with a compressed version of an image that is slowly down your webpage. This saves you the headache of studying how to compress layered images.
Simply click to see the compressed version and download it.
Google does the same when using Page Speed inside Chrome.
Two image quality tips:
- JPEG – Smaller file, will load quicker.
- PNG – Higher quality great for images that have text.
5. Resize Images
Before you upload an image to your website you should resize it and serve it as a scaled images.
If the content area is smaller than the size of the image this simple adjustment will improve the page loading speed.
On the OptimzePress blog the content area is 630px wide and images will be squashed into this space if they were larger. We reduce the image ration to match the width 630px.
NEVER increase image in size, always scale the image down.
If you use images that are larger than the content area of the webpage, most websites will automatically scale the image down using HTML or CSS.
Example: If the image is 3000px wide and resized using CSS the full image still has to be loaded causing the page to load slowly. Simply resize the image or link to the larger version.
To resize your images you could use a program like IrfanView for the PC.
You could also use the default preview editor inside Mac OS.
both are perfect for quickly resizing and cropping images before you upload them.
6. Remove Plugins.
This might sound obvious but I see a lot of sites that use unnecessary plugins. Go through your plugin library site and see what plugins you are actually using. In most cases many of plugins installed on your site will load on all of the pages on your site.
Do you really need a plugin that gives you quote marks from Winston Churchill, even though some of them are great!
A good speech should be like a woman's skirt; long enough to cover the subject and short enough to create interest.
Winston S Churchill
Is that a necessity that you actually need to have on your website? Go through your plugins. Get rid of some of the old plugins that are loading on your pages.
If the script does NOT contain document.write it’s ok to move to the bottom of your page.
Making changes like this can help shave off some milliseconds in the loading time.
8. CDN Content Delivery Network
This is where things can get a little fun! I like to use the term “location-based delivery” when explaining what a CDN is.
Both W3 Super Cache and W3 Total Cache have the option to include a CDN url to allow you to speed up WordPress.
There are lots of CDN companies online who will charge for storing and delivering your file but here are two that I’ve worked with and use.
CloudFlare is a content delivery network. There is a free plan that includes lots of features like, security scanning, rocket loader and best of all free SSL certificates perfect if you were using Stripe with OptimizePress.
Create a free account and point your domain name to Cloudflare’s name servers. The first time you add you site in Cloudflare it will scan your domain and pick up any existing DNS records and create them in the domain dashboard.
When you point your domain over to Cloudflare any DNS settings you had previously created will remain functioning as they should.
Cloudflare now becomes your DNS manager where you setup additional MX records and CNAMEs if needed.
Once your domain is running through CloudFlare they start caching your files and distributed them across their entire network throughout the world.
When people start visiting your site in different locations, for example in America the UK or Australia, CloudFlare will deliver the cached pages from the nearest server and the result is a faster loading webpage for the user!
You might find that CloudFlare conflicts with other caching plugins because CloudFlare is effectively doing all of the caching for you, so test and disable them.
I also found that testing CloudFlare’s option to minify CSS didn’t actually break OptimizePress like mentioned above. It worked well for my testing however it could have been related to my server settings. I wasn’t using a shared hosting solution but a dedicated server so your results may not be the same.
If you do use CloudFlare be sure to bookmark the Cloudflare network status site www.cloudflarestatus.com. I noticed some strange 504 errors on one of my sites and eventually moved it off Cloudflare.
Onder, another one of our super tech support ninjas created an article about securing your OptimizePress site with Cloudflare, well worth a read if you use or plan to use Cloudflare.
Another content delivery network is Cloudfront on Amazon S3 service. It’s free to set up an S3 account and you pay for what you use.
Once you have set up your AWS account you can create your new CloudFront following the steps below.
Navigate to the AWS Console and click Cloudfront.
Click Create Distribution.
Select your delivery method as Web and click Get Started.
Add the Origin Domain – when you click the next field the Origin ID is auto completed.
Click Create Distribution.
You will now see a In Progress and your Cloudfront is being built.
Once it’s Deployed click on the blue Cloudfront ID numbers.
You will see your new Cloudfront URL.
Now that URL looks a bit ugly so we can create what’s called a CNAME and looks much nicer.
Click Edit at the top left enter your Alternate Domain Name. (It could be cdn, cloud, images or anything you want).
Click Save and you will see your new CNAME added inside Cloudfront.
Next we have to copy our ugly Cloudfront URL (the one that include numbers and digits before .cloudfront.net).
Go to our domain name registra or your host and create a new CNAME Zone Record.
Paste in the Cloudfront URL. See my example inside GoDaddy. Click finish and wait a few hours for it setup. To test it works you simply type you new CNAME address into a browser and it should load on your site when it’s ready.
Once the CNAME has resolved on the Cloudfront URL we open up WP Super Cache, go to the CDN tab and check the box Enable CDN Support.
Type in our new CNAME into Off-site URL field and save changes.
W3 Total Cache has a very similar setup in the CDN options.
You are done! You have just created your own CDN running off Amazon’s servers.
Now what happens when your someone visits your site, Amazon’s servers pulls the files into their global CloudFront network and deliver the files to the user based on their geographical location to the nearest Amazon server.
Very much the same way as CloudFlare but using Amazon’s CloudFront network.
There are lots of comparisons between website speeds on Cloudfront and Cloudflare. While Cloudfront maybe a little more technical to setup I’ve not had any caching issues.
That’s it! Location based delivery – Basically load the website from the nearest computer!
9. Page Revisions
A recent update to WordPress was page revisions. This allows the site owner to view different page revisions sometimes stored over months. Every time you edit a page or post and save it, the revision is stored.
What WordPress it’s doing is storing this data inside the database. This can reduce the database performance by using up rows inside the database tables to be retrieve again. You want your database to be running at it’s optimal speed so making minor changes can help towards the overall speed of WordPress.
As you guessed by now there’s a plugin to fix this. It’s called “limit number of post page revisions”. If you try this plugin, like any other plugin, take a backup of your site first!
You can manually control page revisions by adding the following line of code into your .htaccess file. Change the number 3 to the number of revision you want saved. See the example below.
The code is:
define( 'WP_POST_REVISIONS', 3 );
In my testing the above code only worked for newly created pages and posts. The plugin mentioned above may remove all revision history so be warned if you try it and backup your site first.
Another option is to disable post revisions completely but we wouldn’t recommend that as you wouldn’t be able to see your LiveEditor revision history.
10. Remove Query Strings
“?=storeID&id=product9928” is the parameter in the URL below.
A page speed scoring system will actually give you a negative score when you have those query strings in the URLs and it’s easy to fix using the Remove Query Strings plugin.
I wouldn’t know how much Query String actually slow down webpages but I do know a URL with a ‘?’ can NOT be cached.
If a page can’t be cached it will load slower than page that can! On another note they make your URLs look ugly.
11. Keep Alive
Keep alive is a feature that keeps 1 or more HTTP requests open on your site. Some of the shared hosting companies provide this feature but it all depends on your host so check first.
You can do it manually by going into the .htaccess file and adding the following code:
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Rather than having multiple different CSS files scattered around your webpage try and merge them all together into one file or make them inline. If you have a simple page with some added CSS, keep the CSS in the page rather than linking to another CSS file.
13. 404 Errors
Fixing any 404 errors is another way to speed up WordPress. Every time a 404 page is loaded a new request is made to the server.
The missing files that generate the 404 errors increase resource allocation for the server and slow down your sites overall speed. They also kill the user experiences so get those fixed.
There’s a useful plugin called Redirection that will detect any 404’s and allow you to create a 301 redirect to the correct missing file location.
If you have Google Webmaster Tools setup you can also see any 404 not found errors as Google will flag them.
Expand Crawl in the left menu and click the Not Found tab,
You’ll see a list of any 404 pages, click on a page to view the link and see what other pages are linking to it. Once you correct the link click the mark as fixed button.
14. Page Size
Generally most pages on the web average around 1 megabytes in size and this size is increasing as webpage become more complex.
The sizes of your page can differ depending on the niche and content. If you have an image rich page, like a food blog, it will be larger than a text based page.
You may not think page size is important but if you consider mobile devices on 3G and 4G connections don’t cache webpages like desktop browsers do.
This chart below from Web performance Today shows how webpage size has reached 1MB for mobile devices.
If you compression and resize images correctly you can dramatically reduce the size of your page.
15. Optimizing Your Database
This is something worth looking at if all the above options haven’t made improvements to speed up WordPress, which I’m sure they will. The reason I left this until last is because it’s quite technical if you do it manually and can cause major problems on your if done wrong.
First ask your host if they can help and take a backup of your site before you or anyone attempts to configure the database.
There are many plugins to clean up your database but I haven’t used any and I see this as a last resort for gaining a quicker site.
If you do everything else above you can easily speed up WordPress and increase the page load time enormously. If you do the follow the methods above and you still have a slow site you might want to find a better host.
A cheap host, is not always a good host. Shop around, setup a test site and compare performance. If you enjoy speeding up your WordPress site and like all the technical aspects I recently found Feed The Bot, it’s an amazing resource explaining everything you need to know about this subject.
Now go and scan your site and let us know the results.
We hope you have learned something from this article and keep in mind it’s about the “user experience” not just having a pretty site with lots of pictures.