Nextjs Best Optimization Tools

The Tools#

1. Lighthouse: Lighthouse is an open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO, and more.

npm i -g lighthouse
lighthouse <https://your-next-app.com> --view

2. Google PageSpeed Insights: Google PageSpeed Insights reports on the performance of a page on both mobile and desktop devices and provides suggestions on how that page may be improved.

Access it here: Google PageSpeed Insights

3. WebPageTest: WebPageTest is a tool that was originally developed by AOL for use internally and was open-sourced in 2008 under a BSD license. The platform is under active development on GitHub and is also packaged up periodically and available for download as a Docker container from the Docker Hub or Google Cloud.

Access it here: WebPageTest

4. Bundle Analyzer: Next.js has built-in support for visualizing your bundle content. This feature lets you visualize what the final bundle contains.

Here's how to use it:

First, install @next/bundle-analyzer:

npm install --save @next/bundle-analyzer

Then, update your next.config.js to include the Bundle Analyzer:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({})

Remember to run ANALYZE=true next build to see the visualization.

5. Webpack Visualizer: See the contents of Webpack's output via an interactive tree map.

Access it here: Webpack Visualizer

6. Sitespeed.io: This is a set of Open Source tools that helps you monitor and measure the performance of your website. To install Sitespeed.io, use the npm package manager:

npm install -g sitespeed.io

Then to analyze a website, run:

sitespeed.io <https://www.sitespeed.io/>

7. Yellow Lab Tools: Yellow Lab Tools tests front-end code quality, and checks for performance issues, page weight caused by images, scripts or stylesheets, and multiple other web performance-related issues. Access it here: YellowLabTools

8. Pingdom: Pingdom offers cost-effective and reliable uptime and performance monitoring for your websites. They use more than 70 global polling locations to test and verify the customers' sites 24/7, all year long. Access it here: Pingdom

9. Varvy SEO tool: The Varvy SEO tool and optimization guide is a resource for web performance enthusiasts and developers to better understand Google guidelines. Access it here: Varvy

10. GTmetrix: GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers actionable recommendations on how to fix them. Access it here: GTmetrix

11. PageSpeed Insights: This is a tool by Google that allows you to identify ways to make your site faster and more mobile-friendly. Access it here: PageSpeed Insights

12. Webpack Bundle Analyzer: This utility represents bundle content as a convenient, interactive, zoomable tree map. It will help you find out what modules make up the most of your bundle size.

To install webpack-bundle-analyzer, use npm or yarn:

npm install --save-dev webpack-bundle-analyzer
// OR
yarn add -D webpack-bundle-analyzer

Then add it to your webpack.config.js:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

13. Size Limit: Size Limit is a tool to prevent JavaScript libraries from bloating. With it, you know exactly how many kilobytes your JS library increases the user bundle. To install size-limit, use npm or yarn:

npm install --save-dev size-limit @size-limit/preset-app
// OR
yarn add --dev size-limit @size-limit/preset-app

14. ImageOptim: This tool makes images take up less disk space and load faster without sacrificing quality. It's excellent for publishing images on the web (easily shrinks images "Saved for Web" in Photoshop). Download it here: ImageOptim

15. Purgecss: PurgeCSS is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI, and plugins for popular build tools. To install purgecss, use npm or yarn:

npm install --save-dev purgecss
// OR
yarn add --dev purgecss

Web Vitals#

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

There are three core Web Vitals metrics for all web pages:

1. Largest Contentful Paint (LCP): This metric reports the render time of the largest image or text block visible within the viewport.
2. First Input Delay (FID): This metric measures the time from when a user first interacts with your site (i.e., when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser can respond to that interaction.
3. Cumulative Layout Shift (CLS): This metric measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

The Google Chrome team provides a web-vitals library that you can use to measure these three metrics in your real-world Next.js application.

To install the web-vitals library, you can use npm or yarn:

npm install --save web-vitals
// OR
yarn add web-vitals

Here's an example of how you might use the web-vitals library to track these metrics:

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
      fetch('/analytics', {body, method: 'POST', keepalive: true});
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

In this example, sendToAnalytics() is a reporting function that sends these metrics to an analytics endpoint where you could store them for later analysis. The getCLS(), getFID(), and getLCP() methods from the web-vitals library provide the corresponding Web Vitals metric data, which we then pass on to our sendToAnalytics() function.

It also has a great browser extension that you can install from here. You can read the full documentation here.