17 Ways to Optimize and Speed Up WordPress Sites

WordPress

WordPress, as a platform, is extremely well coded. However, some people mess their WordPress installations up by installing tons of low-quality plugins, choosing an awful web host, and filling their site with heaps of garbage.

Even if you don’t do something as stupid as these with your site, there’s still a lot of room for improvement when it comes to speeding up your WordPress site. I optimize around 8-10 WordPress sites in an average month, and there are a few things I always consider while optimizing a WordPress site.

Here are a few ways (some well-known, some not) you can improve the performance of your  WordPress sites:

#1: Choose A Good Web Host

You can think of optimizing your WordPress site only after you surely know that it’s not your host that’s slowing down your site. Recently, I’ve been optimizing a site which was hosted on GoDaddy, which is, of course, one of the most horrible hosts out there that puts thousands of sites on a single shared server. As a result, their servers are damn slow. You have to make sure you don’t make these mistakes while choosing a web host that most beginners make.

Like I always recommend, go visit some community like WebHostingTalk that’s filled with Web Hosting enthusiasts. Read some genuine reviews of the host you were planning to go with, before actually going with them. I came to know about MDDHosting, the host that we’re on since 2011, from WebHostingTalk. And I thank myself everyday for doing some actual research instead of going with just another crappy top-10 ‘unlimited everything’ host.

Read my MDDHosting Review to know how a great web host can benefit you and save you hassles in the long run.

If you wish to receive WordPress-specific support from your host, you can try a managed WordPress host. WPEngine is a fast growing reputable host that specialises in WordPress hosting.

#2: Use A Fast Theme/Framework

You need to start with a fast and well-coded WordPress theme or framework. If you choose a theme packed with lots of additional features that you don’t need, it’ll negatively impact your site performance.

How-Fast-is-Fast

Last time I dealt with a heavy theme and framework, I had to put in more than 8 hours to optimize YooTheme’s Subway theme, to make it faster and improve the load time of the site from 5.5 seconds to 1.8 seconds.

Unless you’re a total code-illiterate, don’t choose a theme that allows you to change everything directly from the theme options, making your job easy. Generally, it also makes the job harder for your web server and browser. Too much PHP, JavaScript, Iframe isn’t good for your site’s speed.

The default WordPress themes are incredibly well-coded, light-weight, very fast and easily customizable. If you can handle a little bit of code or hire a developer, choose one of those to build something great on top of them. I tweaked the default WordPress Twenty Thirteen theme for this site and it’s getting the job done very well.

#3: Install A Caching Plugin

The second most effective way (the first being choosing a good web host) to improve your site’s load times is to install a caching plugin. As soon as you install a plugin like W3 Total Cache or WP Super Cache, you’ll be able to tell that your site loads faster.

In simple words, when a caching plugin is active on your site, it servers users cached copies of your pages. It greatly reduces MySQL database access, no. of PHP requests, server access for static resources, and even HTTP requests (in case of combining multiple files into one).

W3 Total Cache

W3 Total Cache is one my most favourite WordPress plugins. It offers a variety of caching features:

  • Page Cache
  • Minify
  • Object Cache
  • Database Cache
  • Browser Cache
  • CDN

Initially, you don’t want everything enabled. You can still safely enable everything except Minify and CDN (unless you want to use a CDN).

Minify breaks some other heavily JS-based plugins unless you specifically tweak it. On the other hand, you should tweak the Browser Cache settings to utilise the full potential of browser caching.

W3-Total-Cache-1

You generally want to enable all those in the ‘Browser Cache’ section for all common file types.

The value of 'expires header lifetime' should be as high as possible. 604800 seconds = 1 week

The value of ‘expires header lifetime’ for different file types should be as high as possible. 604,800 seconds = 1 week

#4: Try A CDN

Offloading the static resources of your site, like images, scripts, css files, can speed up your site. Not only those resources will load faster for visitors, if you use a CDN, your primary server will have less load to handle and thus will deliver significantly better performance while serving the rest of your site.

Generally, those static resources will be served to your visitors by the server closest to them. That will ensure the heavy part of your site loads as fast as possible for your users.

There are quite a few Content Delivery Networks out there. But one that’s really easy to setup on WordPress sites is MaxCDN. I’ve been using MaxCDN since the beginning of this year and it has helped us shed around 1.5 seconds off our load time.

