I’ve managed to improve my GTmetrix page speed and Ylow grades from the mid 70’s to 98% for Page Speed and 97% for YSlow with a page load time of only 1.18 seconds. Here’s a link to the report (if the link is dead feel free to re-run the test). In this post I’m going to outline my configuration so that anyone interested in replicating my results can save themselves some effort.
Here’s a screen shot of my grade after I’ve implemented the solutions that I’m about to outline in this post. If you’re still in doubt feel free to run the test yourself but be sure to use the secure URL at https://odinsql.com to avoid any redirection delay.
Does GTMetrics even matter?
If you’re wondering what value a high Page Speed and YSlow grade have, I can attest that the quicker page loads have dramatically improved the volume of traffic that Google and the other search engines are now sending my way which has resulted in more revenue. In short this article has huge Search Engine Optimization (SEO) implications as well as providing a better overall experience to the impatient hordes accessing your site.
So let’s get into how I’ve managed to pull off such a fantastic score and what you can do to duplicate my results.
In order to implement the methods that I’m about to outline you’re going to need fast, low latency hosting. If you’re using crappy shared hosting you’re going to need to replace it with at least a VPS with sold state drives (SSD). Two companies that fit the bill which I would recommend are RamNode and Vultr. RamNode is faster of the two but is slightly more expensive. If managing a VPS isn’t something you’re capable of, I would recommend checking out CloudWays. CloudWays adds server management on top of DigitalOcean, Amazon or Google’s “cloud”. You won’t be able to implement the image compression method that I outline with CloudWays but they do have great caching built into their software stack. If you have the traffic that would justify the expense you may even want to go all out and lease a dedicated server. Choopa.com which is the parent company of Vultr offers both managed and self managed dedicated servers. For the vast majority of WordPress sites a dedicated server would be a completely unnecessary expense.
The combination of Nginx and PHP-FPM is significantly faster and with lower memory requirements than Apache. (Yes, I know that you can configure PHP-FPM to work with Apache) Nginx is fast and works spectacularly under heavy load. If you want to greatly improve your sites performance while using the same hardware Nginx is going to be an essential component to making that happen. I’ve previously written about how I was able to configure a $10 per month virtual server to serve up 15,000 page views per minute using Nginx.
Combine and Minify
Having too many external files that need to be downloaded can slow down the rendering of you site greatly. I have several plugins that I use and It seems like every plugin has it’s own css and js include. Without combining and minify-ing I had around 15 CSS and JS files each. Ideally WordPpress would come up with a better solution that having every plugin add it’s own css and js include so that this whole combining and minify process wouldn’t even be necessary.
I spend the better part of a Sunday afternoon installing, testing, uninstalling and retesting a multitude of wordpress plugins that are supposed to combine and minify my css and js including “Better WordPress Minify”, “WP Super Minify”, “W3 Total Cache”, “Combine CSS”, “Combine JS”, “WP Optimize By xTraffic”, “Autoptimize” and “Speed Booster Pack”. Each plugin had dozens of positive reviews. Unfortunately the majority of them didn’t work nearly as well as was claimed. A couple performed well but the plugin that managed to improve my score the most and that I’m actually using and recommend was “Speed Booster Pack” it’s free and it actually works.
Images that are needlessly large in file size can take a really long time to download. Back in the mid 1990’s I used to have to painstakingly tweak image export settings for each any every image. Fortunately things are a lot simpler now. You can just upload your images and let a WordPress plugin losslessly compress your images without any manual intervention.
Up until a couple of weeks ago I had been using the SmooshIt plugin which would upload your images to a yahoo server which would then optimize and resize them before putting them in into your media library. Unfortunately yahoo has plans to discontinue this service and the plugin was nagging me about paying for a pro version, for some number of dollars that I can’t remember but wasn’t willing to spend per year. I opted to giving optimizing the images on my own server a try and found the CW Image Optimizer plugin. CW Image Optimizer requires that LittleUtils is installed on the server which is what is doing the actual image optimization on your own server instead of shipping them off some place else. Installing LittleUtils can be a bit of a pain it the but to install correctly. I’m happy with the results but I wish that there was a simpler installation method.
Once LittleUtils was installed I re optimized all of my images by using the regenerate thumbnails plugin.
Don’t make your server work harder than necessary. If your content doesn’t change every few seconds you should be implementing some form of caching. When a client makes a request to your site instead of looking up the data in the database or compiling your PHP it’s much, much faster to save a copy from when someone else made the same request to a file or in memory and server that version instead. Properly implementing a caching strategy can literally (not figuratively) improve your servers performance by 1000 times or more. My current caching configuration includes w3 Total Cache configured to use Memcached for caching queries and WordPress objects, OPCache configured in PHP-FPM and an Nginx proxy cache configured to cache pages to disk.
I’m only using a $10 VPS which doesn’t give me much memory to work with. If I had at least 2GB of ram I would configure Varnish to use memcached for the page cache.
Content Distribution Network (CDN)
For those of you not in the know, a content distribution network basically copies your static content such as your images, js, css, html and cached pages onto their servers that are closer to the people that are visiting your site than your own server and serves the copies instead of downloading the content from your server each time it’s requested. This results in your server being put under less load and your visitors downloading your content more quickly. Faster page loads equal happy users and happy users spend more time on your site resulting in you making more money. If for some reason you’re still not using a CDN head over to CloudFlare.com and sign up for a free account.
I’m actually using the $20 a month pro plan now but the free plan should have a positive impact for anyone that’s not currently using a CDN.
That’s it for this post. I hope that some one out there found some of this information at least mildly useful. If you think that I’ve left something out or would like me to go into more detail please leave a comment or send me a message via my contact form and let me know. If you would like to stay update regarding my blog posts please join my newsletter by entering your name and email address in the big black box on the right hand navigation menu.