Performance (speed), Accessibility, and SEO at 100/100 with Sanity CMS, Next.js/React, and Vercel

Achieving the perfect score for performance, accessibility and SEO

More often than not, high scores for SPEED and SEO are among the key objectives listed in website briefs. Optimizing for speed is essential to crafting a good user experience and, thus, an integral part of SEO (Search Engine Optimization).

Here at Represent, we love geeking out in Google Lighthouse until we reach a 100/100 score for Performance (speed), Accessibility, Best Practices, and SEO. Lighthouse even throws us a little confetti animation when we get there 🎉

The perfect scores are made possible by our go-to "tech stack" - the combination of products, technologies, and frameworks we use in our development. It goes as follows:

Sanity CMS

Sanity is the world's #1 headless CMS - learn all about that here. The beauty of a headless CMS is that we are free to use whichever technology we want to build the frontend of the website, as the content and the presentation is decoupled. We fetch the content from the CMS via an API (Application Programming Interface).

React

React is a JavaScript library for painlessly creating interactive user interfaces. The library is developed and maintained by Facebook (Meta) and a community of developers.

Next.js

Next.js is an open-source web development framework making it easy to develop fast websites with React. We leverage SSR (Server-Side Rendering) in Next.js, where the server returns a ready-to-render HTML page (loads fast!) and the JS scripts required to make the page interactive.

Vercel

Vercel develops the Next.js framework and is especially well suited for hosting web applications based on the above-mentioned technologies. The speed is incredible, the cost is low, and it makes developing, previewing, and shipping our web applications super easy!

‍