MaxCDN-W3-Total-Cache

 You can also set it up within 5 minutes using a caching plugin like W3 Total Cache, as I described in my MaxCDN Review.

#5: Enable Gzip Compression

You should serve compressed versions of your site to your visitors, as they’ll be less in size and will generally load a lot faster.

Gzip Compression

The best option is to enable Gzip compression straight from cPanel (if your host offers you that) if you’re on a shared server. Otherwise, you can enable Gzip compression using a plugin like W3 Total Cache.

There are also a few tweaks that allow you to enable it from your .htaccess file. You can simply add this code to the beginning of your .htaccess file to enable server-level Gzip compression for a few known file types:

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

#6: Install Well-coded Plugins

There are literally tons of plugins available for WordPress. That doesn’t mean all of them are well-coded. You should always install plugins that are well optimized for the latest version of WordPress which don’t slow your site down.

You should perform some research before installing a below 3-star rated plugin. Often the plugin will turn out to be poorly developed, using inappropriate hooks. It will not only slow down your site, but in a certain cases might also mess up with the functionalities of other plugins and WordPress itself.

well-coded-plugin

Once in a while, monitor your plugins’ performance and impact on your site’s load time by using a plugin like Plugin Performance Profiler. It isn’t 100% accurate but you can observe the trends to know which plugins are really slow and troublesome for your site.

#7: Maintain Your Plugins

Plugin maintenance is very important for WordPress sites. If you don’t keep all your plugins and WordPress itself updated, chances are that your site will get hacked.

It isn’t a rule, but older versions of plugins are generally more vulnerable to attacks. Not only that, newer versions of plugins are in most cases more optimized, faster, and more secure with less or no bugs.

WordPress-Maintenance

You should also disable, and even delete the plugins that you don’t use. More plugins doesn’t necessarily mean a slower site, but lots of low quality plugins together will slow down your site significantly.

#8: Optimize Your Database

optimizing-wordpress-database

You can optimize your WordPress MySQL database directly from PHPMyAdmin, or by using a plugin like WP-Optimize or WP-DBManager.

These plugins are capable of deleting all your pending spam comments, trashed posts, auto-saved drafts, post revisions to name a few. They can also perform general MySQL database optimization queries without you having to access PHPMyAdmin.

A well optimized, fast responding database is a huge bonus for a database-driven software like WordPress.

#9: Optimize Uploaded Images

Images are one of the heavier elements of your site. There are a few ways you can optimize your uploaded images.

First of all, you should specify the maximum image dimensions for thumbnail, medium, and large sized images. That means, if you upload an image 1024px wide, and your content area is only 604px wide, normally the image will be scaled down using CSS. When you specify the maximum width of your ‘large’ images as 604px, it’ll then display the pre-resized, 604px wide image, which will be significantly smaller in size.

how-to-optimize-your-website-images

The second thing you’d want to do is to reduce the sizes of your uploaded images without resizing them, or messing with their quality. Yahoo’s Smush.it is your ally in this case. It is able to losslessly reduce image sizes.

And I quote from the official site: “Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality”.

Fortunately for you, you don’t need to visit the Smush.it website everytime you need to compress a couple of images. There’s a WordPress plugin for that! ;)

The WP Smush.it plugin allows you to upload images normally while it automatically optimizes them using Yahoo’s Smush.it API behind the scenes.

#10: Replace PHP with HTML Wherever Possible in Your Code

Unless you know what you're doing, don't try this on a serious site.

Plain and simple HTML is a lot faster to process for web servers than PHP. If you have a preliminary knowledge about both PHP and HTML, you can replace a few instances of PHP in your site’s code (in themes or plugins) with plain HTML.

I always recommend choosing something (to replace) that doesn’t usually gets changed, such as the URL to your favicon, or your site’s name, or your theme’s stylesheet URL.

For example, in many themes, functions like these are executed for each page load:

 <title><?php bloginfo('name'); ?><?php bloginfo('description');?></title>
<link rel="shorcut icon" type="image/x-ico" href="<?php bloginfo('template_url'); ?>/favicon.jpg" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>"/>
<link rel="stylesheet" type="text/css" media="print" href="<?php bloginfo('template_url'); ?>/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<?php bloginfo('rss_url'); ?>" />

