Let’s make the WordPress faster
As many of you already know about 2 years ago Google lunched a project called “Let’s make the web faster”. Today we will talk about the same thing only for WordPress. The popular term “size does matter” is in full swing when it comes to WordPress site speed and to all other non-WordPress sites as well, however in this case we need to size-down quite a bit to achieve best possible performance.
Best (better) practice to increase WordPress site speed
It’s no secret that anything we need there will be a plugin for that right? Well true in most scenarios this is definitely way to go, I for one would almost always recommend a plugin -vs hand coding. There are few available plugins that will increase your site speed and sure you are always free to use any of them.
Speaking from my personal experience only and managing many WordPress sites for my clients on monthly basis I can say that plugins for this are one heck of a tool, but I needed more results and faster page speed. (yes even beyond that)
What I did not want was:
- No static content at any time
- No block to search engine crawlers
To explain. If you are running a business or just a Blog it doesn’t matter, you need things to be fast correct? Meaning that when visitor comes to your site everything needs to open fast and without any hesitations. At the same time you also need the search engine visibility too, not to mention much needed dynamic content that gets updated in real-time. Honestly, years ago I switched to WordPress just because it’s not static. Static pages can also delay crawlers, when crawlers are delayed our information is sent to search engines slower as well.
All right enough of this, show us how
Patients is a virtue my friend, Wait, No! That does not apply here, carry on. Little while ago I switched my hosting provider and I haven’t pushed all I had before, but it will be great start for you. First let me show you something, both image are the latest performance tests, one generate without modifications and another one with (minute difference between two reports).
Old Report
New Report
And this was achieved without any plugins, nothing touched in codes, not even a slight PHP changes and still huge jump in above numbers and overall site performance. As you can see is that YSlow grades this site with 90% and clean A, while Page Speed is at 87% and B. See old report and here is the new report. Sure this can and it will be better once I find more spare time to play with and I will make updates too.
.htaccess time
Simply open your .htaccess and paste this in.
Header unset Pragma
FileETag None
Header unset ETag
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary Accept-Encoding
</FilesMatch>
</IfModule>
<FilesMatch "\.(gif|jpg|jpeg|png|ico)$">
ExpiresActive On
ExpiresDefault "access plus 1 month"
</FilesMatch>
<FilesMatch "\.(css|js|html?|xml|txt)$">
ExpiresActive On
ExpiresDefault "access plus 1 week"
</FilesMatch>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:
<Files *.html>
SetOutputFilter DEFLATE
</Files>
And also http://pastebin.com/7154etKR in case that above does not copy right.
Now the very last I did was minified the css, while keeping my original CSS in style-dev.css for easier management. So that my friends is how we can increase the speed of our WordPress sites. Below you will find more resources and great tools to improve your site performance as well. All you need is GTmetrix for the start and ask me anything you didn’t understand or that needs more explaining.
Resources:
- Let’s make the web faster (articles/tutorials)
- WordPress Optimization/Caching
- GTmetrix
- Using site speed in web search ranking (older article from Webmaster Central Blog)
- Why Marketers Must Care About Site Speed (Search Engine Watch)
WordPress Theme Development & Graphic Design. Husband & Father of one. I am also WordPress Theme Review Team member.
You can (and should) also use CloudFlare, a free CDN that protect your website and makes it faster.
You can put some plugins off because of the security CloudFlare gives, what will also helps.
There is also minify JS and HTML (i edit theme files to not have a single space on it) and ofc, less database/PHP queries.
For exemple in themes we have the wordpress function that call the website’s name for h1 header and the website’s description. Since that won’t change, it’s a static resource. We can easily save one query by editing the theme’s header.php and putting our own website’s name there, saving one querie.
There is also a lot more queries we can save, like footer.php ones and even sidebar.php ones (after a while you won’t add more categories to your website, so you can just put a static list of them there… saving one more query).
I decreased my website’s queries from 109 to 33 (according to GTmetrix), what makes it load in about 3 seconds on the first view, and 0.2 seconds on second view (cause of CloudFlare). 33 is still high… working on it
We can make a faster internet. Let’s do it xD
Hey Julian,
Thank you for your input, as always it’s very much appreciated. I heard about CloudFlare, but I never tried them. What I have in .htaccess is the bare minimum any webmaster/site owner should do and if they want to do even more CDNs are way to go. +1 goes to CloudFlare because it’s cheap or free if you are not running a high-traffic site and usually they’re costly. Good find and thanks for the share!
Emil
Good call on the cloudflare, i’ve been looking at it for a bit, going to hopefully get it set up soon, i’m still shocked they have a free version.
Also big thanks to Emil for this one, great stuff. – Just ran Yslow on my site, looks like I have a bit of work to do!
I actually had CloudFlare for few days just to check and compare. Great service no doubt about it, however performance wise .htaccess and other mods were little better and best of all no content cache. For SEO and real-time updates in general I did not like static content at all.
I tryed the to add the PHP to my functions.php but did not worked T_T
Weird, I am running my Shell with Child Theme of course and this is the only thing that I have in /child-theme/functions.php
< ?php
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
?>
Also see http://stackoverflow.com/questions/2514079/wordpress-problem-with-wp-enqueue-script/2515684#2515684
Will give it a try again… let’s see what happens.
Just gave the .htaccess tweek a go and it made a really good improvement to my page load time. Cheers for that, hadn’t seen it anywhere before.
With just that and a wpconfig tweek (mentioned here: http://wordpressconsultant.net/2011/08/top-3-tricks-to-speed-up-wordpress/) my site went from a page load time of 1.76 and grade C (78%) to 1.35 and grade B (81%)! Great to see such simple changes making a big difference.
The only issue I have though is that on my local version (using WAMP) the htaccess tweak I get “Internal Server Error – The server encountered an internal error or misconfiguration and was unable to complete your request.” Has anyone got any thoughts what I can do to get WAMP working with this?
Cheers.
N
Hi Nigel and thanks for your comments and nice words about this tutorial,
Few things come in mind when errors such as yours are mentioned, just make sure that WAMP is with “enable mod-rewrite” if this does not work simply go ahead and check your error log where last 10 lines will usually have an answer to this. “Internal Server Error” is so called Error 500.
Emil
I just want to add that with this tutorial plugins are not needed. As it was described above, my plan was to keep the content dynamic for the sake of Search Engines and my own personal preference.
Thanks Emil,
That’s an excellent article and discussion. I am currently using W3C Cache Plugin. I am thinking to use CloudFlare after reading this useful article.
You are very welcome. With this tutorial W3C or CloudFlare is not necessary.
Cheers,
Emil
Yes Emil,
You are absolutely right. It is no doubt, i have learned a lot regarding to speed of page loading after reading your article. I am still working on other aspects to make my blogs more speedy.
Waiting for some more useful and informative stuff from you.
Thanks Emil.
Take Care
Thanks Qamar I appreciate that.
You know what I find funny? I came here through the keyword “how to speed up wordpress”, along with a few of the other top sites in the serps, and half of them don’t even have very fast websites. One of them took 10+ seconds, two took 5+ seconds. You’d think they’d do something about it to be honest lol.
Anyway, I use WP Super Cache instead of W3 Total Cache as it’s easier to use. You should also use plugins that merge stray js files together, and CSS together to lower the amount of processes needed to be run.
I wish there were a plugin for multi-sites though, as I run those plugins on all 7 of my blogs, all hosted on the same server, and let em tell you, it’s a huge strain.
No need to use a plugin to speed up your site
Just follow my instructions above and you’ll be all right!
Below is the original content of my .htaccess file. I tried different ways to paste your code and all of them gave me errors. Where do I paste the code exactly?
# BEGIN WordPress
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress
Hi,
Paste the codes below # END WordPress or above, it’s completely up to you. I usually paste new stuff on the end.
Emil
Thanks a lot Emil.
After pasting your code in htaccess file my webpage actually jumps from C D to B C, much faster. Amazing
I also carried on some further steps from here http://gtmetrix.com/wordpress-optimization-guide.html, to install and setup the W3 Total Cache and WP Smush.it
Is it overlapped ? or it still helps ?
Thanks
Glad to help! As far as the caching plugin I don’t think that this would be necessary, that’s why this post was made on the first place and it will not overload shared servers as well. I never used Smush.it. Since there are not posts on ThemeID, at least no so many images, I am using ImageOptim for Mac and here are some alternatives in case that you’re using something else http://alternativeto.net/software/imageoptim/
Cheers,
Emil
Emil
I have some troubles with my hosting provider because they said that my WP is consumig a lot of resources, I don’t have idea about what is wrong with my .httaccess
Could you give you mail and a quitation for check my .httaccess and check my wp loading time?
Regards
Hi Jose,
WordPress should not consume lots of resources, what you have is most likely one of the “bad” hosting providers where they always* blame their issues on the software, in this case WordPress. I had the same issue with HostGator while ago, VPS and shared hosting. What I would recommend is to switch your ISP with i.e. http://dreamhost.com. DreamHost has always special promotions where you can host a site for literally $30* for first year and about $119 each year after. Theme ID is currently with them and we have nothing but good things to say. As you can see everything loads fast and without any issues whatsoever.
You can also use THEMEID and get $87 off for the first year. and host for entire year for as low as $30* I am not promoting them, only giving you good discount over our partner program with them, which is currently cheaper than their current promo
Me looking at your .htaccess will not change anything nor speed things up unfortunately. You’re more than welcome to e-mail me with your .htaccess content and I will happily check.
Cheers,
Emil
Do you have a update for this tut?
No update needed Bojan, that’s pretty much it. Still works the same as it was when it was released. We’re using that on this site as well.
Cheers,
Emil Uzelac
I use your code for my .htaccess and nothing happens.
This is my GTmetrix: http://bit.ly/vZ7Un2
This is my CPU load:
http://i42.tinypic.com/1eoxmu.jpg
I use plugin: Head Cleaner, WP Smush.it and WP Super Cache…
Could you help me?
Hi,
Did you check GTMetrix before .htaccess modifications and compare to this? and also what about other stuff. Unfortunately there’s more than just solo .htaccess changes.
If you’re using WP-Super-Cache or any other similar plugins this will not work properly, it has to be either or and I’ve notice that you’re.
There’s also page 2 of the tutorial http://themeid.com/how-to-speed-up-wordpress-sites/2/
Here is my old GTMetrix:
http://gtmetrix.com/reports/themeid.com/i4BzWJR3
and the latest one:
http://gtmetrix.com/reports/themeid.com/hUvU7vxT
Cheers,
Emil
from D to B , thank you