So my goals for the Redesign
- Small (the whole website)
- Fast (ties in with small)
- Automate all the things
- SEO friendly
- In some sort of source control
- CI (Continuous Integration)
- CD (Continuous Delivery)
Making the site small
I made use of SCSS, so everything gets compiled to 2 CSS files (
So I started with the basics, minnify-ing the CSS. This removes whitespace. I then ran through purgecss to remove duplicate rules and rules that aren't used in any of the HTML files. This means that the 96kbs of SCSS files that usually output to 67kbs now outputs 27kbs of CSS.
The Theme that I used html5up.net Strata, came with quite a few stock images. With the images that I added, my assets folder became quite large. So I stripped out the unused images, resized the images to suite what they were to be used for (one image was 3000px x 1000px and was only being displayed at 150px x 50px). I then ran those images through Kraken.io Image Optimizer and went from 12mb (37 files) to 30.9kbs (10 files). HUGE savings 💰
While creating the site, I used Font-Awesome 4.7. Which has an amazing set of 675 icons. I was using 4 of them. This meant that I was using 0.005% of the 1.03mb font file 🤦. After some Googling I found IcoMoon which allowed me to select the icons that I wanted, and download a significantly smaller font 19.35kbs which is 0.018% of the Font-Awesome 4.7 fonts.
Lastly I ran a somewhat pointless task that minifies HTML files. Basically it only removes whitespace. This turned my 14.9kb index.html file into 12.8kb mess that looks the same to your browser but looks horrendous to humans 😂.
Making the site fast
defer described very well here. So I went with
image not found
image not found
image not found
This function is called in
window.onload and simply adds the link tags to the document after the HTML has been parsed. This does mean that the page will render to the user with no styling. So I added a basic loader with all of the loader styles in a style tag in index.html and in
window.onload I remove the loader from the DOM.
Now the website loads the most important content first, and everything else later 👍
Automate all the things
I hate SEO. Different SEO test site give different results. Almost all of SEO standards are just guesses. Such as the optimal title length. Some sites will penalise your SEO score if your title is not between 50-60 chars, others require 64 - 78.
First thing to do is to head over to HeyMeta and fill in the required info to get some basic meta tags 😀. Second thing to work on is Lighthouse's Audit scores, which can be launched from Chrome DevTools (which I scored 100 in every audit except for the PWA, I will add the PWA part of the website later 😀). After that I worked my way through https://sitechecker.pro/ and https://suite.seotesteronline.com/seo-checker, trying to get my scores as high as possible.
Source Control & CI / CD
Originally I had the website in a public Github as I wanted to make use of CircleCI to automate the building and deploying of the site. However I struggled to get CircleCI to even install npm, even though I was using their demo/tutorials. So I moved on to Buddy which is an amazing tool. I got a "build" up and running in a few minutes using Gulp and the tasks I defined.
The only access I have to the Server where the website is running is through FTP. Unfortunately I could not get Buddy to connect via FTP to the Server and therefore could not use it for CD 😞.
So I switched over to using Azure DevOps (formerly VSTS). On Azure DevOps the site is "Built" (running all of the automation tasks using Gulp) and Deployed to the Server using FTP. The status of the last build and the last deployment is visible via these badges: