WordPress optimization is not just important for high traffic blogs but also small websites/blogs who want to get higher listing in search engine rankings. A faster WordPress blog would enhance your server efficiency and help in gaining more traffic. As the 80/20 principle states that 80% of the websites impact comes from 20% of its features, a faster loading WordPress installation can greatly enhance wordpress optimization by improving the end user response times which is directly proportional to number of components in a page .While WordPress officially guides on how you can increase the performance of your WordPress installation, but either these are too technical or sometimes not enough for optimizing WordPress when it comes to faster loading.
As a web designer/developer many times you do not get the choice of selecting the right hosting environment for your website, therefore the task of WordPress optimization becomes more critical.
The aim of this article is to suggest tricks and tools which can yield good results in WordPress optimization.
As the HTTP/1.1 spec suggests that browsers download two components in parallel per hostname. Interestingly this varies from browser to browser with IE7 supporting 2 components in parallel per hostname and Firefox supporting 8. Unfortunately by default WordPress downloads all the components from a single hostname. Change your default upload directory to a top level directory and connect it to a subdomain. Since all the images will be loaded to that directory use the subdomain as image source wherever you are using images. eg: http://www.vibethemes.com/img/VeryVibe-125×125.png and http://img.vibethemes.com/VeryVibe-125×125.png . It works like forcing the browser to make more simultaneous server requests.
Using CSS sprites
CSS sprites is one of the best trick to keep your html document size in check and enhance your user experience. Since all the images are combined into a single image the number of http requests are decreased dramatically and to the user all the images load at once.
Image Optimization using Smush.it from Yahoo
Smush.it is a great tool form YUI, Yahoo. It uses state of the art loss-less image compression techniques to give you the best possible compressed image without loosing on the image quality. I
Combine and Minify all Css & Js
The same logic which applies in case of CSS sprites also applies here. Minifying scripts would remove the reduce the size of your scripts and combining them into a single CSS or JS file would reduce the number of http requests by a great amount.
Move <script> tags in footer or bottom of content
Load jquery from Google
Jquery is a big resource hog it is 70-89KB in size which essentially takes away a lot of your precious bandwidth and since most of the scripts are loaded after jquery load the overall performance is impacted. The best part is that Google’s servers are pretty fast and would help in parallel loading of jquery in the browser. But most important thing I want to advice to all my designer friends is including the jquery the right way to avoid conflicts and multiple jquery inclusions. See example here on WordPress.org
By Default CDNs are the best way to increase your website or blog’s speed. A CDN is a content delivery network which functions like a cloud, a combination of multiple servers which increase the site’s loading speed by fetching the HTML components from the nearest servers to the receptor.
Cache Cache Cache! use W3 Total Cache : Object Cache/html cache/query cache
Last but not the least “Cache” is the way to decrease the loading time of your blog/website. This is an Awesome plugin from W3edge which is a complete cache package. An ultimate caching tool for your blog with multiple inbuilt features a must install for every WordPress installation.
Apart from the above listed tricks other suggestions such as:
- Using a Minimalist WordPress theme
- Grade your blog by using Yslow plugin for Mozilla and Chrome from Yahoo
- Replace normal comments by facebook comment
also can decrease the loading time of your blog.
The bottom line is any method which can reduce the number of http request of your page would help you in decreasing load time of your blog/website.