How I massively improved my website performance by using the right tool for the job

1

Next.js

In January 2021, I joined Contentful as a Developer Advocate, and my focus was helping developers use Contentful with popular front end JavaScript frameworks. In March 2021, I rebuilt my blog site using Contentful and Next.js — a React front-end framework that combines static pre-rendering, server-side rendering and in-built serverless functions.

#Developer Tools #Web Frameworks #JavaScript Framework 923 social mentions

2

Netlify

Fast-forward to January 2022, when I joined the Developer Experience team at Netlify. And this got me thinking more about the core value proposition of the Jamstack: serving highly optimised static pages and assets created during a build process. Furthermore, the talk I gave in 2021 — How to prevent the collapse of society by building an accessible web — which highlights that delivering many, many JavaScript files to the browser can hinder performance, accessibility and user experience, made me want to challenge myself to build a website that delivered as little JavaScript to the browser as possible.

#Cloud Computing #CDN #Content Distribution 105 social mentions

3

Google Lighthouse

Performance was compared between the Next.js site and Eleventy site using three free tools: Google Lighthouse, web.dev/measure and Web Page Test. Lighthouse tests were run in Brave Browser dev tools, Web Page Test runs were conducted via the web app using the London, UK - EC2 server, and web.dev tests were conducted in the browser. Given that I advocate for mobile-first development — and that's where performance is most likely to be impacted given the unpredictable speed of mobile data — all tests were conducted in an emulated mobile environment using a medium 3G network speed, on iPhone 6/7/8.

#Website Monitoring #Performance Monitoring #Uptime Monitoring 87 social mentions