Technical SEO with SASS and custom Gutenberg Blocks
This started as a video project but became something very different.
Originally we were going to produce video headers to differentiate between the different business sectors the company worked in.
Their websites turned out to be in pretty bad shape and we ended up re-coding each of them into a single website, with sections for each business. We reduced load times from their original 17 seconds per site to under 4 for our single site.
This pre-dates This Video Works by a couple of years but I think of it partly as a cautionary tale, as well as didn’t we do a good job on the coding.
It’s well worth making sure your web site is up to the job before commissioning video, especially if it is to get you found!
We were asked to add functionality to a series of sites for a distributer of compressed air systems to enable them show video headers at full screen width.
When we looked at the sites, we discovered that they were hosted in the US and search engines told they were for a US not UK business, worse still they loaded in an average of 17 seconds and were getting a bounce rate sometimes as high as 100%.
The UK client and customer base weren’t that aware are as once in their cache, the sites loaded fine and the customer base was already loyal. What the client needed though was to grow that base and the existing sites clearly weren’t delivering. The client had though spent a fortune on them and wanted to keep the existing designs intact. Unfortunately, they also wanted the design functionality which had been achieved though layers of conflicting javascript, leading to the extremely slow load times.
The businesses were also conflicting with each other in search terms so we proposed a rebuild of the sites as a single site where the infrastructure was build to be fully optimised for technical SEO, including custom headers suited to any arrangement of video, sliders and graphics.
Our solution was to code a single site using the main business as prime domain and build sub sections within the site, each accessed via a specific domain managed via REGEX code. Because the different sectors each supply the same brands and products, the previous sites competed for traffic and SERP but now the overall company is promoted with the sub domains seen as part of a wider business.
The site itself we coded with WordPress Gutenberg blocks, creating custom Gutenberg blocks where necessary to create the same functionality and look without being penalised on speed and without the high risk of plugins causing conflicts as one or other becomes updated.
We used SASS extensively to manage functionality and also to make it easy to maintain a strong visual identity across one site containing six businesses.
We hosted the site initially and maintained in London on a corporate level server, with images delivered via Amazon’s CDN network.
Once complete, the entire site loaded in 4 seconds, and as the client adds new lighter graphics, this will be improved further.
The site was built for the client to be able to manage everything in house going forward, and they are now hosting themselves away from our server.
We have set everything up for them to add new content and using our technical base, optimise their content for SEO themselves.
While we created the code to hold the video headers, our producing the videos themselves, fell by the wayside due to the necessarily high programming budget .
