How creating a Progressive Web App has made our website better for people and planet

Ever since we declared a climate emergency, we’ve been looking into more techniques to help lower the amount of data transferred from our website to help lower its carbon footprint even further.

After weeks of hard work, we’ve managed to get every audit in Lighthouse to pass at 100%, including the elusive Progressive Web App (PWA) section – which allows the website to have native app-like behaviour including offline access and local storage.

Taking performance to the next level

Following our principle of efficiency by design, we have radically increased the performance of our website in the past year.

In our WordCamp Bristol talk, A Study in Green, we talked about our own journey of redesigning our website to make it much greener by making the right design and technical decisions from the beginning. The latest addition to our website was the PWA assets, which we didn’t speak about (or even fully know about) when we spoke at WordCamp Bristol.

With a lot of learning and some simple steps, we’ve now turned our website into a PWA.  This has:

  1. Massively improved the loading times (which improves user experience)
  2. Enabled offline access, (which also improves user experience)
  3. Lowered our carbon footprint even more.

This article is about what we’ve learned, and how to turn your website into a PWA.

How to turn a website into a PWA

There are three parts that were added to help turn the website into a progressive web application, These are:

  • A manifest.json file which contains information such as a colour scheme, name and description and links to icons 
  • Icons at multiple sizes to help when installing the PWA
  • A service worker that caches requests and serves files when cached or when offline.

The service worker is the script doing all the heavy lifting and was the hardest thing to write and understand – while it is javascript based, it’s very different to the “normal” javascript that is run in browsers.

Here’s an overview of how it all works and what benefits it delivers.

Cache everything!

On the first visit, the homepage and all its assets are saved to cache along with an offline page. Every page you visit is cached and served from that cache when visited again. The cache is updated in the background, meaning that the pages load incredibly quickly because there is no server interaction for each page after it first loads.

This also means that the pages you visit are available offline, meaning that even if you don’t have access to the internet, you can still access the website find our phone number or read any pages that you have looked at before.

Greased lightning

With all the assets cached on the first load, each subsequent request hits the service worker first – this then checks whether the file is cached before progressing to hit the server.

This happens incredibly quickly and serving the file from cache makes the entire process of navigating the website ridiculously quick – halving load times in a lot of cases on a website that was already lightning fast.

Putting it all together

While the rest of the website was complete, adding the PWA was the last little thing that would add massive value by helping the website speed up enormously. Whilst the icon and the manifest were fairly simple to put together, the service worker wasn’t.

However, with careful planning and testing it delivered the results we wanted and was well worth it. We’re all extremely happy with the results after this hard work – even to the point where Tom (our MD) installed the PWA as an app on his phone!

What we learned

Creating a PWA has saved a lot of kilobytes after the initial load by storing files on the device to reuse on subsequent requests – this in turn lowers the load time and carbon footprint on subsequent page views, making the website better for both people and planet. We’ve also enabled offline access, which significantly improves user experience for people in areas with patchy connections, such as mobile users on their commute.

Here are the key points to remember if you want to apply this to your own website:

  1. Creating a PWA can improve user experience for your website visitors by making it faster and more accessible, even offline
  2. There are three parts to a PWA: a manifest.json file, icons, and the service worker.
  3. Everything is cached on first visit; on subsequent visits the PWA will try and use the cached version, and do so if nothing has changed.
  4. Creating a PWA can lower the carbon footprint of your website even further!

This is just the tip of the iceberg. Progressive Web Apps offer the potential to harness more native app like functionality and create a richer, more engaging user experiences. If you want to create your own PWA, Google has some great documentation on creating a PWA, MDN is another great resource and created an online library to help you learn all about service workers.

Or, if you’re in need of a lighting-fast website, get in touch with us for a chat.

 

Get our latest articles about a positive web straight to your inbox

We promise no spam, just good content