How to Optimize WordPress for Better Performance

Lean how to speed-up your WordPress website

In this tutorial we will give you some tips on how to improve the speed of your WordPress website. Having a fast site is essential if you want to provide your visitors with great user experience and rank well in the search engines like Google and Bing which take the loading speed of your pages into consideration.

This tutorial covers the following topics:

Enable Dynamic Caching

Enable gZIP compression

Use a CDN

Optimize your Images

Minify your JavaScript and CSS files

Leverage browser caching

Optimize your WordPress Database

Enable Dynamic Caching

Adding properly configured Dynamic caching to your WordPress site will have great effect on its speed. There are many services like Varnish and APC that can be used but all of them require a lot of server configuration and tweaking of your application to work correctly. This is why, we at Navicosoft have created a tool called the SuperCacher. With it, all you need to do is install a small plugin and enable the Dynamic caching with a single click. For more information on how to use it, please check out our SuperCacher Tutorial.

Enable gZIP compression

To decrease the size of data that's being transferred between your server and your visitors, you can enable the gZIP compression for your images, CSS and JavaScript files. By doing this, the web server will compress (like creating a ZIP file for example) this content before it's transferred over the Internet to your browser. On the other side, your browser decompresses the content before rendering it. This significantly lowers the size of information that's being transferred lowering the loading times of your pages.

The easiest way to enable the gZIP compression for your images, CSS and JS files is to add these lines to your .htaccess file in the root WordPress folder:

## ENABLE GZIP COMPRESSION ##
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
## ENABLE GZIP COMPRESSION ##

Use a CDN

Content delivery networks (CDN) are server networks that clone your site on all of their location nodes. This means that when your visitors request your site, it will be served by the closest server location, rather than the main datacenter of your hosting provider. For more information on that matter, check out our CloudFlare CDN Tutorial.

Optimize your Images

Images are essential part of every website. It is important to have them optimized. There are few things regarding our images that you should mind when making your WordPress site:

• Use images with the proper size. Do not upload big images and then scale them with HTML. Make sure that your photos and other images are not bigger than the size you're actually displaying them in.
• Smush your images. Smushing them will remove all the additional data from your photos - creation date, camera used for the photo, gps coordinates, etc. There is a nice little plugin that does that for you called WP Smush.it.
• If possible, use Sprites for your themes. Using sprites is a CSS technique that uses a single image to show multiple design elements on your pages. This way instead of loading dozens of small images (making http requests each time), your site will open a single one. Sprites, however, must be considered when the theme is designed. So always look for themes that utilise sprites.

Minify your JavaScript and CSS files

Minifying your CSS and JavaScript files means that all the unnecessary data from them like double spaces, empty new lines, comments, etc. will be removed from the files lowering their size. There are many online tools that you can use for free to minify your files. In addition, if you're using the W3 Total Cache plugin, it has an option to automatically minify your theme's CSS and JS files.

Leverage browser caching

Leveraging the browser caching means that you can specify for how long your visitors' browsers should cache your images, CSS, JS and flash files. However, if any of those resources is set, your server will notify the visitors browser and the cached content will be replaced with the new one. You can add the lines below to your .htaccess file in order to enable this technique.

## LEVERAGE BROWSER 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 application/x-javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## LEVERAGE BROWSER CACHING ##

Optimize your WordPress Database

It's a good practice to optimize your WordPress database from time to time. You can think of this as running a Disk Defragmenter on your local hard disk. For more information on that matter, check out our article on How to Optimize a MySQL Database.