Today, the website speed is one of many factors that affect your Google ranking because like Google was talk: “Speeding up websites is important, not just to site owners, but to all Internet users” . So I’m very excited to share what I have learned about web performance (especially WordPress) with you and how to improve wordpress performance in this article.
First of all, there’are many, many ways you can do to speed up your website, but “optimization” is just thing harder to evaluate, for the easy example: you can make your website faster, but you may loose many visual effects to visitors or some website functions, the small website like a personal web-blog will be optimized easily but it’s NOT for the bigger website with many images, css file, javascript… so that, to suit your needs, you must keep it balanced, some-tricks you can follow, but the others, you shouldn’t (sometimes it’s because the limitation of your host like: your host doesn’t support nginx, xcache.., hard to add alias subdomain or doesn’t support mod_rewrite…).
How fast does your website run?
Before we start, you should test and make records of your current website speed via this services:
- http://tools.pingdom.com
- http://www.websiteoptimization.com/services/analyze/
- http://www.iwebtool.com/speed_test
- http://www.webpagetest.org/
And then download Yslow firefox addon and Google Page Speed tool, this is 2 must have tools to analyse and optimize your blog (Firebug addon required).
In the picture above, i’ve made tests on one of my client website before optimization.
And after optimization:
Another way to make a test is using ab - Apache HTTP server benchmarking tool by downloading WampServer and install it, after that start cmd in your windows, locating to the Bin folder of Wampserver apache, in my situation: D:\wamp\bin\apache\Apache2.2.11\bin and type in the command line:
ab -n 1000 -c 10 http://www.example.com/index.php
This command will send 1000 requests with 10 requests at a time to http://www.example.com and then returned back result to you:
You only need to concentrate on requests per second, time per request and transfer rate figures.
All of the results above is just for reference, they will different when compared with each other so when perform testing you must use an individual way to compare.
Ok, so let’s start:
1. Choosing a reliable web hosting company
You couldn’t make a great website with the bored web-host; on the internet, many host provider companies can offer you a great service, I recommend Dreamhost.com to you but a Dreamhost’s control panel may make you confused when using it, others great company are: Bluehost, Hostmonster, Site5, Hostgator…. Another new web hosting company offer a great optimized server for wordpress is: WpWebhost.
But before purchasing any host-plan, besides the price, you should consider carefully their Term of services (CPU and Ram consumption, copyright content policy…), reading reviews on the internet (like and also dislike opinions) and take some quick tests about their speed. (I prefer using Nginx than Apache server to render html, do you know WordPress.com used Nginx technology?)
2. Decide which functions you need, and which you don’t
I’ve visited many wordpress blogs and saw that many people put on their blog some functions that is not necessary for them like guest-book, chat-box, visit counter…. (Sometimes they must take something to put on sidebar). If you want your blog run faster, please keep it clean and well structured.
In your wordpress blog you can disable unused plugins (some of them create many css and javascript request when enable, even create database tables in your database). Use only the plugins you really need, and delete the rest.
3. Optimize your images
Using CSS Sprites:
CSS Sprites is the best way to minimize HTTP requests for images, CSS Sprites’s well know through community, you can read more about it:
After creating the sprites image you should make its size smaller by following this comprehensive guide made by Sixrevisions.com or simply using a free online optimization tool like:Yahoo Smush.it service, Punypng (Google Page Speed tool also offer a great one). Besides using CSS Sprites you can use another technique:Image maps (But this is too old and not using as many as CSS Sprites)
Specify image width and height:
Another small tip is when you embed your images to website, let’s specify the width and height attribute clearly so the web browser don’t spend much time calculating the image size when it’s requested:
<img title="image title" alt="" width="image width" height="image height" />
Serving scaled images:
If your image’s size is 1000*1000px, but when embed it on the web page, you only want it shows 500*500px, in this situation you should using the Graphic editor to re-size the image to 500*500px and using it, it’s not only reduce the bandwidth consumption but also the CPU resources to process this image. you can read more at here.
4. Add an Expires or a Cache-Control Header
This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. The expiration date can set to be relative to either the time the source file was last modified, or to the time of the client access.
These HTTP headers are an instruction to the client about the document’s validity and persistence. If cached, the document may be fetched from the cache rather than from the source until this time has passed. After that, the cache copy is considered “expired” and invalid, and a new copy must be obtained from the source.
http://httpd.apache.org/docs/2.0/mod/mod_expires.html
Using a far future Expires header affects page views only after a user has already visited your site. It has no effect on the number of HTTP requests when a user visits your site for the first time and the browser’s cache is empty. (Yahoo)
When using Apache web server (with mod_expires enable) you can easily doing this by adding to your .htaccess file:
ExpiresActive On
ExpiresDefault "access plus 1 month"
or more flexible way:
ExpiresActive on
ExpiresDefault "access plus 10 day"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/png "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType application/x-javascript "access plus 2 years"
ExpiresByType text/css "access plus 2 years"
ExpiresByType text/html "access plus 1 day"
ExpiresByType text/plain "access plus 1 day"
ExpiresByType application/x-shockwave-flash "access plus 2 years"
another way to do that:
Header set Expires "Thu, 7 May 2010 22:00:00 GMT"
You can specify which types of proxies can cache certain content, and how long files should be cached by adding Cache-Control headers, so the final code is:
Header set Cache-Control "public"
Header set Expires "Thu, 7 May 2010 22:00:00 GMT"
Use Yslow or Google Page Speed tools (or using the online tool Cacheability Query ) to test that you have caching and validation set up correctly.
5. Configure ETags
Configure Entity tags (ETags) wrong may cause you some problems about cache validator, the simple thing i want to recomend is putting this in your .htaccess file:
FileETag none
6. Using php flush(); function
It allows you to send your partially ready HTML response to the browser so that the browser can start fetching components while your backend is busy with the rest of the HTML page. (Yahoo)
Let edit your header.php in your WordPress theme folder like this:
</head>
<?php flush(); ?>
7. Reduce the number of dynamic PHP and http calls:
For easy example, you should replace:
<?php bloginfo('home'); ?>
with your website URL like http://www.example.com<?php bloginfo('name'); ?>
with your website name- Making your stylesheet URL, pingback URL, feed URLs static
- Removing the blog’s WordPress version
8. Minify, combine JavaScript and CSS file
If your web-blog has many javascript and css file like:
<link rel="stylesheet" type="text/css" media="all" href="css C"/>
<link rel="stylesheet" type="text/css" media="all" href="css D"/>
<script type="text/javascript" src="script A"></script>
<script type="text/javascript" src="script B"></script>
The first thing you can try is combine them into one file like:
<link rel="stylesheet" type="text/css" media="all" href="css combine"/>
<script type="text/javascript" src="script combine"></script>
After that:
With javascript file, you can use some javascript minify tools to compress the file size like:
…and with Css file:
- http://www.cssoptimiser.com/
- http://www.cleancss.com/ (let choose a highest compression level)
where to put css and javascript and the order of them?
JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. So you can follow the simple rules:
- Use external scripts and css file.
- Put css at the top and javascript at bottom. (putting javascript at bottom of web page is really good but sometimes you need to put your JScript in the website header section for your page to function correctly).
You should read more about this at: http://code.google.com/speed/page-speed/docs/rtt.html#PutStylesBeforeScripts
Only loading your script when you need it
If some of your scripts only perform its activity at the homepage or single page of your blog you can minify requesting them by using WordPress conditional tags like:
<?php if (is_single()) { ?>
<script type="text/javascript" src=""></script>
</script>
<?php } ?>
9. Reduce DNS Lookups and Split Components Across Domains
Split Components Across Domains
This technique’s very useful for a website that has many images and javascript request, if your website is www.example.com and you make request to
www.example.com/images/a.png
www.example.com/images/b.png
...
It’s better to try this:
static1.example.com/a.png
static2.example.com/b.png
Splitting components allows you to maximize parallel downloads (Firefox usually make 4 connections a time per 1 host). Make sure you’re using not more than 4 domains because of the DNS lookup penalty.
You can do this trick by yourself or using Content Delivery Network services:
CDN is a Content Delivery Network of highly-optimized servers all around the world working together to distribute your content through hundreds of servers instead of a single host.
Some famous companys in this area:
- Max CDN
- SimpleCDN
- Mediatemple CDN
- Amazon S3
- Free CDN (It’s free!!!)
Reduce DNS Lookups
Turn back to the example above, if your website make many request like:
www.example.com/images/a.png -> 1 DNS lookup
www.example2.com/images/b.png -> 1 DNS lookup
static1.example.com/images/c.png -> and 1 more DNS lookup
.....
You may face with DNS lookup penalty (it typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname) so let reduce the number of DNS lookup on your page by reducing the number of unique hostnames.
Reducing the number of unique hostnames has the potential to reduce the amount of parallel downloading that takes place in the page. Avoiding DNS lookups cuts response times, but reducing parallel downloads may increase response times. My guideline is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.
http://developer.yahoo.com/performance/rules.html#num_http
10. Optimize your Database
Use phpMyAdmin to optimize your database by Logging in to phpMyAdmin, check all the tables, and then chose “optimize table” option or you can use wordpress plugins: WP-DBManager, Optimize DB.
11. Caching your wordpress website
WP Super Cache
This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.
WP Widget Cache
A high-performance caching plugin for WordPress, and a plus for WP-Cache or WP Super Cache.
DB Cache
This plugin caches every database query with given lifetime.
DB Cache Reloaded
This plugin is a fork of a DB Cache plugin because the author didn’t think DB Cache was updated quick enough.
Hyper Cache
Hyper Cache is a new cache system for WordPress, specifically written for people which have their blogs on low resources hosting provider (cpu and mysql). It works even with hosting based on Microsoft IIS (just tuning the configuration).
W3 Total Cache
Trusted by many popular sites — W3 Total Cache improves the user experience of your blog by improving your server performance, caching every aspect of your site, reducing the download time of your theme and providing transparent content delivery network (CDN) integration.
Which is the best for you? You can use each cache plugin above and then make a test yourself by using tools were mentioned above from “How fast do your website runs?”. In my point of view, if you don’t have a CDN network let’s try HyperCache with DB Cache Reloaded, if you have, W3 Total Cache is for you!
12. Using Jquery to load images
Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load. You can check it at here.
Demo website that using Lazy load: Tripwiremagazine or Mashable.
Apart from above techniques, there’are many others thing you can do like:
- Make favicon small and cacheable.
- Use cookie-free domains.
- Make AJAX cacheable.
- Avoid URL redirects….
Other great wordpress plugins I want to share with you:
- Scripts Gzip: A WordPress plugin to merge and compress the CSS and JS links on the page.
- WP Minify: Once enabled, this plugin will combine and compress JS and CSS files to improve page load time.
- WP Smush.it: this plugin seamlessly integrates Smush.it with WordPress.
You might also like these posts:
Optimize the CommentLuv wordpress plugin
How To Add Google Site Speed Tracking to Your Website
How to create a sitemap page for WordPress blog
WordPress How To: Add Related Posts Section Without Plugin
How to change WordPress post editor font
Lets improve your website performance with Cloudflare
Simple Tips To Increase The Download Speed Of Your Own Website
8 Amazing JavaScript Image Zoom Scripts
About Jenni R
I admit, I have not been on this webpage in a long time… however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues.
That is some inspirational stuff. Not in the least knew that opinions could be this varied. Thanks in the course of all the keenness to offer such constructive knowledge here.
This is what I really want.. thanks for share
Thanks for this useful article.
Nice article. Thank you for this info
Indeed nice blog u have here. It would be nice to read a bit more concerning this topic. Thnx for sharing such material.
Awesome list. I use WP Super Cache and it’s great except when you make changes to a post/page, you don’t always get to see the changes due to the caching.
One more thing, I would like to add to upload images effectively and save hosting space, See WordPress Tips to upload images effectively .
Hey I love your blog and I put it in my reader!
Thank for this great post, i like what you
read.
hmm
nice instructions to make blog super fast…….
I’ll be checking out Lazy load to see what I can achieve.
Udegbunam Chukwudi | Make Money Online last post: Quick Update- Making Blogs Faster With W3 Total Cache
How do we make the jQuery lazy load WP plugin to work with W3 Total cache plugin?
thanks.
Как в такую жару еще можно что то делать?
Молодцы было познавательно.
Nice tips , i use the yslow plugin and wpcache to speed up my blog. I’ll try to implement the other tips you mentioned here too.
Great tips. I switched to W3 Total Cache for my blog from WP Super Cache, and love all the options it provides. W3 Total Cache also replaced a minify plugin as it has it built in. I am currently looking over what Javascript libraries and CSS files are loaded by plugins, and seeing what I can remove or move to the bottom of my pages.
Paul last post: Speed Up Your Web Site By Using CSS Sprites
I need professional help for optimizing my website. If you can help me, please contact me.
Well, just show your problem and I will do my best to help you.
Весьма ничего. Побольше бы таких постов.
Great article, I was actually looking for post like this. I just implemented W3 Total Cache with Amazon’s S3 & Cloudfront. It help a lot especially if you are on a tight budget.
I will soon implement other tips here and see what I can achieve.
Thank you,
Wyndell
Awesome article, though I never had problems with loading speed, these are useful tips!
Cole Stan last post: Anniversary Gifts For Men – Rock His World With These Romantic Gifts
Great article with useful tips on optimizing the wordpress for max spedd
dont you think you missed the “src” thing in the image code?
javascript codings can prevent people from seeing the code, but when the browser is about to execute it, it has to have a copy. People can simply disable Javascript or they may look in the browser cache files to see the source codes.
Tools gratis last post: ASCII – EBCDIC Converter
Much appreciated, my site was slowing down alot and being new to wordpress this article was a god send :)
Nice tips , i use the yslow plugin and wpcache to speed up my blog. I’ll try to implement the other tips you mentioned here too.
I’ve used W3 Total Cache but find that every now and then the caching causes the sites main page to become faulty so that it will not load in a browser.
So even though the site is faster, it sometimes won’t load at all. Not sure what to do. Anyone have any suggestions?
Great article by the way. I will particularly look at using multiple domains.
Maybe there’s a malfunction on your W3 cache, you could reinstall the plugin and follow the direction carefully.
Thanks a lot for sharing such a valuable info with us.
Highly appreciate it.
Cheers,
Togrul
Very useful tutorial, thank you!
adsl fpt last post: Tháng Vàng khuyến mại của FPT Telecom
Hi,
This is a nice post but I feel like there should be more good pictures or screenshots for better understanding. Please keep posting similar article & pictures.
Thanks!
Wow, Thats a great article and helped me to learn some good things about WP cache and website optimizing tools. Thank you verymuch.
These are great suggestions and take on added importance as Google adds “load time” to their search results criteria. Thx for the article, Richard
Richard Cummings last post: PHP- Convert Variable To Date
It’s a very good topic,I learn a lot of from it.thanks
the smush.it plugin was great it helped me improve my website performance like 50%! THANKS!
One of the only ones I’ve read so far that is straight-forward and seems to be on target. Thank you for posting! :).
anuj last post: How To Add Custom Style Box In Thesis Theme Without Any WordPress Plugin
Looks Great, Nice Insightful article…. I will digg this!
the methods i ever tried, is useful to optimize the wordpress blog.
Really these tips very useful to optimize the wordpress blog and content management.
Promotional pen last post: ECO Friendly Pens and Pencils Tick The Corporate Box
Really useful for optimizing blogs ,, will dsurely try it
out in my Blog on Google Api’s Mashup
Hi, thank you very much for this article, I’m going to try those tricks on my website asap.
Maybe one question, how do I find if our host has a CDN network?
Julo last post: Gennargentu National Park – mountains- canyons- forests- beaches and crystalline sea Sardinia- Italy
thanks for the great share. I have reviewed thoroughly your inputs for this post, and I found it very relevant.
robertpowell last post: Mobile Poker Games
Thanks for such a great tutorial, the main thing I learned(or remembered) is using the php issingle() function in wordpress
Any ways thanks
Nice tuts, love it :)
Fimadani last post: Orang-orang Yang Dido’akan Para Malaikat
This is one hell of a hing that we need to consider for a site to be successful..
this post rocks i liked it….
keep it up admin
sanjeev last post: cydia repo collection for all the cydia apps for iPhone,ipad and ipod touch
I so enjoyed every bit of this site
and I’ve bookmarked your blog to keep up with the new topics you will post in the future.
http://www.uggbest.org/
You also can use Google Code project to store Javascript and CSS files and it will make the speed improve a lot.
I am definitely more of a plugin kind of girl, although of course we need to be careful which plugins we use and make sure they are not the ones to slow us down to begin with.
What do you think about http://code.google.com/speed/pss/index.html?
Ana last post: Google Plus Social Network: Is It Worth its Salt and Your Time?
Do you have a chance of using Page Speed Service of Google, Ana?
I’ve signed up for this but still not receive any information. it might be another good service of Google.
I haven’t checked it out yet, Jenni – I am checking out Incapsula first since it helps both your speed and security. But this Google service sounds great. Surprised to hear they are not giving you access…
Ana last post: How to Build an Email List 101
This is good mate. I also know that a faster way to boost your wordpress
blog is to delete plugins that you don’t need. Don’t allow them to sit on
your dashboard, taking up space. Use the important plugins and your blog
would run faster.
Michael last post: Case Study: 9 Essential Lessons I’ve Learned From Copyblogger in 2011
Very informative post! Very well explained. Glad I stumbled to this post as I might need this. Thanks Jenni!
Optimizing WordPress is very important for every blogger. Thanks for your support.
Hi, this is very useful post and I think to try it to my blog.
Using lazy load? Hmmm I’m not sure if it really helps. Sometimes I find it very annoying when I scroll until the end of the page and the page hasn’t finished loading.
These are some serious tips for optimization. I am going to add flush and DB Cache plugins right away.
Nice blog. its really good tips for my blog’s speed. thank you for your valuable information.
#7 is bad advice. While it may make your site marginally faster, hardcoding the name and url of your site make it very inflexible. You’d have to manually find and replace every instance of this if you change the blog name or url.
A better solution would be to declare these as global functions in the functions.php file and then reference those.
I have installed W3 Total Cache, compressed/reduced image size and enabled GZIP. The result is my WordPress sites now load twice as fast as before! Thanks for the tips.
I am not aware how really fast my website. thanks for sharing this, now I know what to do.
very interesting and very good blog I use in my blog and I’ll try to improve with this
Thanks For info, It will work for my wordpress blog… Your blog rocks !
thanks for that article..its really helpful for optimizing a good wordpress blog..
Shubham Pandey last post: Micromax Q7 Price- Specification
Technically Amazon S3 is not a CDN – it’s Amazon Cloudfront. It is that service that sits on top of S3 that provides the edge servers in some strategic locations around the world. You can read all about it on the Cloudfront FAQ page
Good but still, nothing to compare in term of boost with http://blog.brigato.fr/2011/12/24/wordpress-performance-guide-from-5-to-6100-requestssec-on-a-1vcpu1gb-ram-vps/
I am using WP-Super Cache and DB Cache Reloaded FIX for the best performance. :)
Also enabling the gzip compression in Wp-Super cache will help you to reduce the server load
By The Way, Nice Article
very good blog and very interesting article in granayudad I will thank you for everything and greetings
thanks buddy nice tips.. I will try some tips, as my blog seems to be quite slow now, I already have tried many things, lets try some more :)
Ashish last post: Gmail Sign Up Means Google+ Sign Up
I am using Netfirm hosting and W3total cache plugin, dropbox as CDN for css and images but still my site loading time is worst. it varies in between 8-9 sec.. please tell me how can i decrease it?
Tushar last post: How to disable Automatic Rootkit Scan in Kaspersky Internet Security 2012 & Anti Virus 2012
Thanks for sharing actually I get my new website on WordPress but I don’t have much knowledge about it now I have enough information about it…!
Hi Rechard, We are the same, what is your website all about? Perhaps I could check it out.
Matt last post: Canon 70-200 F/2.8 L IS II Lens Review
There is lot of useful information here that I’ll start implementing in my blog. When a blog grows big, one can consider using CDN as it really makes great improvement in performance. It’s good to use the js library files from external source wherever it is possible.
George last post: Start With Your iPhone Application Development Career
I am using bluehost as my webhosting company that never give me a chance to drop any complaint against them.Secondly I am using W3 total cache plugin that clears my chache pages and let my blog to perform as faster as it can.However I was not aware of such lots of thing you mentioned in this article,thanks for sharing Jenni!:D
Bhavesh Sondagar last post: Google adsense is trying Closable ads
Thank you very much for your kind word, Bhavesh.
Thanks for such beautiful post really nice and informative.I am using some plugins to reduce css and image size in homepage and its working good. I think i need to give more deeper look to your article… anyways keep up doing good works ….cheers…
thanks a lot, I always depend on W3 Total Cache plugin to get these things done for me
Love the post! Its really well written, and a good starting point for anyone who wants to optimize their WordPress site. One thing I would add for anyone running WordPress on a Virtual Private Server is to install APC (Alternative PHP Cache) for a really nice speed boost. I lowered my page load times by three seconds by just installing APC.
Cheers!
These suggestions have been really valuable in reducing my blog speed a lot. I however did not have much success in combining javascript in single file. That is something that is still ranked low in pagespeed and pingdom stats. Which plugin would you recommend to do the best job regarding that?
Ya, I recommend using W3 total cache plugin at this time. It works perfect for me.
Indeed, optimization is a big part of online success of your blog. The more optimized your blog is, the greater chances of generating augmented traffic for your site. Wonderful post, thanks for sharing this information. Thanks!
Froyd last post: Tips in Investing with Best Gambling Affiliate Programs
Oh there is a very long list of things to do but if our site load faster than we will get benefit from it too.
Mohsin Ali last post: Giveaway Get Free Norton AntiVirus 2012 Product Keys
I tried everything like cache, cdn, optimize database, but still my site taking much time to load first time. Can u help me?
Your website is too slow? I think its speed is okey :)
Which one of these is best for a blog on Shared Hosting ? W3 Total Cache or W3 Super Cache ?
In my opinion, it’s “W3 Total Cache”
This is one long post, but with very useful information. I’ve been using wordpress for years now and there is no doubt I’m going to have to apply some of the stuff in your article to try to speed things up a bit. Thanks a lot!
Susanne last post: Discount Contact Lenses – 25% off Coupon + Free S/H
I think it is really important to have a fast homepage once aggain with the tendency to more mobile usage. Here I think it is really important to create the right wordpress template. Otherwise use all the tips in this article and everyone will be fine.
nick last post: Aktuelle iPhone Gerüchte
I’ve found Smush.it to be a life saver! Their plugin is extremely valuable. As far as caching plugins go, I’ve had mix results. In fact, for some of my sites, pingdom showed an increase load time after installing one of the more popular plugins. Social share buttons, ime, are the worst culprits. I’m testing replacing some of the buttons with images. So far so good.
That was some great tips. While I usually scale my pictures, I will definitely put constraints on them in the future. This is so simple and easy why not do it to speed up my site.
Nicole last post: Make Your Move
I believe it all starts with hosting… But this is a great list. You have many things I didn’t even think about.
You can also run the P3 Profiler plugin which will provide information on the performance of the plugins on your site. Then you can decide whether to deactivate the slowest plugins and / or replace them with alternatives available from the WordPress plugins directory.
Lorenzo last post: How to Take a Screenshot on an iPad Mini
Thanks Jenni R for such great article. From past few days, I have been working on improving site speed and couple of times my blog even crashed. But right now it’s working fast and I have used Page Speed from Google to analyze it which has shown good results. I’m really happy with the speed of my blog now and moreover the optimization was completely free .
Karen Walters last post: Adapt mobile friendly emails or provide bad experience to more than 50% of your email subscribers!
This is very useful information for me. thanks Jenni.
John Tralala last post: How To Make A Room Look Bigger Using Light
awesome…. how a professional thing….
Love this so much…
Thanks
Dian last post: Persiapan Menikah