And when you replace the bold PHP functions with simple HTML, it looks like this:

<title>TechTage - Covering SEO, Web Hosting, Hardware and more...</title>
<link rel="shorcut icon" type="image/x-ico" href="http://techtage.com/wp-content/themes/techtage/favicon.jpg" />
<link rel="stylesheet" type="text/css" media="screen" href="http://techtage.com/wp-content/themes/techtage/style.css"/>
<link rel="stylesheet" type="text/css" media="print" href="http://techtage.com/wp-content/themes/techtage/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://techtage.com/feed/rss/" />

Plain HTML is around 20-times faster than PHP. A simple way to replace such PHP executions with HTML is to open your site (the page you want to hard-code HTML for) in a normal browser and right-click and click on ‘view source’. You can simply copy the entire HTML of a portion of your site’s code and replace the PHP in your theme with that. Use your judgement to determine which PHP commands are responsible for which HTML output.

#11: Delete Old Post Revisions

Do you really need 10s of revisions of your old posts that have already been published a long time ago? You probably don’t.

The Revision Control plugin allows you to remove old post revisions from your WordPress database, making it considerably smaller, and your site slightly faster.

#12: Reduce Spam - Start Using Akismet

Spam comments take up significant space in your database. You should setup the pre-installed Akismet plugin properly to catch those comments and prevent them from going live on your site, and additionally to discourage spammers from posting them in your site in the first place.

Akismet

Setting up Akismet is pretty simple, in reality. All you need to do is to register for an Akismet API key on the Akismet website using your WordPress.com account.

The next thing you’d want to do with Akismet is checking the box in Akismet settings that says “Auto-delete spam submitted on posts more than a month old”.

Of course, you can manually empty the spam queue anytime from the ‘comments -> spam’ section.

#13: Turn-off Trackbacks & Pingbacks

Trackbacks and Pingbacks aren’t good for your site speed. Whenever someone links to you, a trackback gets created, utilizing server and database resources.

So, unless absolutely necessary (I have no idea why they’d be), you can simply disable trackbacks and pingbacks from WordPress’ Discussion Settings.

wordpress-trackbacks

#14: Use CSS Sprites

Theme images and miscellaneous other small (both in size and dimensions) images should be combined into as few images as possible, using CSS sprites. For example, there are six small images that get loaded on RohitPalit.com in the footer, three main images, and three low-opacity variants that are seen when you place your mouse cursor over the original images or click them. This how the sprites.png of the site looks like:

sprites

There’s a lot of (intentionally reserved) blank space on the bottom of the image, but nevertheless, that’s what a CSS sprite image looks like.

The browser gets unique portions of it as individual images using CSS positioning, and loads them on the page in the desired position.

This single image saves me 5 HTTP requests. So creating CSS sprites is worth it. You can even use a drag and drop online tool like SpritePad.

#15: Use A Responsive Design

You can use a responsive theme to load less resources (for example, images) for mobile devices or specify high-resolution images for high-resolution screens. That way, mobile users won’t see heavy images, and desktop users won’t see small, highly-compressed images.

You can specify what to load for what type of users, based on their screen width. There are lots of other important advantages of using a responsive design.

Responsive Design

And responsive sites are preferred by Google, so you can expect a slight boost in SEO once you switch to a responsive design.

Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.

#16: CSS in Head, JS in Body

CSS should be loaded in the <head> section as per HTML recommendations. Referencing stylesheets outside of the <head> section will prevent the browser from displaying content as soon as it is loaded.

JavaScript blocks progressive loading as well. When a browser encounters a <script> tag, it tries to interpret the code before loading the rest of the page. This is however not the case with asynchronous scripts, like the usual Google Analytics tracking script, so you don’t need to worry about those scripts. So, you should place most javascripts in the bottom of your code, before the ending </body> tag, instead of the <head> section.

While your page remains as heavy as it originally was, tweaking these little things will make your site seem to load (appear) faster.

#17: Optimize Your Widgets

It’s important that you optimize your widgets to make them as light and easy-to-load as possible. For example, widgets of social networks like Facebook, Twitter and Google+ load external javascripts and often css while being rendered.

If the scripts or css aren’t likely to be updated often, you can upload them directly to your server and serve them from your own server (or your CDN). Not having to rely on external servers, you can improve your site speed by optimizing your widgets.

Conclusion

