The New Optimising Website
Posted on January 01, 2014
It's been a long time in the works, but the new Optimising website has finally been launched!
Here we will get right into the technical details of how this website is put together.
Before starting, we had a few requirements for the new website:
- Very Fast
- Easy to update
- Use latest technologies
- Showcase our clients and team
- Search engine friendly
And we feel we have ticked every box.
The website is built as completely static. This means that there is a single HTML file for each page of the website. Thankfully, with the help of a static site generator (we use Jekyll), this becomes an easy task.
You should notice after you visit the first page (and cache the base website elements), the website is nearly instant to navigate through.
On top of this, the entire website is stored on Amazon's CloudFront CDN (Content Distribution Network). This means that if you access the website from anywhere in the world, it will be downloaded at the highest speed possible from your closest server.
With the lack of a database and server, there is no need to worry about updating WordPress or plugins ever again.
When it comes time to writing new pages and blog posts, they are written in Markdown. It's a neat little syntax that makes writing content a joy, and not having to worry about HTML tags. It also makes the website content super portable if we need to move it elsewhere in future.
Once we have finished any updates, thanks to Yeoman/Grunt, we just need to run one command to push the entire website back to the CDN.
Since this is a static website, there is no server or database behind the scenes. This immediately eliminates basically any of the usual 'hacking' attempts that you would see with WordPress.
We also load all of our website over SSL (see that neat little green icon in your URL bar?). This means that all data transferred between the website and your computer is encrypted to prevent eavesdropping along the way.
Our website is built as 'mobile first' on the Zurb Foundation library. It's always a close toss up between Zurb's Foundation and Twitter's Bootstrap, but we like using Foundation.
As well as what we have already mentioned, there's a few other bits and pieces that help keep this website organised such as Yeoman, and of course Git for version control.
Since there is no web/mail server, we needed an external service to send our web forms. We use Brace Forms to do this. It's still fairly new, and could use some extra features, but it works well.
And since there is no database to store blog comments, we use an external service called Disqus. This is also handy if we need to move the website in future as all blog comments will stay intact.
Search Engine Friendly
Lastly, but most importantly for us, is for our own website to be SEO-friendly and lead the way in the industry.
Website load time is becoming an increasingly important SEO factor, so the new static website wins out here for us.
Arguably, HTTPS is also be a new ranking factor, or at least will be in the future, so we decided to roll out SSL at the same time too.
There were a few challenges along the way including URL structure, URL canonicalisation, automatic XML sitemaps, Google+ authorship, but we have managed to solve all of them!
We still have a few tweaks to make to the design, add blog pagination, as well as squeezing out extra milliseconds from the load-time, so stay tuned for more updates!
What do you think of the finished product? Feel free to leave your feedback in the comments.