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 speed up your wordpress site 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 can find more useful resources to speed up your WordPress website at “More resources” section.
More resources
- Best Practices for Speeding Up Your Web Site
- Web Performance Best Practices
- WordPress Caching: What’s the best Caching Plugin?
- 15 Ways to Optimize CSS and Reduce CSS File Size
- 11 Useful Tools To Check, Clean & Optimize Your CSS File
- Speed up WordPress, and clean it up too!
- 13 Great WordPress Speed Tips & Tricks for MAX Performance
- 38 ways to optimize and speed up your WordPress blog
- 30x Faster WP-Super Cache Site Speed
Have you ever been dissatisfied with your income? Don't waste your time any more, take the lessons I've learned in 3 years and start making your money online the right way now!
(Currently being sold on Amazon - Limited offer only for IntenseBlog's readers)
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.
Jay Philips last post: The Ultimate Roundup of Websites to Promote Your Design Articles For Free
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.
Prasenjit last post: Does Time of Publishing Your Posts Really Matter
Как в такую жару еще можно что то делать?
Молодцы было познавательно.
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.
ashish last post: Ranbir Kapoor- Katrina Kaif- Priyanka Chopra- Shahid Kapoor- World tour concert in 2011!
Well, just show your problem and I will do my best to help you.
Я ево хачу!!!
Полностью разделяю Ваше мнение. В этом что-то есть и это хорошая идея. Готов Вас поддержать.
Вы шутите?
Какая талантливая фраза
Вы не правы. Могу отстоять свою позицию. Пишите мне в PM, обсудим.
ННАдо надо
Я с Вами согласен. В этом что-то есть. Теперь стало всё ясно, благодарю за помощь в этом вопросе.
Вы не правы. Я уверен. Давайте обсудим это.
Какая фраза… супер, блестящая идея
Я извиняюсь, но, по-моему, Вы ошибаетесь. Могу отстоять свою позицию. Пишите мне в PM, поговорим.
Весьма ничего. Побольше бы таких постов.
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
Blog Experiments last post: W3 Total Cache Plugin
nice information
Very poverfull information.
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?
i use the yslow plugin and wpcache to speed up my blog. I’ll try to implement the other tips you mentioned here too.
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.
Harry Rate last post: How Much Deposit Do I Need For A Mortgage
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
Togrul last post: How to get more people to follow you on Twitter
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!
Kumudhan last post: Thiruttu Sirukki is Now “Thappu”
Wow, Thats a great article and helped me to learn some good things about WP cache and website optimizing tools. Thank you verymuch.
Navin last post: Update your PC Softwares with FileHippocom Update Checker
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!
Interrailer last post: Best Europe Beaches
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@webtricks 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 @ MarketMeSuite 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 @ Aweber autoresponder review 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 @Blast4Traffic 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