A faster loading website is a great business ethic – Period. Speed of the website depends on a lot of factors including your hosting environment, the size of your database and number & size of your images. With a lot of businesses preferring WordPress these days – a definitive guide to speeding up WordPress is required.
Recently a client of ours built a website in WP Ecommerce and was not satisfied with the load times of the website. I decided to get my hands dirty and get all the information I could on this topic. With a lot of experiments on an existing database over 330MB and home page sized 1.1 MB, I was able to speed the website up at a satisfactory level.
The following items were considered in the experimentation with appropriate impact on the speed described along with some data below.
WordPress’s Own Caching Engine
WordPress has a built in Object caching mechanism and an API. This mechanism is used to store complex objects including HTML structures which are resource consuming and require generation on the fly. The engine is implemented in PHP memory which means you won’t be able to persist objects in-between requests. If you are fetching the same object repetitively this may be of use. The procedure to active the built in the default caching system is very simple.
1) In WP-config file turn on caching -
ENABLE_CACHE – “
2) Create a cache directory in WP-contents and CHMOD to 777.
If after browsing through WordPress site you do not see any cache files in your Cache directory – recheck your folder permission. Some hosts will require you to have the permission set as 755.You can skip enabling this caching if you are going to use w3 Total Cache
You may find this wordpress refrence for further clarification.
Flush The Buffer
The buffer is a big memory resident string. When a user requests an element on a page or page itself, the browser starts calling various components to weave the entire web page. The buffer allows to fetch partially ready HTML components.
Imagine you flush the page just after the </head> tag. Since the webpage is waiting for the body content to be fetched it can start loading CSS or Favicons simultaneously. The impact on speed although not phenomenal it can shave off a few milliseconds from your load time. This is especially useful on busy back ends.
Just insert the following line in your header.php after the closing header tags.
<?php flush(); ?>
Some users have reported conflict with w3 total Cache plugin. It may cause interference with your caching plugin. On a different note, you can combine gzip and flushing.
Scripts blocks parallel downloads. Hence using a cookie free domain to serve static content like HTML or images is a good idea. This allows more than two downloads at the same time for the browser speeding up the fetching procedure.
The problem with scripts is even if you have them spread out over different host names it will block all other downloads until it is completed. Unless your webpage uses the document. Write function for java scripts at the start all other scripts can be moved to the bottom.
Put Style sheets at the Top
You might have often seen the blank white page before the next page load. This is often caused by loading CSS at the bottom. A lot of browsers avoid rendering specially internet explorer in order to prevent redrawing of the elements on the page until the CSS has loaded.
This rule has been explicitly mentioned in the HTML specifications.
Remove unnecessary Java scripts from Pages
Classical example of this could be the contact form 7. The Java script for contact form 7 is only required on the contact us page. However, it loads the Java script on all the pages. If an additional 50K overhead is given to a page a few seconds will be added to the load time.
Here is a sample code to add to functions.php.
WP smush it
Wp smush it strips your images from the following data
- stripping meta data from JPEGs
- optimizing JPEG compression
- converting certain GIFs to indexed PNGs
- stripping the un-used colours from indexed images
Yahoo does have an online tool that does the similar job. Using this tool on images around 80-85 KB I found that there was an average saving of 10-20 KB. If you are using the Wp Smush It bulk tool, make sure that you do the procedure when the load on your server is the lowest.
Consider an WP e-commerce category page with 35 products having a 20 KB image each. Smushing those images using the plugin could bring about a lot of savings for your website.
Also make sure you have enough max_connections set on your SQL database to enable a smooth running of bulk smushing. Most shared hosts would allow upto 100.
Do not scale images using HTML
A lot of webmasters and specially users of WP e-commerce still use the old way of scaling the image inline. <img src=”” width=”500px”> is not only resource consuming but also going to consume a lot of time loading a larger image in the first place. It is a good practice either to use a separate thumbnail for that particular page or use timthumb to load the image.
Use a Favicon
Favicon.ico will be requested by the browser regardless of whether you have it or not. If you do not have a favicon the browser will get a 404 not found. It is best to have a favicon placed in the root to ensure that the browser does not get a 404. A 404 will often cause delay due to the browser waiting for the resource response. The browser also sets cookies every time favicon is requested.
The best practice would be to make the favicon small and cacheble.
Revision is a great plugin to stop bloating your database with unnecessary storage of old revisions for page/posts. Every time you make a change to your post Wordpress will store it as a revision in the database. The change could be as small as a spelling edit in your post.
Revision control plugin in Wordpress would let you specify a global number which will then become the number of revisions for a particular post that will be saved by Wordpress. The plugin serves a great purpose as you can stop your Wordpress database from bloating because of the unnecessary number of revisions it is storing for your site.
Using a CDN
Removing unnecessary plugins
WordPress Optimization does specify deactivating all unnecessary plugins to avoid performance reduction. One other thing you could do to measure a plugins performance is to selectively disable it in order to measure the performance of the site when a particular plugin is turned on/off. A lot of plugins are coded inefficiently and hence they should be checked to verify whether they are causing slow speed.
Optimize the Database
There are countless guides and plugins out there that will optimize the database for you. Optimizing the database is indeed useful. I haven’t been able to measure any impact on speed after optimizing the database on my own server. However it seems like a good activity specially if your database is large.
Plugin that can optimize the database for you
You can go through the plugin directory and you will find a lot of plugin who can do this job fairly well.
Remove 404 elements from your page
<link> over @import
IE renders @import the same as <link> at the bottom of the page. The explanation was provided earlier when discussing loading css at the top for progressive rendering. Best not to use @import.
w3 Total Cache