I have the need, the need for speed!
Everyone wants the the fastest loading site they can possibly get, the best bang for buck as they say. But when does chasing the 100/100 on a website speed test page border on becoming a bad case of OCD over a minor tweak that can shave off a 10th of a second.
Well let’s take our own site for example: Pretty Good result, so how did we get there, and how to take it to the next level and can we actually reach the 100/100 without actually increasing the page load time? Before you say “what?” Yes you can have a high score but actually a longer load time. Ideally any page should load in less that 2 seconds and the sub 1 second mark is the holy grail and we are 0.1 seconds over that!
But before we go into how we can possibly try and tweak the page some more lets look how we got to this point. please note this section isn’t and in-depth guide but a quick insight into some of the things we did to get us the score in the above image, we will be doing a full in-depth guide very soon.
Ok even with the #1 selling WordPress theme “Avada” Most “FrameWork” style themes such as DIVI, X Theme and Avada as example all carry some bloat and take a bit of trimming down. We wanted a fast loading front page, after all whats the point in offering site optimisation as a service if you can’t optimise your own site!
So there were a few things we decided upfront, we were going to use a standard font rather than some of the awesome google fonts that “Avada” makes it so easy to use, why? well by doing so we nailed two issues right off the bat, less http requests, we can cache the font or use one that’s commonly installed on most devices so wont need downloading from our site or being pulled from google. we can set an expires header on it, just these few things for one font actually gave us a boost of 11 points on The Expires Headers section in our YSlow score on GT Metrix.
Next up Images, they can make or break a sites loading time even if cached or served via a CDN. We wanted two large images on our front page as backgrounds but which also conveyed the message we are trying to put across about us (“Teamwork and Synergy”) the problem is that unless you are careful large images still take time to download no matter where you store them. So we took the images optimised them in our trusty Photoshop after editing the images so they looked fine when scaled up. Then used colours in background elements on the page that offset some of the inevitable pixellation that comes with heavily optimised images especially when they are enlarged on the site. The top grey image for example 960*591 pixels and just 18kb! The group of people in the office 960*657 71kb (the largest file sized component on the page). If you want images choose ones that Scale up well and don’t look bad when resized.
Another tip, keep popups / contact forms off the front page, use a CTA (Call to Action) Button linking to a contact form, less CSS, Less JS etc to load on the front page! These are the first steps we took to get us to the 92% / 95% score on the front end, the rest was back behind the scenes. things like ensuring GZIP Compression is enabled, setting up browser caching correctly (Tip google etc likes things to expire at a minimum of 7 days) If your content for example image wise is pretty much static and wont change much then you can set it as long as you want. All this can be done manually or you can use plugins that help you, some hosts come with inbuilt optimisations for WordPress, we Host on Siteground and use one of their Cloud Server Packages as we also host some client sites on it. Hosting is a critical part of your Website, it doesnt matter if its WordPress, Joomla, a highly custom PHP build or just plain old HTML, at the moment we use Siteground and Pantheon to host clients, we will be doing an article about them soon.
Ok here we are 1.1 seconds load time Double A rated 92%/95% we should be happy right? Yeah well there’s always that little voice saying “You can do better, you know you can!”
The first thing we did was to take a look at some of the image settings in Avada especially the logo, by simply removing the the “Retina” Versions of the logo in the settings we reduced the page size to 425kb and boosted the PageSpeed score to 93% and our Page Loading time is now showing 0.9s. So are we at that healthy stage still or do we try and fine tune it even more ? with the content (images) as close to perfect without sacrificing quality we are left with two issues we can work on without that big rethink / change we mentioned earlier.
Ok over to the YSlow tab and we Have two items that need our attention.
I am going to leave the Use Cookie Free domains until last, they are a low priority but we have a fail grade on them, and to fix this we need to take a look at our whole optimisation and content delivery plan. So our focus now is the Make fewer HTTP requests, simply put the less requests needed to deliver a page to a visitor means the page will load faster, now this is one that a lot of people don’t like working on as it can break styling page displays etc. Fortunately one of my favourite tools “HummingBird” By WPMU DEV can handle both of these for us and has a nice visual interface and we can instantly roll back changes with a click of a single button.
So after combining all CSS and JS in Hummingbird and moving as many of them to the footer without breaking the site we got this result! Not 100’s we know, but most importantly we have reached our goal of the sub one second first visit page load on a first visit and that included a small bump in file size as we moved some files from memory cache to disk cache so we could combine them.
Now what’s left to do well now we come to the do we carry on obsessively because we have now managed to boost YSlow to 98% we have now only have a D grade in Use Cookie Free Domains and in the Page Speed test we have the few files we couldn’t move without breaking the layout or some template code changes.
We decided to call it a day here, why? When things are this finely tuned it eventually becomes a case of diminishing returns the amount of work needed for an increase in performance becomes heavier and heavier and editing template files means you need to be careful when updating themes etc. What works now may not work a few versions down the road.
Now for that YSlow issue we have been sidestepping to now. we have 8 images and two js files that aren’t cookie free so in effect there is a tiny amount of extra traffic (loading time) needed when generating the page the very first time someone visits our site, after that the point is null as they will be seeing a cached version so the repeat visit when we checked is now just a fraction over half a second to load the page. To fix this one relatively small issue would need a completely new approach to the site optimisation and here’s the reason why.
We use Cloudflare and their inbuilt security always adds a cookie to any asset, so even if we fixed it we would need to stop using CloudFlare and move to an alternative solution, we would need to change the caching setup we use at Siteground, a different Caching Plugin, we would need to create sub domains that we could use to deliver content without cookies (no real difficulty in that just create them and add them into the wp-config.php), So now we are looking at more time, more investment to go lower than 0.8 seconds!
But for those that are power tweakers (wow that sounds bad but ya know what I mean) or just want to set the world on fire with blazingly fast load times here is how we would have tried to approach it.
Step 1. Create a sub domain pointing to the WP Contents folder to use as a cookie free domain for example static.aceshigh.club
Add the following to our wp-config.php file (just replace yourwebsite.com with your domain name) we added it just above the Happy blogging comment.
This just ensures any content served from the “static.yourwebsite.com” is free from cookies and that little bit of extra traffic that YSlow hates so much!
Step 2. Deactivate CloudFlare so we dont run into any cookie issues with them.
Step 3. Use a WordPress caching plugin such as W3 Total Cache that can link into some of the SiteGround Caching features like memcached and the php 7 object caching they offer.
Step 4. Sign up for a CDN such as MAX CDN and set it up within W3TC so that your css, js and content is delivered that way rather than the original approach using cloudflare.
Give it a test and see how you go; like I said it’s a different approach and may or may not shave a tenth of a second off. when compared to our original plan that uses Siteground’s in built caching, CloudFlare and one additional plugin with no edits anywhere!
One final point to make is that the four major speed test sites and HummingBird all give slightly different results lets look at them, we chose test sites as close together as possible which were available in all test site pages.
And We knocked it out of the park with Google PageSpeed Insights
Feel Free to comment below and let us know how you have done your optimization or share tips with anyone else!
Catch you all in the next post!