How I increased Websitez.com’s performance by an additional 20%
Posted March 19, 2012, 3:37 pm in
How To, jQuery, WordPress Tips
A recent project of one of our co-founders, WebsiteSuggestions.net, motivated us to take a look at our own WordPress installation and see if we could speed up our site. In this blog post I will outline a few issues that we had that I know many other people are having.
When we fired up Firefox to run Yahoo’s YSlow tool extension that will identify problems with your site, we scored a 68 out of 100. And when we ran our website through the WebsiteSuggestions.net tool, it identified additional problems as well. By the end of our adjustments, we scored a 90 out of 100.
I have had many friends ask for my configuration file for W3 Total Cache, but I always tell them that W3 Total Cache needs to be configured manually for your own blog. On some blogs, object cache and database cache are very important, but on others, you may not want to have that enabled at all. It all depends on the type of website you run. The same goes for page cache. Page cache can cause some negative effects such as tracking query string items, but again, there are ways to configure around that as well, but it is dependent on that site. So bottom line, you should have someone who is familiar with caching configure W3 Total Cache for you, and use the configuration export feature to save your configuration in case it gets overwritten or modified.
I should also note that occasionally I had to de-activate the W3 Total Cache plugin to completely get rid of the cache. The plugin provides an “Empty All Caches” button, but that does not appear to work under certain circumstances.
Another issue I ran into with W3 Total Cache is our server did not support the cache method “Disk: Enhanced”. I did not receive an error, but upon looking into the issue further by utilizing the page cache debug that the plugin offers, I noticed that the page was not being cached. I searched around the Internet and found a suggestion to switch the cache method to “Disk: Basic” and that fixed the issue. Which brings up another great point, you must use the debug feature that W3 Total Cache has to make sure that the plugin is performing the caching that you are expecting of it.
Common WordPress Performance Issues
- Inclusion of the same script, multiple times.
I have witnessed this issue numerous times, and come to find out, it was happening on our own website. The cause was a plugin that we were using that was not written properly. It did not use the WordPress function to enqueue a script, it was basically hard coding it into the header. The inclusion of jQuery is usually the culprit. Having jQuery included multiple times on your website can have a major negative effect because the size of the library is 230kb uncompressed.
- Inclusion of the same code, multiple times.
This is similar to the above issue, but it is more difficult to track down because different file names are used or the code is being included inside of a different file. Our website was including jQuery twice, two completely different versions, and one was being placed inline inside of a JS file dedicated to a plugin, which made it difficult to locate.
- Hard coded theme items.
A few issues we found was that in our header.php file, a few of the items that WordPress generates for you, such as the RSS, language attributes, doctype, etc. were hard coded into the HTML elements or had a meta tag inserted. This causes a conflict and can hurt the way your website is presented to different browsers. This is generally a culprit in any free themes or any themes developed by someone who is not familiar with what the WordPress framework does for you.
- External Scripts
We use a Facebook and Twitter widget that includes a JS script on each of these domains. Now I assumed that because they are large companies with brilliant engineers that this would not slow down my website. But, being public services that service millions of hits a day, occasionally they do slow down the page load. They also do not allow you to set an expiry header, nor control the minification.
- Location of JS Files
- Lack of Minification
To minify something is to remove the whitespace, comments, and all other things that are not necessary for the element to work properly. This can be CSS, JS, HTML, or really any script that can be interpreted, those are the main three. The goal of minifcation is to significantly reduce the file size. Typically, a 20% reduction can be achieved. Using compression and minification, the latest jQuery library can be reduced from 229kb to 31kb, which is a massive reduction. The smaller your page size is, the faster it loads for people.
- Image Optimization
When you upload an image using WordPress’ image upload feature, it does not optimize the image for you. Furthermore, if you upload a large image, and then use the WordPress’ feature to scale down the image, it is merely setting HTML attributes to scale down the image, instead of creating a new, smaller image with a smaller file size. There is a plugin called Smush.it that will take care of this for you.