How to improve the PageSpeed score of your Nuxt.js website in 6 steps

• lodash

  187 58,868 5.1 JavaScript

  A modern JavaScript utility library delivering modularity, performance, & extras.

  

A good example is a popular lodash library, which isn't tree-shakeable in the original version. (It's intended to be used in Node.js environments). However, there's an ES6 version called lodash-es which should be used by default together with all modern bundlers.

• unlighthouse

  15 3,540 9.2 JavaScript

  Scan your entire site with Google Lighthouse in 2 minutes (on average). Open source, fully configurable with minimal setup.

After deploying all these changes on our website, the PageSpeed score jumped from 23 to 97. To ensure that the numbers won't drop over time, I'd recommend setting up the https://unlighthouse.dev checks for your CI/CD.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,279 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

We use Tailwind CSS in our entire codebase. Libraries like Tailwind have a considerable performance benefit since you don't need to write new CSS rules. You can leverage the use of already available classes, and your stylesheets don't grow much over time.

• purgecss

  51 7,659 8.1 TypeScript

  Remove unused CSS

  

Purge CSS is another great option to keep your stylesheet size low and increase the PageSpeed score. It's especially useful if you're importing some 3rd party stylesheets and would like to use only what's required. The configuration usually takes a bit of tinkering to get right, but it's definitely worth the effort.

• Nuxt.js

  207 42,699 8.0 TypeScript

  Discontinued Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue 3. [Moved to: https://github.com/nuxt/nuxt]

  

As the title suggests, we use the Nuxt.js framework for the whole public-facing website.

• Ghost

  299 45,658 10.0 JavaScript

  Independent technology for modern publishing, memberships, subscriptions and newsletters.

  

The site content is then fetched from various sources, including the Directus platform and a Ghost blog.

• Bootstrap

  530 167,414 9.6 JavaScript

  The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

  

Tailwind keeps your output CSS lean by generating only those utilities you actually use. It isn't bloating your stylesheets with all available utils like, i.e., Bootstrap does.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• Directus

  208 25,357 9.9 TypeScript

  The Modern Data Stack 🐰 — Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.

  

We like to store all images on our website externally for easier management as close as possible to the actual content. We use Directus CMS, which includes its own asset management with integrated image optimizations, but any other CMS should work similarly.

Suggest a related project