Someone's been busy

Well now haven't I been a busy bee. I've made some interesting changes to my website since my last post and I'm very excited to share what I have been up to. Now I imagine some of you have already jumped the gun and are thinking to yourself, "What do you mean changes? Your site looks the same as last time.". While you may be right in thinking this, the changes I have made are more performance improvements than visual (although I am working on re-designing my website 😉) and make my site faster and more secure than before, so let's get right into it.

Moving over to HTTPS

For a while now I have debated whether I should move other to https as my website doesn't contain any databases, nor does it take any payment details or personal information (except for the contact form which just asks for an email address). For those unfamiliar with HTTPS, to put it simply it just makes your website secure and you get a nice padlock in the address bar on your browser. You can find more about https by checking out this nice article over on sitepoint.

URL of alexclapperton.co.uk in Chrome browser address bar with https padlock
alexclapperton.co.uk now on https

Having said all that, I felt I needed to make the change over with https becoming a prerequisite for several technologies that I wanted to use such as Service Worker (more on service worker below). Another reason for moving is Google's intent to mark certain webpages as insecure which gives the implication that any site that isn't explicitly marked as secure, is therefore insecure which could prevent some users from vising the site.

Making the switch to https was relatively simple thanks to the use of CloudFlare which offer a variety of performance-related services. I found a nice tutorial on Raven Tools explaining how to move to https with CloudFlare.

To this end, I think that HTTPS is as much an exercise in branding and trust as it is in security, and that it will steadily become more and more ubiquitous. This is only a good thing.

Making my site work offline

Yes, you read that right, my site can now work offline without any internet connection. So if you somehow find yourself stranded on a desert island, in the middle of nowhere, with nothing but your laptop (and a volleyball called Wilson), you'll be happy to know you can at least visit my website. How freaking cool is that?

The way this works is by the use of a Service Worker. in the words from the Google Developer website, A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. One such feature is by making your site work offline. The way in which it works is that whenever you visit a page on my website, it will create a cached version of that page and store it. Then if you turn off your internet and reload or re-visit the page, it will load the cached version of that page, allowing to carry on browsing the page as normal. Pretty awesome right? If you are interested in getting your site to work offline, then follow this nice tutorial from Mario Pabon on how to do so.

Optimising my CSS media queries

One problem I encountered with my css was that I had multiple media queries of the same breakpoint. The reasoning behind this was because my media queries were nested inside my classes (yes I'm using scss here), to make the code more maintainable. The problem with this is than when compiled, I had multiple media queries of the same breakpoint, which in turn made my css file larger.

Even though the size of my css code was pretty small when minified and gzipped, I wanted to find a solution to this problem and luckily I did with a bit of help from a handy Gulp plugin called css-mqpacker. This awesome plugin looks for multiple media queries of the same breakpoint in your css and merges them into one thus reducing the file size of your css. With this plugin, I was able to reduce the size of my css from 6kb to 5kb, which may not seem a lot in terms of file size, but in terms of the amount of code it has been significantly reduced.


/* Compiled CSS before css-mqpacker */
@media (min-width: 400px) {

  .site-banner__img--home {
    -webkit-transform: scale(1.7);
    transform: scale(1.7);
  }

  ...

}

@media (min-width: 400px) {

  h1 {
    font-size: 2.25em;
  }

  ...

}


/* Compiled CSS after css-mqpacker */
@media (min-width: 400px) {

  .site-banner__img--home {
    -webkit-transform: scale(1.7);
    transform: scale(1.7);
  }

  h1 {
    font-size: 2.25em;
  }

  ...

}

That's a wrap

So there you have it. This is what I have been up to these last few months and I'm not stopping there. I will always continue to look for new techniques that I can use to help make my website perform at its absolute best.


Bibliography

  • Gauntm M. (2017). Service Workers: an Introduction. [ONLINE] [Accessed 13 January 2017]. URL: Google Developers

Article notifications: Get notified on your device when I publish a new article.