How I built this feather weight, lightening quick website

Last modified on Thursday, 18 August 2016

Whilst redeveloping this personal loans website (if you bother clicking, note the almost immediate website load in your browser), I decided to challenge myself – was it possible to build a fully responsive website that ticks all the boxes in our website health check. Namely:

  • Fast loading – a 100% Google Page speed for both mobile and desktop versions
  • Completely HTML5 error free code
  • 0 broken links to help conserve the SEO link juice.
  • Lightweight - I set myself a challenge of keeping the website under 1Mb (compared to 90Mb of a standard CMS website)
  • Optimized for search using the latest SEO techniques such as Schema.org
  • A fully responsive design with Google Mobile User Experience of 100%

Yes - I wanted all this whilst offering the site in 4 languages for the multi-lingual Swiss market.

So why am I doing this?

  • First off I wanted to see if the mythical concept of a 100% Google Pagespeed could actually be achieved (I now know it can).
  • I am one of those who believes that building a website from scratch from time to time is one of the best ways to understand in depth how websites work and fit together.
  • A hand-coded website is more robust and extremely easy to maintain and update.
  • Lighter website = a greener website - being 0.6% the size of even a simple Joomla or Wordpress website, this hand-coded feather weight takes up a fraction of the server space.
  • Finally, given the SEO benefits of a quicker, mobile friendly website I want to see the effect on visitor numbers.

What the website does not do

Much has been said about the end of hand coding, and in general I agree - but there are a handful of exceptions, and this project was one of those. However, if you require eCommerce functionality, a blog or anything more complicated, then you need to stick with a CMS such as Joomla, Wordpress or Magento and do your best to speed it up.

Here is how I build a lightening quick website

How to get 100% Google Pagespeed (mobile and desktop)

100% Google Pagespeed

Here are a few tips that will help you get you from the 80-90% region up to 100% Pagespeed:

  • Keep render blocking scripts to a minimum.
  • Where possible put scripts at the end of the code just before the closing body tag. Good candidates to move to the end of the page are Google Fonts, jQuery libraries and javascripts. This will allow the page to load smoothly without pausing to load external files.
  • Keep your CSS concise and efficient. Add the CSS directly in the page head rather than as an external link (you can do this if the CSS is small).
  • Compress images including sprites. Don’t just rely on Photoshops 'Save for Web'. You can often reduce image size further if you use an image compression tool such as Tinypng.
  • To actually hit the magic 100% Pagespeed, you will have to host your Google Analytics tracking locally. This article will show you how to do this.

How to get 100% rating on Google Mobile Experience

100% Mobile user experience

In 2014 Google let us know that Mobile friendly or responsive design is now an important ranking factor if you want mobile visitors on your website. So if you don’t want to miss out on the exploding mobile market, building a mobile friendly site is fundamental. Here are some tips to get a 100%:

  • A fully responsive design (obvious).
  • Keep your mobile design as simple as possible removing any unnecessary objects such as images or menu items (note that this will also help speed up your website).
  • Make sure all links such as menu items are well spaced and not too close together –when designing, just bare in mind users with chubby fingers trying to tiny button you’ll get the idea.
  • Make sure no areas of your website fall outside of the mobile browser window. A common error is a drop down menu that sticks out off screen that goes unnoticed - as cannot see it unless you hover/click it.
  • Google Page Insights will help you by pointing out any mobile issues.

Fine tune you website with these tests

Our website healthcheck has some of the best tools on the web to tune up your website. They include a broken link finder, HTML error checker and a Schema tool.

Mike Fitzpatrick

Mike Fitzpatrick is the founder and web developer at Jeyjoo web design. He works with both individuals and companies to grow their businesses online.
Seguimi su Google Plus