Performance (speed), Accessibility, and SEO at 100/100 with Sanity CMS, Next.js/React, and Vercel
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 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).
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 develops the Next.js framework and is especially well suited for hosting web applications based on the abovementioned technologies. The speed is incredible, the cost is low, and it makes developing, previewing, and shipping our web applications super easy!
When Google Tag Manager is installed, and some hungry marketers start installing various tags/scripts, performance scores will drop. We typically advise our customers to be careful and strategic in their choices of third-party scripts to install and consider using some of them only temporarily.