Millions of websites run on WordPress, and almost all of them run slower than they have to. If you are suffering from a slow WordPress site, there are several things you can do to boost its performance. And even if your site is pretty responsive, chances are there is still room for improvement.
Most everything that will be presented follows the Golden Rule of Website Speed (G.R.O.W.S), and that rule is “Reduce, reduce, reduce“. Almost everything about increasing WordPress performance is about reduction, such as reducing file sizes or reducing PHP and database calls.
So, without any further delay, let’s dive into this…
Reduce PHP calls
WordPress theme files are composed primarily of PHP and HTML. The main purpose of PHP in the theme files is to add flexibility and features to your site, as well as communicating with the database. After you have installed a theme on your site, it is possible to replace many lines of PHP code with standard HTML.
Why replace some PHP code with HTML code? It’s all about reduction. Many PHP functions in WordPress seek out information about your site and then output that information as HTML. If you know what the output information is, why not replace the PHP call with a line of HTML and reduce the load on your server?
For example, in the header.php file of the Twenty Ten theme (the default WordPress theme), you will see the following lines of code:
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" />
When you look at the source code of a blog using this theme, you see this output:
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" />
Notice the highlighted lines. The first highlighted line in the PHP example provides the output of the first highlighted line in the HTML output. You could easily copy the HTML output of a PHP call such as this and paste it over the PHP line in your theme files. If you were to take the first highlight (as an example) and copy it into your theme file, the result would be this:
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?><!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" />
There are many instances such as this that you can find to reduce PHP calls made to the server. It can be beneficial to reduce the amount of PHP calls because less PHP calls = less server load = quicker page loads.
As always, if you are not absolutely sure that you should rewrite any PHP code with its HTML output, leave it alone. It is very easy to edit the wrong thing and break your site.
Reduce database calls
Trimming the amount of PHP calls also reduces the amount of times your WordPress site has to go into the database to retrieve information. Other ways you can reduce database queries is to limit the amount of plugins you use, disable post revisions, or reduce the amount of widgets you have in your sidebars. Every little bit helps, so even if you can only reduce your plugin or widget amount by a little bit, it’s worth it.
Combine CSS files
Many themes contain multiple CSS files, and many plugins also include CSS files. The end result of this is that a web browser has to retrieve multiple files from multiple locations in order to render a WordPress site correctly. One way to help speed up how quickly your pages load is to combine CSS files when possible. Combining CSS files into fewer documents makes it so web browsers do not need to retrieve as many files.
Minify CSS files
Once you’ve combined as many CSS files as you can, it’s a good idea to minify those files. CSS minification is a process where unnecessary information is removed from the stylesheet, resulting in a file that is much smaller for the web browser to download. There are different levels of minimization that you could take, but I’ve always been a proponent of shrinking the file as much as possible. For example, look at this example of what could be seen in a stylesheet:
#header {
padding-top: 10px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 20px;
margin-top: 2px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 0px;
}
This should be rewritten in a much more concise manner:
#header{padding:10px 20px 15px 30px;margin:2px 0 5px 10px;}
When you compare the two snippets of CSS, it’s obvious that the second example is much smaller, yet they both perform the same thing.
If rewriting your CSS files isn’t your thing, there are plenty of free online tools that will do the job for you. Personally, I recommend using the CSS Compressor and Minifier. This tool gives you many options on just how much to shrink your CSS file by and I have found it to be rock solid.
Javascript files
Javascript files fall into the same category as CSS files; they can benefit from being combined and reduced. It’s not always as easy to combine javascript files like you can with stylesheets, but one thing you can always do is minify them to shrink their file size. An online tool that does a great job with this is Minify JavaScript.
Optimize images for the web
This is probably one of the biggest, if not the biggest, hindrances to page load speeds in WordPress. Whether it’s the images that make up your blog theme or the images within your posts and pages, heavily bloated image files can cause a blog to just creep.
The two best things you can do to reduce your image file sizes are to optimize them for the web and to always include the correct image dimensions. Let me start with the latter first.
Proper image dimensions
When you add an image to a website, it is important to include the proper height and width attributes that go along with the image. Sure, a web browser can just figure out what the dimensions are without any input from you, but if you specify the image dimensions then you are helping out the web browser by giving it less work to do.
Another important tip with image sizes is to size the image to your exact specifications. For example, let’s say you have an image that is 800px by 600px and you want to use it on a page, but only smaller. Many people will just use the original image and enter the following line of code:
<img src="http://yoursite.com/images/image.jpg" height="300" width="400" alt="image description" />
In the above example, the image is displayed smaller on the website, but the image file size remains the same. That means the displayed image is a lot “heavier” than it should be. It would be much better to resize the image to the dimensions you need than to resize the image with HTML.
Reduce image file sizes
The best thing you can do with your web images is to shrink their file sizes down as much as possible. This is easily done with software such as Photoshop or GIMP. The “save for web” option allows you to reduce the file sizes of images considerably. It is up to you to gauge just how far you want to reduce your image file sizes; if you go too far the image quality suffers greatly.
If you don’t have Photoshop or GIMP (GIMP is free, by the way), then you can also use a handy plugin for Firefox called YSlow, which includes a tool called Smush.it for compressing images. This handy tool can compress all the images on your website, and then allows you to download a zip folder containing all the optimized images.
Modify your .htaccess file
Implementing some good compression and cache rules are a must if you want to increase the speed of your WordPress site. Going into details about server compression is beyond the scope of this post because there are too many variables, but one thing you can do is add the following snippet from GitHub to your .htaccess file in your main WordPress directory:
# Enable GZIP <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html </ifmodule> # Expires Headers - 2678400s = 31 days <ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 2678400 seconds" ExpiresByType image/jpeg "access plus 2678400 seconds" ExpiresByType image/png "access plus 2678400 seconds" ExpiresByType text/css "access plus 518400 seconds" ExpiresByType text/javascript "access plus 2678400 seconds" ExpiresByType application/x-javascript "access plus 2678400 seconds" </ifmodule> # Cache Headers <ifmodule mod_headers.c> # Cache specified files for 31 days <filesmatch ".(ico|flv|jpg|jpeg|png|gif|css|swf)$"> Header set Cache-Control "max-age=2678400, public" </filesmatch> # Cache HTML files for a couple hours <filesmatch ".(html|htm)$"> Header set Cache-Control "max-age=7200, private, must-revalidate" </filesmatch> # Cache PDFs for a day <filesmatch ".(pdf)$"> Header set Cache-Control "max-age=86400, public" </filesmatch> # Cache Javascripts for 31 days <filesmatch ".(js)$"> Header set Cache-Control "max-age=2678400, private" </filesmatch> </ifmodule>
The short explanation of what this .htaccess code does is it speeds up your site. It sets rules for caching of files, and whatever your server doesn’t understand or can’t handle it simply ignores.
Final thoughts
There are many, many things you can do to boost the overall performance of your WordPress site. I have touched on several things here that everyone would probably benefit from doing. If you have any additional tips you would like to add or to share your experiences with any of the above, feel free to leave a comment.
