New website: We passed the google page speed test

by Alfred Brockötter on 1 dec 2019

About this website

I guess we all know the phrase: "The tap is leaking at the plumber's house". Which is really true for a lot of web-agencies own website. We've seen a lot of sites who look nice but score terrible in the google page speed test.

To standout we set ourself the goal to create a website which has a 100% score in google page speed, so that customers know we create really good websites! In this blog post we will show you how we achieved the 100% score.

Facts

  • This website is created with NuxtJS
  • This site is statically generated during the build task in TFS
  • This site is hosted on a static website in Azure
  • 100% score in google page speed test
100-score-in-page-speed-desktop.png 100% score in google page speed

The challenge

Getting a 100% score in google page speed is not as easy as it might look. There are a lot of rules to apply to, for instance:

  • Improve Server Response Time
  • Leverage Browser Caching
  • Remove Render-Blocking JavaScript
  • Remove Render-Blocking JavaScript
  • Optimize CSS Delivery
  • Enable Compression
  • Minify Resources
  • Prioritize Visible Content
  • Use Asynchronous Scripts

And that's only a small part of the total list. Before we show you how we tackled all these rules let's quickly recall why they matter

  • 47% of users expect your web page to load in under two seconds
  • 57% of users will abandon a page if its load time is 3 seconds or more
  • 75% of online customers opted for a competitor’s site instead of suffering inordinate delays

The solution

NuxtJS

By using the NuxtJS framework a lot of rules are already covered. Things like "Prioritize Visible Content", "Use Asynchronous Scripts", "Minify Resources", "Optimize CSS Delivery" are default when you use nuxt. Another big advantage is that NuxtJS allows use to generate static html files for all of our pages. This means that that there is no server processing time and that we can easily host our site on a content delivery network (CDN). nuxtjs-generate.png By using nuxt generate a /dist folder will be created with all our static content

Microservice

For all of our backend tasks (basically sending an email and subscribing to our (mailchimp) newletter) we use a .net core microservice. Otherwise we could not leverage the static site generation feature of nuxtjs. the-cood-api-in-vs2019.png The cood microservice running the backend for cood.nl

CI/CD

Our build pipeline is generating all the assets and pages, while our release pipeline is releasing it to a azure static website. build-pipeline-for-nuxt.png The build pipeline for building the nuxt project

Azure

The website is hosted in Microsoft Azure as a static website, while the backend is hosted as a app service. Our static website is connected to a content delivery network (CDN). cood-running-on-azure-cdn.png The Azure CDN profile for cood.nl

The result

Having this kind of setup results in a blazing fast website. Our homepage is having a 100% score in the google page speed test on desktop and about 90% for mobile. The last 10% for mobile can be achieved when Microsoft is adding better cache control for their Azure CDN.

Leave a comment