Performance is a large part of your website’s success. If a visitor finds that your site loads too slowly, they will go before you even get the chance to show them how good you are. If you are a WordPress user, you can drastically cut down on your site’s load time and increase performance. Not only will visitors be happy because the sites load quicker, you will also be saving bandwidth as you reduce the file size of the pages.
1. Implement Caching Using W3 Total Cache
Much of your website’s content is static and can with great benefits be cached so it does not have to be reloaded from the database. My favorite plugin for caching is called W3 Total Cache and is very powerful. With this plugin you can cache both pages, objects and the database as well as enable browser caching to use the local cache in your visitors browser to further decrease the response time.
If you are using a Content Delivery Network (CDN) that is specialized at providing content to users across the globe in the quickest way possible, you can have certain static files be hosted with that CDN to further reduce the load time.
2. Hardcode URLs and Paths
To make it easy for theme developers when creating themes that you can use on any server configuration, WordPress has a number of information functions that generate things like your site URL, site name and addresses to the template files. You can save a lot of calls to the database (as their definition is stored in the database) by simply swapping the PHP function against the proper value for your site and server.
<?php bloginfo('url'); ?>— Replace this with your site URL<?php bloginfo('home'); ?>— Replace this with your blog URL<?php bloginfo('name'); ?>— Replace this with your site name
Furthermore you can decrease load times even more by overriding the database values of the site and blog URLs in the wp-config.php file, saving a couple of database queries per page and boosting the performance. All you need to do is add the following in your wp-config.php file and of course change the values to your own URLs (note that there should not be a trailing slash at the end).
define('WP_HOME', 'http://www.bernskiold.com'); // Defines the Blog URL define('WP_SITEURL', 'http://www.bernskiold.com'); // Defines the Site URL |
Moreover you can save a bunch of time loading important site structural documents such as the stylesheet and javascript files by eliminating database queries for the paths to direct these to.
<?php bloginfo('stylesheet'); ?>— Replace this with the full URL to the stylesheet<?php bloginfo('stylesheet_directory'); ?>— Replace this with the full URL of the directory where the stylesheet is in<?php bloginfo('template_directory'); ?>— Replace with the full URL of the current theme’s directory
3. Minify Your HTML and CSS Output
I am a big advocate of clean and easy to read code in your files and even though I am suggesting the minify method here, I still am. Instead however of minifying the document that you use to edit your site, you can let the W3 Total Cache plugin minify your HTML and CSS (and even Javascript if you are feeling adventurous).
By removing all extra spaces and tabs that can normally take up a hefty number of bytes on your sites, you can with this simple plugin have the main output be reduced to the essential code, boosting the site performance a great deal.
Warning! Enabling the minify settings on a javascript file can cause the script to break. If you want to minify javascript files, do it by hand.
4. Reducing the Number of Images
Images take much longer to load on your site than everything that is produced by code and text. If there is a way to refrain from using an image to achieve a certain effect, take it. The less images you use, the faster your site will load. It’s as simple as that.
Don’t let this scare you from using images at all however, but you have much to gain if your general design uses few of them. Firstly, it will load very quickly and secondly, the site will look splendid even without images turned on. There is a reason to why Google uses so few of them, it makes their site super fast.
5. Optimizing Your Images
If you have a design that is based on images or if you want to use many of then, don’t let the above point scare you off. Just make sure you know your proper file saving tools in the graphics editor that you use. If you are a Photoshop user, learn how to use the Save for Web and Devices dialog which can greatly help you to reduce the file size of images by changing the quality and other image settings, stripping unnecessary data.
Saving the image at its maximum quality may occasionally be required (such as with some photos) but most of the time you can go down quite a bit, even towards 40-50 in quality (on a 100 scale) and still have a perfectly useable image for the purpose of a web design element.
Furthermore, don’t scale down images once uploaded. If you load in an image that is 800×800 pixels but scale it down to display as 200×200 pixels, it will still take the same time to load as if it were the larger size. Instead, take it into a graphics editor and scale it down properly. This way, you will save a lot of seconds.
Image may be NSFW.
Clik here to view.
6. Optimize Your Database Frequently
As a database is a collection of data, it too can be optimized to store the data in the most efficient way. If you are using a MySQL database, optimizing it is very easy if you have access to a tool such as phpMyAdmin. Please note that before you do this you should backup your databases just in case something goes bad!
- Log into phpMyAdmin and your database.
- Select the database that your WordPress install uses.
- Click on the “Check all” link at the bottom of the list to select all the tables in the database.
- Select the “Optimize table” option from the drop-down list
7. Reduce Amount of Unnecessary Plugins
WordPress has plugins for almost everything. Though they are a great way of easily adding new features to your site, don’t use plugins for everything when there is a simple alternative.
For example, there are many plugins out there that gives you the options to add in your Google Analytics tracking code. I would advise you to skip those and instead grab the code from Google Analytics yourself and paste right into your footer.php file. Just as in the first two tips, the point here is to reduce on the number of database queries a page has to make in order to decrease the time it takes for the page to load.
Google Analytics is just one example of code bits that are easy to add in yourself which helps boost your site’s performance.
8. Remove Plugins that are not used
Plugins that are deactivated still takes up space in your database and in your WordPress install and thus help to increase the load time of the page, which isn’t good. By removing all plugins (and themes) that you currently don’t use, you free this up and further decrease the load time of your website.
9. Limit API Calls and Sharing Plugins
Calling an API (Application Programming Interface) has become a popular way of showing content from other sites and also sharing your content. What happens when you call a website’s API is that you call data on another server. This of course leaves you to rely on the speed of that server and the connection between your and their server to be as fast as it can. By being careful about how many APIs you call on a page, you can leave out the extra step of your server having to call another server, before being able to serve up the page.
Furthermore, sharing plugins that are based on APIs can slow your page down by a surprising amount. A popular way to share things currently is by implementing Facebook’s dead simple “Like” interface which is a little code snippet that you can put on a website. Guess what though, it takes a long time to load this into your page. Maybe limit this to the full post pages and remove it on index and listings pages?
I am not suggesting that you get rid of all possibilities to share posts with your social network, but instead of integrating network APIs you can simply link to the sites the “old-fashioned way” and pass the article name and title through the URL which many sites still will handle just fine.
10. Choose the right host!
This can affect the speed a lot. Choose the right host, one that has good servers and almost more importantly, one that specializes in WordPress hosting or can help you optimize the server setup to get a great performance out of WordPress. This site is hosted on XLD Studios, which is also a sister company to Bernskiold Media (use the code BLWS to get 10% off each month for the life of your site).
11. Inspect Using Web Inspector/Firebug
When going through and doing these steps, make sure to inspect your own site to see what takes the longest time to load. If you are a Safari user you can enable the Developer tools and use the built-in Web Inspector to check the page size and load time of your site. Should you be a Firefox user, there is an excellent add-on called Firebug which will let you do the very same thing.
Look out for content that has a large file size and being linked into the page as well as external and internal queries taking a long time to load on the page and you will be on your way to limiting them, optimizing them or removing them altogether for a faster website.
Summary
There is many things that you can do that are relatively easy fixes to assure that your site loads faster than it currently is. Most of it is all about awareness, knowing what takes the longest to load and then deciding if it is worth having it on your site or seeing if you can somehow reduce its time. By going through the eleven steps outlined here, you should be able to get your site down in file size, helping people on 3G or modem connections as well as loading faster for everyone out there. Remember, visitors won’t stay long.
For a real-life example, this site used to load completely in over a minute (according to external tests and the Safari Web Inspector). After using the steps above to optimize the site, the load time is now down to about two seconds instead. That is an improvement by over 95%!