Slow load times don’t only create a bad impression about your site to your visitors, it’s also bad for your SEO.

You can monitor the current load times of your site by performing Pingdom’s Site Speed Test. A load time of under 3 seconds is decent, under 2 seconds is impressive, and even less is blazing fast!

pingdom-full-page-test

You can also find useful information about your site’s current performance and areas in which it can improve by testing your site in Google PageSpeed Insights. Remember, a good PageSpeed score isn’t always the best possible thing for your site, an unbelievably tiny load time is.

What other ways do you recommend for speeding up WordPress sites and improving load times?

  • Charles Floate

    Wow, really nice! I’ll have to try and implement these into my blog, though I’ve already got MaxCDN :P

    • http://techtage.com/ Rohit Palit

      Your blog’s already scary fast! :D

  • http://www.matthewbarby.com/ Matthew Barby

    Awesome post, Rohit – genuinely one of the best site speed related posts I’ve read.

    • http://techtage.com/ Rohit Palit

      That’s great to hear!
      Thanks for reading, Matt.

  • http://sysberto.com/ Pavan Jadhav

    Gzip Compression Trick Worked :D

    Reduced Time to 6 Sec. only :v

    • http://techtage.com/ Rohit Palit

      You mean 6 seconds load time, or you reduced your load time ‘by’ 6 seconds? ;)

      • http://sysberto.com/ Pavan Jadhav

        6 sec load time… previous it was 21.06 sec … :v

        • http://techtage.com/ Rohit Palit

          and how did you obtain that? manual timing / google analytics?

          • http://sysberto.com/ Pavan Jadhav

            checked with Pingdom

          • http://techtage.com/ Rohit Palit

            It’s okay, but not that great. Maybe you should try removing some heavy plugins. And also take Google PageSpeed’s suggestions into consideration.

  • Pingback: 17 Ways to Optimize and Speed Up WordPress Sites | Coordinating the Complexity

  • Patrick Sexton

    Please don’t steal my images. You took the gzip compression image from feedthebot, my site. I drew that image. Please link to the page or remove the image.

    • http://techtage.com/ Rohit Palit

      Sorry, Patrick. That was unintentional. I was quickly looking through images in Google Image Search. I’ve removed it.

  • WebTechATL

    You can enable Gzip inside of wordpress by going to http://www.yoursite.com/wp-admin/options.php – there you will have to access to turn on/off gzip compression. Toward the bottom you’ll find ‘gzipcompression’ – change the value to 1 (by default it’s set to 0)

    • http://techtage.com/ Rohit Palit

      Server-level Gzip is generally more preferred, but thanks for the tip anyway. ;)

  • http://www.hijos-del-atomo.com/ Christian Orellana

    The list is very useful, thank you very much for putting it together. I wasn’t aware of the database optimization plugins… I’m testing those now!

    • http://techtage.com/ Rohit Palit

      Thanks a lot for your feedback, Christian. :)

      Those database optimization plugins are a must for large sites.

  • Sambarnes90

    Some really good stuff here thanks for the post Rohit!

    The cache plugin for me was the most important.

    Decreased load times on some pages by as much as 70%.

    • http://techtage.com/ Rohit Palit

      Glad to know it helped you. Caching is generally very effective for reducing the load times of dynamic database-driven sites. :)

  • http://aimzo.com/ Ashish Kumar

    Awesome Rohit.
    I use W3TC, Lazy Load, Gzip compression, Google Pagespeed CDN and responsive theme. My site is pretty fast now.
    I was thinking about CDN. Which company should i trust

    • http://techtage.com/ Rohit Palit

      MaxCDN’s pretty good. :)

  • Pingback: What I've been up to this month | Rohit Palit

  • Pingback: Bing SEO: The Ultimate Guide

  • Mark

    I can’t believe you’re only 16 and have so much knowledge on this subject! Well done!! Btw, what do you think of Bluehost?

  • Pingback: Let Links Decide What You Do Next: Link Earning at Its Very Best

  • Pingback: How to Increase the Domain Authority of Your Site

  • Pingback: [Guide]Best Free CDN To Speed Up Your Website

  • anudeep009

    I currently use Cloudflare for caching+cdn+minify etc..
    Should i also install a cache plugin like W3TC?

  • Pingback: 101 Online Marketing Resources For Small Businesses -