How to optimize the load times of a WordPress blog?

The loading speed of the websites becomes more and more important in the search engine algorithms (learn more about SEO in this article: What is SEO?). Moreover, if the theme of your blog is heavy in resources and take time to load, then your bounce rate will increase. This is why, it is so important to make the Internet faster. Here is a tutorial about how to optimize a WordPress theme (learn more about WordPress and CMS).
First and foremost, it is important to note that most of the optimizations presented here can be applied to other types of sites, either another CMS or a homemade solution.

“The web should be fast”, Google

5 tools to measure the load time

It is always interesting to conduct tests before and after your changes to see the difference. Here are 5 tools to achieve a comprehensive benchmark performance of your site.

1. GTMetrix – This service allows you to measure the load time of a website in an automated manner, and by integrating two comprehensive tools: PageSpeed and YSlow to know what and how to optimize your pages.
2. Yottaa - The second tool is also very good, although less known. It brings a wealth of information and tips to optimize your pages.
3. WebSiteOptimization – It gives you additional information to the previous two.
4. Webwait - This tool is completely different, because it gives you only one information: the load time of your final page. But for this it will make X requests spaced by X seconds between them (everything is customizable by you).
5. Firebug - Firebug is an extension for Firefox and Chrome. This is a tool which goes beyond simply measuring the load time, because it is also a great tool used by developers.

Choose a good web host

The idea is primarily to choose a hosting package tailored to your website. No need to take a dedicated server for a personal blog which is only for text and videos hosted on Youtube. The offer must match the needs. Before choosing a web host, you should especially consider the customer service quality by looking at the user-reviews. I prefer a web host that ensures a minimum performance and always keep my site online.

Minify the HTML and Javascript

There are several ways to minify your HTML and Javascript code, but generally it consists in reducing the spaces and unnecessary parts of your code. The spaces, tabs, and orderly structure used in code is to make it more readable for programmers. But servers and browsers don’t care about what the code looks like. Therefore, before compressing your code, it is important to make a copy of it.
You can, of course, minimize your HTML by yourself, but it takes time. If your blog runs with WordPress, you can use WP-Minify or W3 Total Cache to handle this at runtime without affecting the files.

The optimization of images

Unfortunately, many are still unaware that the images can be one of the most disadvantageous factor relative to time when the page loads. Too heavy? They will slow down your page. Too numerous? The observation will be identical. We must find the right balance between quality and dimension, and pay attention to the format. For the web, it is better to use PNG and JPG. I propose two optimization ways:

1. The first: Load your pictures in an external module. You can, for example, use the plugin “Flickr-slideshow-wrapper” to load a little slideshow of one of your albums Flickr, in an article or page. Flickr or Picasa load images faster than most hosting companies.
2. The second: Compress your images. You can do it by yourself, but it takes times. I suggest you to let Yahoo! do it for you, with the plugin WP-Smush.it. This plugin will automatically transfer your pictures in the Smush.it service, with a compression ratio of 15%.

Improve the loading of the images

Your wordpress theme

The first step in optimizing your WordPress theme will be divided into several parts: improving the computation time to generate your pages, and remove all unnecessary items.

Template Hierachy

Each content type in a WordPress blog will appeal to the corresponding template in your theme directory:

• category.php for a category
• tag.php for a keyword
• single.php for an article
• …

This is called the “Template Hierarchy.” Somewhat complex, it can vary and refine its graphic according to each type of content, or even to change elements in each section or page. The single-file ID.php allows to have a specific template for a particular item.
Here is the Template Hierarchy of WordPress themes:

Template hierarchy

The correct choice of template will accelerate the computation time of the page for several reasons:

1. WordPress engine tests the presence of files in the theme directory and uses the most targeted of them, it is files which is located right into the classification given just before. If found, it will start (slightly) earlier to generate the page.
2. This avoids having for example a file is too general, such a archive.php that handles both category pages, tag and archive by date.

if (is_page()) {}
elseif (is_home()) {}
elseif (is_single(1067)) {}
elseif (is_single()) {}
elseif (is_archive()) {}

With the correct template, they become useless.

Clean up the code of your blog theme

When you install a WordPress theme, the developer ensures that it can be used by all the blogs without problem. For that, WordPress provides “tags” such as “bloginfo(‘name’)” which displays the name of the blog when used in the code of a theme. The problem is that every page load, WordPress will make a request to the database to retrieve this information. For example, open the header.php file, you can find a code that looks like this:

<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php bloginfo(‘stylesheet_url’); ?>”/>

This code is used to load the CSS of your theme using the tag bloginfo (‘stylesheet_url’). Your blog is now installed, the stylesheet will not change places, it would be interesting to drive the URL to it to avoid unnecessary motion and reduce the load time on your server, just remplace the code above :

<link rel=”stylesheet” type=”text/css” media=”screen” href=”http://mon-site.fr/wp-content/themes/mon-theme/styles.css”/>

This technique can be implemented for the tag of the blog title, url of the RSS and Atom feeds, the description of the blog… But do not forget to make a backup of your theme before handling.

Debug your wordpress theme

Often, the WordPress themes are not well designed: it uses functions that have been deprecated, variables are stored in memory unnecessarily, and so on.
For this you can use plugins specifically designed for this purpose. There are several. Personally, I selected two. The first is called Debug Objects and the second is called Blackbox WordPress.
Both plugins will allow you to showcase your information of many themes, including among others the number of page requests, deprecated features, constants and variables used, or a detailed overview of each of your requests and loading time.

CSS

The CSS will not escape the cleaning: eliminate all unnecessary elements. This involves removing all classes and IDs that are no longer used by the various elements of your site. That’s what you should do:

• Delete the last “;” of each bracket:

#border-color {font: 42em; padding: 42px;}, this code becomes: #border-color {font-size: 42em;padding: 42px}

• Delete all unnecessary space in the brackets or just before it:

#border-color {font-size: 42em;padding: 42px}, this code becomes: #border-color{font-size:42em;padding:42px}

• Delete all comment lines
• Organize all of your stylesheets that are loaded on your site. This includes style sheets in your chart and also that of your WordPress plugins. This will reduce the total number of files to download.
• In this style sheet, group all the classes and IDs whose attributes are identical. In the example below, thus saving 30% of characters within the same report:

#border-color{font-size:1em;font-weight:400}
#border-weight{font-size:1.2em;font-weight:400}
//These codes lines become:
#border-color, #border-weight{font-size:1.2em;font-weight:400}

Don’t forget the basics:

• Keep your wordpress updated: it will protect you against new bugs of WordPress.
• Keep your plugins updated.
• Delete inactive plugins.

Use a cache plugin

Using a cache plugin such as WP Super Cache which generate static pages and will therefore significantly reduce server load. This plugin will save the life of your blog in case of peak visits because the pages displayed will make no request to your MySQL database.