Tutorial Details
- Program: WordPress
- Difficulty: Intermediate
- Estimated Completion Time: 60 minutes
Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlow score, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.
Before We Begin
A quick note before we start, although this tutorial will cover everything in as much detail as is required, there will (wherever possible) be shortcuts, to save you some time.
Step 1: Install the Necessary Components
Install a Caching Plugin: First off, whatever caching plugin you are using, switch it off NOW! Unless it is the mighty W3 Total cache, as that is what we will be working with here. (Ok, so that came on a bit strong, but I’ve used a lot of the caching plugins and W3 is my favorite. If you’re using another for any reason, that’s probably fine – we’ll move along with the W3 recommendation though.) Head over to your “Add new” plugins section within the WordPress, search “W3 Total Cache” download it, install it but don’t switch it on… well not yet anyway.
Install a Database Manager Plugin: Next you will need another plugin called “WP-DBmanager” again search and install this making sure you have no other database plugins installed.
Before we go ahead and start improving your site lets first see what were dealing with. Open up Google chrome or install it if you don’t have it already. Once you are in chrome install the ySlow plugin HERE once installed you will see a new icon in the top right of your screen. Click it. (Ensuring you are on the homepage of your site)
ySlow will then check your site, tell you what’s good, what’s bad and everything in between. We want to focus first on everything that is below a grade B. Below i will run through every W3 setting you need to improve your sites load time.
Step 2: Switch on W3 Total Cache
Once W3 Total Cache is switched on you will see a new sidebar tab called “Performance” click it. Now obviously we will run though all the different sections of W3 but to save you some time you could import the W3 settings file, bundled in the “source files” & jump to step 2C.
This is where all the settings for W3 sit. Let’s first look at the “General Settings”, you will want to tick the following boxes (to enable):
-
Page Cache (select “Disk: Enhanced” in the drop down) – Caching pages will reduce the response time of your site and increase the scale of your web server.
-
Minify (Select “Manual”, leave the other settings) – Minification can decrease file size of HTML, CSS, JS and feeds respectively by ~10% on average.
-
Do not tick Database cache (we will sort this later via a different method)
-
Object cache (select “Disk” in the drop down) – Object caching greatly increases performance for highly dynamic sites (that use the Object Cache API).
-
Browser Cache – Enable HTTP compression and add headers to reduce server load and decrease file load time.
-
Leave CDN, Varnish & cloudflare untouched. (again to do this quick upload the settings file included in the “source files” via the option at the bottom of the “General Settings”)
Step 2B: Get Cracking with Minify
Click the “Minify” tab/link at the top of the W3 panel/page. In the “HTML & XML” section make sure that the first three boxes are checked. Then click the “Help” button at the top.
Once this popover loads up you will be faced with a list of javascript files, followed by stylesheets that your site is linking to. Essentially we want to try and tick everything EXCEPT:
-
Jquery files
-
Google ads (or any ads for that matter)
-
Any stats.wordpress.js files (you will have these if you have jetpack installed
However for CSS you can pretty safely select all of them. Now this isn’t an exact science as this is minifying your theme files (Don’t worry it’s non destructive) and there are alot of different themes all employing a wide range of different files, plugins and functions. Basically preview your changes before submitting them.
Minify is one of the biggest improvements you will be integrating, once you have selected all your files (and done the same with every theme, if you are using more than one) then click “Apply & close”, directly followed by “Save all settings” (Deploy it if your site still looks/works the same).
Step 2C: Head Over to Browser Cache…
Once your in the “Browser Cache” tab/page you will need to change the “Expires header lifetime” to 691200 seconds. This will immediately boost your ySlow score.
Now head back to “General Settings” and click “empty all caches”, then go to your homepage and run the ySlow test again, you should see a nice improvement.
Step 3: Let’s get back to that pesky Database optimization
Below the “Performance” sidebar tab in the WordPress backend there should be another tab with the name “Database” (if not then go back and activate it).
Now this is very simple you need to do three things, backup, repair, optimize.
To backup click the “Backup DB” then at the bottom click “Backup” (Don’t worry about gzipping).
Next up we want to repair your database (just incase) so go to the “Repair DB” in the sidebar. Click the “Repair” button at the bottom.
Lastly, optimize it. Click the “Optimize DB” sidebar button & yep you’ve guessed it, click the “Optimize” button at the bottom.
To avoid this process again pop into the “DB Options” sidebar tab. At the bottom there will be an “Automatic Scheduling” section. Ensure that backups are done EVERY DAY (you can’t be too careful) then set it to optimize say every few days and repair once a week. Then save the changes.
Step 4: CSS Sprites
Now in ySlow you will probably have noticed in the “Make fewer HTTP requests” section a string of text that says something like “This page has 10 external background images. Try combining them with CSS sprites.”
Imagine the savings if all those little images could be just one image… It would sure speed things up. For this we are going to use a free tool called “Spriteme” so head on over to the site HERE (do so in a new tab though, again make sure your site is on the homepage).
Once you have both your homepage open in one tab and spriteme open in another drag the “SpriteMe” text onto the tab that has your site in it. A box will appear in the top right of the tab/window. You’ll want to click the “make sprite” button that resides within the “Suggested Sprites” box. Once it does it’s magic download the image it has created and upload it to somewhere on your site (preferably within the theme you are using).
Now click the “export CSS” button in the top right of the “SpriteMe” popover, copy & paste the css code it has given you ( that’s right ALL of it) directly into the bottom of your themes “style.css” or anywhere it is going to be used instead of the default code (as we don’t really want to overwrite the default theme code). You will need to ensure the second “background-image: url” is changed from “http://www.jaredhirsch.com” to where ever you saved the sprite image from earlier.
Once you have done this please once again “empty all caches” in the “Performance” sidebar tab.
Step 5: Optimize Those Images (compression)
For the most part i personally always use Photoshop to compress my images before uploading but for many of you this is not an option as you don’t have photoshop. So here i will assist you in how to decrease the file size of you images.
First off you will want to make sure any theme images are optimized and you can do this buy grabbing all of them and whacking them in this fantastic little app called “ImageOptim“
Once your theme images are nice an compressed you may want to look at plugins such as “Smush.it” for WordPress that will optimize images you may use in posts and the like.
Step 6: GZIP-APPAGE!!!
This is most certainly a crucial optimization technique. To enable PHP GZIP compression, edit the php.ini (example locations such as in /etc/ or /usr/local/lib) with any text editor such as vi, and locate the following directive:
zlib.output_compression
The default value is Off, change the setting to On to make the line looks like below:
zlib.output_compression = On
Restart Apache HTTPD server after the change. Every web pages produced by PHP will now be compressed before sending over Internet to the web browser to decode.
PHP also has a directive which can be used to adjust the compression level. To set the compress level, use the following line in php.ini, with valid values between 1 and 9, where 1 is least compress and 9 is most compress. Default compression level is 6, which provides the best compression without degrading server performance.
zlib.output_compression_level = 6
Previously, PHP compression is achieved by entering <?php ob_start(“ob_gzhandler”); ?> code at the beginning of each PHP scripts. The method is not recommended as each and every scripts have to be changed. zlib enabling in php.ini will apply to all PHP scripts on the web server without exclusion.
If it’s impossible to modify php.ini file, or does not have control over php.ini especially on a shared hosting, the PHP GZIP compression can also be setup via .htaccess file, typically located on the root of the website. To enable PHP GZIP compression via Zlib, just add the following line to the .htaccessfile. Note that each website has to be changed individually.
php_flag zlib.output_compression on
The disadvantage of enabling GZIP compression via PHP is that only web pages generated by PHP scripts will be compressed by GZIP encoding. All external CSS or JavaScript files will not be compressed. For the ability to enable GZIP compression on all file types, uses mod_deflate or mod_gzip on HTTPD web server instead.
Do check and verify that GZIP compression is running properly
Step 7: Tidbits
As we come towards the end of this tutorial i just want to run through a few last things. Now that your images have been crushed and sprites have been made you may want to clear both your browser cache and once more “empty all caches” in the “Performance” sidebar tab.
Now let’s head back, log out of WordPress load up your sites homepage and do a ySlow test. Again it should have risen, in the CDN section of ySlow you have the option to “Add as CDN” on some components. Doing this will boost your grade even further.
If you do want to properly add a dedicated CDN may i suggest you follow this TUTORIAL.
Now Fingers crossed you should be looking at a grade A test score and if you compare this with Google’s own page speed report test you will see a very healthy score.
One section of ySlow that i haven’t covered is the “Cookie free domain” which is when the browser makes a request for a static image and sends cookies together with the request, the server doesn’t have any use for those cookies. So they only create network traffic for no good reason. You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.
If your domain is www.example.org, you can host your static components onstatic.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.
Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies. On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the www subdomain and write the cookies to that subdomain.
I won’t go into this but the above should give you a fair idea. I will go over this in depth in a later tutorial. This does improve the score but it’s not completely essential.
Conclusion
These are the steps i take when building websites and they do a great deal of difference when it comes to improving the speed and allowing for fast response times. For those of you needing more info or that would like some help carrying out the procedures please comment below or send me a message via my author profile.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Matt Pilott
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Wptuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Awesome tutorial mate… Will help tons of people
btw – imattic can be optimized further, see this – http://gtmetrix.com/reports/imattic.com/MOorYRkC
It is really great to see results.
Page Speed Grade is (98%) – A
YSlow Grade is (95%) – A
Well optimized.
would this be fine with a theme that has buddypress/bbpress integrated?
Very nice tutorial will be testing it on my site directly
What a fantastic and concise tutorial. I have recently started using W3 Total Cache and used another database optimising plugin but it doesn’t have an automation function and I also use a separate plugin for database backups.
I will certainly give the above a try as one of the drawbacks of WP is that is can be quite slow in comparison with static html websites.
awesome tutorial for sure but there is also firefox addon and not only Chrome https://addons.mozilla.org/en-US/firefox/addon/yslow/
Hey, Good job buddy.
I prefer Google Page Speed to YSlow, got lot more options and suggestions for faster compression. The most important thing of all is that these things should be applied to a site only after complete development is done and there should be a quick ON/OFF switch to allow making changes to the theme or plugins anytime.
For a much more faster performance, various JS files can be merged together (in the order they should load) – same goes for CSS files as well.
thanks, a very great tuto….
muchas gracias….
Nice tutorial. YSlow can also be used with Firefox, using the firebug plugin
For the Gzip compression i use this at the top of header.php. For the gzip test i’d recommend this page: http://www.gidnetwork.com/tools/gzip-test.php.
‘pre’ code didnt go through the last post:
if (@extension_loaded(‘zlib’) && !headers_sent()) { ob_start(‘ob_gzhandler’); } ?>
Fantastic guide, i think that W3 Total Cache is fantastic for speed up your site! i’v writed article about this.. very helpfull! Great!
Hi, Is this also possible for internet explorer? I sometimes use chrome but when I use other, I want to have it working as well. Thanks!
Awesome article. I can’t wait to post my progress. Going to run tests before and after to check speeds.
@Kevin – great gzip compression tool
@Aghosh – Google Page Speed > YSlow imo as well
What a complete tutorial! Before reading this, I just one way to speed up website page load which is by installing w3 cache plugin.
so in the end no need to cache database? only backup/optimize/repair?
So you should optimize ALL tutsplus network!!! What are you waiting for?! =P
Thankyou! I needed something like this to help me with W3. It can be very overwhelming for a lot of users.
excellent work! i am curious though as to why you suggest disabling the database caching in w3c total cache?
also, it appears you can enable gzip w/ that plugin too.. under the browser cache tab. i had a lot of issues with using it to minify stuff, but that seems to be working now and w3c it totally kicking butt.
I only suggest leaving the db uncached because w3 says “Caching database objects decreases the response time of your site. Best used if object caching is not possible.” You may switch it on, however it may cause 502 gateway errors so to ensure this doesn’t happen i did not include it in the tutorial. It’s one of thos things you will need to test yourself.
Nice guide on speeding the wordpress powered sites
Nice tutorial Matt-thanks!
Earlier today I installed YSlow & have been looking at it’s results for my sites & how to fix these.
Just now I have stumbled across your tutorial here while checking for info re cookie free domains-good timing!
So far I have tried making a cacheable favicon but it hasn’t worked-hopefully I can sort this & cookie free domains & all the rest out soon!
Thanks & best wishes
Excellent tutorial. I’ve got a question regarding W3 Total Cache plugin. I read on a blog that if your traffic is not close to Mashable’s then you can use WP Super Cache plugin as using W3T won’t make big difference. Will these techniques have the same result with WP Super Cache?
I used to use super cache but you cannot manipulate it in the same way as W3 total cache thus you cannot yield the same results.
Hello,
I’m working as Performance Engineer in a huge company, and I somehow like and dislike this post.
Performance and optimization is good indeed, but performance isn’t about getting a high score on either ySlow, or Google Page Speed.
I can give an exact example, with a test that was performed around the Black Friday sale in US. The top 50 retailers was measured each 5 minutes by Google Page Speed.
The 2nd fastest site was Gap Inc. Direct, with a Document Complete on 1,104ms, and the score was 73.
The slowest site was Target Corp. it took 6,426ms but the score was 84.
There was also made a test on same 50 sites, for a full page load.
Again Gap Inc. Direct, had a full page load on 2,228ms same score: 73.
Target Corp. had the score on 84. But load time was 10,784ms.
All times above was the avg, based on the whole day.
So Measuring performance out from Google Page Speed and ySlow, doesn’t really give you a ‘real’ picture.. It only shows you if you followed best practice or not.. And often, Best Practice is not best practice for your website.
There is people that spend alot of $, getting a nice score in pagespeed and ySlow to ‘beat’ a competitor, and in the end, it shows up, that the competitors site is still twice as fast as yours.
That you should look on is the page-size (Which Page Speed does a little), those testing tools we have today, look on compression of js, css, and optimization, combining of images and other files.
But often the big problem with a page, even after optimization is too many resources, a lot of resources that could be removed, and especially, making non-blocking Javascript.. Making non-blocking javascript, is not linking the javascript in the footer, because actually it’s still blocking.. Not the rest of the page, but those multiple resources you have.
People say: You can combine files.
Yeah its true, you can combine them, but if you use jquery, and 10 jquery plugins on your site, and combine them, maybe you have a file on 150kb.. But you only use 1 of those jquery plugins, or no jquery plugin at all on the frontpage, or contact page etc. So lets say you can actually save 55kb with splitting up your files again.
But the problem is then, you have multiple files again.. Yep, but link each file on the page you need it on, and make all javascript files load after dom-load, and make them async downloading.
I have a good bunch of tips about optimization, but this is a comment, so I will end it now. Contact me on lucas (a) slcoding (dot) com if you have any questions, or disagree.
Hi Lucas, thanks for your points! You’re quite right, PageSpeed is only one aspect of performance. In fact, it’s really only how your site performs within the browser. The other side of performance is on the server.
I suspect this is where a lot of the difference occurred between Gap and Target. One was faster to respond to the first request but performed more poorly within the browser than the other.
All aspects of performance should be considered for your website, and the tips we’ve listed are only some of them.
Hi Japh Thomson,
Indeed Page Speed is about front-end optimization, because we can’t really measure backend performance without having some server administration skills or use a tool like new relic. Which doesn’t give a lot anyway.
I do mostly front-end optimization, because it’s normally the biggest issue when you have a website, and you can really win a lot time.
You can do some very basic optimization using W3 Total Cache and some of the other tools listed above, but especially W3 Total Cache is a really powerful tool if you know how to use it right, and people also need to understand why things can break, and that should be pointed out too.
I am just starting to use WordPress for my news feeds and looking into expanding my knowledge so I can start to build full sites. I have been spending a lot of time looking through this site and reading article after article soaking up as much information as possible. I love articles like this because it gives me a standard to work from. The speed of a site is a very important part of my work and I found this tutorial very detailed and will be a great resource for me in the future when it comes to me developing full sites in WordPress.
Hey Matt, thanks for putting together a great article!
It’s helpful to have such a detailed overview since WordPress is such a large ecosystem. Obviously these principles apply to just about any website – we all really should take performance seriously, especially since Google now includes performance in their search ranking!
I’ve had issues over the years really refining sites and, as a developer, keeping my client’s sites running at peak performance. It’s not an easy task. So, I built something that helps do what tools like YSlow do, but for your entire site. It does a full site analysis across every page showing you how engines like Google and Bing see your site from a keyword and keyword phrase perspective. It also shows you each SEO violation and performance issue and helps you understand how and where to fix it. I now use it for all my client’s sites – http://www.pagelabs.com/ – I’d love to hear your feedback on it.
My team also just released our Fusion Proxy that speeds website by doing many of the fixes you listed above for you automatically! Thanks for the look, Matt, and fantastic article!
Yeah cracking site, a few issues though the first was that i was unable to enter a live.co.uk email and the second was it found issues with all of my css and javascript. would i need to switch of caching to run this. And have you heard of http://tools.pingdom.com ?
When you say go to the browser cache of the performance tab, to set the expires header lifetime amoutn to 691200. There’s an expires header for CSS & JS, HTML & XML, and Media & Other Files. Do we do all three or just one? Which one?
Anywhere you see an option for expires header set it to that 691200 Its around a week.
Not bad… But you can get a lot more out of w3 total cache by using memcached at the back and varnish at the front. WordPress is capable of serving 1000s request a second if tuned correctly.. http://www.dotvelocity.com/wordpress
Indeed memcached looks awesome but i refrain from using varnish because i’m constantly developing on iMattic however if you don’t update your site too often then yeah varnish is a great tool to implement
This article is insanely usefull, thanks a lot !
it works! thanks:D
While installing W3 Total Cache I have two error messases
1 – “It appears Page Cache URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.”
2 – “It appears Minify URL rewriting is not working. If using apache, verify that the server configuration allows .htaccess or if using nginx verify all configuration files are included in the configuration.
”
First is solved changind Page Cache Method from Disk Enhanced to Disk basic.
The second disk is unsolved so far.
Any help?
Using Disk Basic instead of Disk Enchanced will hurt my performance?
Great article, thanks
If you turn off rewrite URL structure under the minify tab, it should clear the minify issue. I’m not sure why these are there, but I’m living with the page cache issue because enhanced seems so much faster than basic.
I checked my php.ini and my output_compression is set to “off”. However, if I check gzip compression using the tools linked here it says that it is.
Should I still set it to “on” in php.ini?
thanks a lot, I love the plugin W3 Total Cache
Thanks for this great tutorial, your steps are really clear and super easy to follow. Results immediately after the first couple of steps!
BTW I’m just starting on the DB Manager part and got an error (MYSQL path does NOT exist. Please check your mysql path under DB Options. If uncertain, contact your server administrator) — do you know that one?
Thanks so much for this. Wish there were more tutorials and people like you who actually help!! My site now actually loads up fast compared to the minutes I had to wait before.
Thanks once again!!!!
incredible tutorial.. and saw the results immediately even though some of it lost me!! not your fault.. your explanation was great.. just too late and not even brain cells firing!! I did get a weird message though on the wp-dbmanager.. which now says at the top of my page..
Your backup folder MIGHT be visible to the public
To correct this issue, move the .htaccess file from wp-content/plugins/wp-dbmanager to …….
I ony found a file called htaccess.txt and was not sure if that was the correct one to move. ? would like advice on that if possible. thanks again
I have just tried it on one of my site and i can see the result. I have used the CDN with amazon cloud before with the wp- supercache plugin to pull the wp-content from amazon and it didnt work very well. Welll thanks for the information.
Im having trouble backing up, mysqldump missing or something, any idea?
I have tried to activate W3 total cache however I’m getting depreciated error. Unable to deploy it