Our objective was to create a website that reflects who we are now, rather than who we were two years ago. Key aims were to clarify messaging around our mission, improve load times, improve accessibility, and reduce carbon emissions. Following our unique efficiency by design process that we use for our client projects, we were able to create a website that loads 77% faster (based on GT Metrix tests) and has carbon emissions of just 0.48 grams per page view, a 45% reduction compared to our previous site.
Here are a few key things that we did to achieve this.
Page Weight Budgeting
An important part of creating efficient websites is having tangible goals or boundaries to focus the team. It was essential that our new website be significantly more efficient than its predecessor, so we set a maximum page weight budget of 50% less than the old website, which was 881kb for the homepage. This allowed us to review design elements to assess their impact on the budget and question everything from image sizes to background textures, typefaces and libraries. The end result in this first iteration is a homepage that came in almost bang on budget at just 443kb, and that’s without having had time to implement all optimisations that we would have liked to.
Minimalist Design Language
We tore up our brand style guide and used the website design as an opportunity to refresh our identity and move it toward a more minimalist, clean tech aesthetic that aligns with our values and capabilities. We did however pay homage to our history with an updated version of the original Wholegrain Digital logo in a new shade of ‘electric car blue’ and we created a new colour palette with enhanced contrast for better accessibility.
Although minimalist design is not essential for efficient web pages, it certainly does help to ensure that we only include things that are necessary while also reducing visual clutter. The new website gets a visual clarity rating of 87/100 in EyeQuant attention analysis, helping to ensure an easy, pleasurable viewing experience.
Lightweight Fonts
As font files can add up to a large proportion of page weight, we were determined to use them efficiently. Our preference was to only use system fonts, but we struggled to achieve the aesthetic that we were aiming for with system fonts alone. We therefore settled on a compromise, using the open source Inter UI typeface for all headings while using Arial as the typeface for standard paragraph text.
Arial is a system font on all operating systems including Windows, Mac, Android and iOS, which ensures a consistent user experience across all devices.
For our heading typeface we created a subset of the Inter UI font including only the characters that we needed, reducing it to a single 11 kilobyte file instead of 120 kilobytes for the complete typeface.
Efficient Imagery
Our previous website made use of full width imagery, which although beautiful, resulted in fairly large files. We approached the new design with the aim of creating visual impact with minimal use of images. The resulting design combines relatively small images with SVG vector elements to create visual impact. Of course, all images are compressed to minimise file sizes too. We still have some low-hanging fruit to pick off, so image file sizes will be reducing further in the coming weeks.
Lean Development
We built the site on our Granola starter theme, which gave us a head start in ensuring good levels of efficiency and accessibility. In this first iteration, efficiency was primarily driven by design but on the development side we kept it simple, focusing on clean, lean code and in particular avoiding the use of any bloated frameworks and libraries.
Design for Accessibility
Although we tried to ensure a good level of accessibility in development, we believe that the best results come through the design process. Clear and logical information hierarchy with high levels of readability create a positive user experience for a wide range of visitors. In addition to the minimalist design style, we chose our typefaces with readability a high priority, modified our brand colours to improve contrast and as always, we used EyeQuant visual analysis software to ensure a high level of visual clarity in our designs.
We know that this first iteration isn’t perfect but we will keep improving and we welcome any suggestions.
So what next?
As mentioned, the first iteration was delivered in a very short time frame. So far the results have been excellent in terms of increased speed and reduced carbon emissions, and although it is early days we see signs of reduced bounce rates and improved visitor engagement.
We believe that websites are living things that evolve over time and continuously improve so expect to see an ongoing series of improvements that we will report here on our blog.
For the next phase we intend to finish off some of the ‘nice to haves’ that were de-prioritised for phase one. These include some additional content, addition of some design features, integration of our carbon calculator directly into the website and some further efficiency improvements such as using webP image format, converting some more images to CSS or SVG and streamlining contact form scripts.
We welcome any feedback, positive or negative, with a view to keep improving and we look forward to posting more updates in the coming weeks and months.