Polishing a Turd

TL;DR

tl;dr – You can’t polish a turd, if a site has been built with an off-the-shelf theme with no consideration for optimisation, performance and accessibility with images as large as 2mb thrown on it you’re fighting a losing battle.

Introduction

We inherited a site off a web design agency in Warrington. The client contacted us with a view to moving their services to us. This is common practice and we came to an arrangement with the client.

The ‘old agency’ charged the client a fee to pack the site up and send it across to us. We threw it on our development server to do a couple of checks and BANG – malware. We don’t doubt this malware was unintentional/unknown this is just the downside to plugin smashing.

Stage 1 – Clean up and benchmark

The offending plugin was removed, database and rogue files cleaned up and we were ready to benchmark the site. Chances are if you’ve got this deep into our site you know what we stand for and our beliefs surrounding the web if not, visit our ethics page but essentially – big bulky sites are bad. The benchmark was conducted, as the site came to us ( with a CDN enabled) and we got a performance score of… 17.

• 

• 

Now I know what you’re thinking 17 is baaaaad, and you’d be right. However, there’s agencies in Warrington with mobile performance scores in single figures. Running multiple versions of javascript libraries with well-known vulnerabilities.

Stage 2 – The Basics

So a Content Delivery Network was already enabled here, but that would have been our first goto. Moving forward the site was assessed, littered with plugins and a visual page builder (urgh). The unused plugins were stripped out along with 2 of the 3 versions of jQuery loaded. Finally, we started looking at image sizes, some of the images were huge and there were multiple versions of each image, I tried to gauge which version was actually being used and opted to only optimise those ( I’d given myself 1 hour to do the best I could with this site).

After the basics were completed, cache was flushed and a new benchmark taken:

Thirty-Five this time. Still awful but a 100% improvement on what we were given. If we were a social media agency we’d be bragging rotten about our 100% improvement on figure for our client, BOSH!

I was gutted to be honest, I thought I would have crept into the amber with these improvements but the images, unneeded plugins (one for the menu which was loaded everywhere, obviously) and the page builder were just hamstringing the site. The total download size of the homepage was 3.5mb with a page load time of 5.9s. A page this inefficient produces over 2 grams of CO2 per visit.

I gave up.

New Task – Rebuild

So the client was happy with the current site, it was visual and it did the job they wanted. There were some glaring errors on the site we pointed out on audit ( links going to the wrong pages or copy duplicated) but in all, simple fixes and he had a site that we twice as efficient as it was 2 hours before. This wasn’t good enough for me though. We pride ourselves on all of our newer sites and clients being as energy efficient as possible, as agencies we really need to take responsibility for what we’re putting on the internet. Therefore the site needed rebuilding. A checklist was formulated, the site was only allowed to be equally as aesthetically pleasing or more so. The site had to be green in all areas of google page speed analyser, accessibility is equally as important as performance, and the content on the site was going to increase also.

WordPress, WordPress, WordPress
On the face of things in ‘normal’ use, WordPress isn’t the most efficient CMS on the web. It powers a vast amount of the internet and is flavour of choice for most 1 person web agencies. As a result there’s a huge market for themes and plugins which are built with one thing in mind, ease of use.

Building a WordPress site with a load of plugins and a theme that costs anything from free to £80 is easy, you’ll get something looking pretty nice but running like a dog within a week.

However, if you know what you’re doing with the internet, educated and versed in some of the basic languages you can get WordPress whistling any tune you like. There’s some super talented guys out there running WordPress sites at 6/7kb! ( granted there’s no real design to them but they’re beautiful in their own way).

I digress.

The new suite was built with no theme, using only Gutenberg, the new editor shipped with WordPress (the negative reviews you see? That’s agencies who can only use visual composer…) all of the images were optimised, sized correctly, given alt tags and served in the correct formats.

No longer is Font Awesome loaded, the social media icons are now SVGs. Dashicons are disabled front end now, granted that makes the front end look a bit garbled to an admin but nobody needs to be logged in to view the site (you’d have never known this unless I told you, so you don’t need dashicons!)

The new site is fully accessible, we had to tweak the colours a little on the site, the previous agencies had used white text on magenta background – failing all accessibility tests. The menu has the same effect it did but is now 100% CSS. There is more movement and interaction/flare on the site now but most importantly… the impact each page visit has on the environment is SIGNIFICANTLY LESS.

Real world scores

The Performance score is now 99, with deviation this will hit 100 frequently, there’s a niggle with the google font, Lato, loading, and unfortunately jQuery is still used on WordPress. I’ll redress this and make it permanently 100 but this challenge was strictly 1 working day ( 7 hours max with breaks and lunch).

A page visit now produces 0.18 grams of CO2 in comparison to over 2 grams, less than 10% of where it was at. The total download of the site is now less than 306kb! The site is image heavy, there is a lightbox on there, there’s animated menu and number counters. Page load speed is under 2 seconds, having a positive impact on rankings and bounce rate.

In summary

Sites need to be built with a few things in mind, accessibility and performance need to be the forefront of any site. Some agencies will engage in a race to the bottom when it comes to price, we can’t and won’t do this, simple.

If that’s what you’re basing your purchasing decision on, we’re not a good fit agency for you.

We BUILD website, we don’t put them together like lego.

We have a responsibility to the environment and to you as a client to build efficient, clean, performant and beautiful sites. If we inherit a site hopefully its been built with consideration (although unless there have been some unfortunate circumstances, why would you leave that agency?) If it hasn’t we’ll do our best but don’t be surprised if we come back to you with the figures and evidence about how and why a rebuild may be the cheapest way forward, financially and environmentally.

If you’d like to know more about what we do differently as an agency, how we’re offsetting all of our carbon to be in a carbon positive situation or how awesome our coffee is, fire me an email on jc@codeandcreate.co.uk or give us a call at 01925 550555.

If you stuck with this post this long, thank you – your attention is appreciated.