How to Enhance Nuxt 3 with Compression for Better Performance

Table of Contents

• Introduction
• Installing h3-compression
• Setting Up a Nitro Plugin for Compression
• Understanding the Compression Logic
• Conclusion

Introduction

Web performance is crucial for user experience and SEO. One key aspect of performance is the size of the data transferred between the server and client. Compression can significantly reduce this size, leading to faster loading times. In this article, we'll explore how to add compression to a Nuxt 3 application using the h3-compression package. This is only needed if you have sites using prerender: false

Installing h3-compression

First, add h3-compression to your Nuxt 3 project. Depending on your package manager, use one of the following commands:

# Using npm
npm install h3-compression

# Using yarn
yarn add h3-compression

# Using pnpm
pnpm add h3-compression

Setting Up a Nitro Plugin for Compression

After installing h3-compression, you need to set up a Nitro plugin. Create a file named compression.ts in the server/plugins directory of your Nuxt 3 project and add the following code:

// server/plugins/compression.ts
import { useCompression } from 'h3-compression'

export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook('render:response', async (response, { event }) => {
    // Skip compression for 404 error pages
    const is404Error = event._path?.includes('/__nuxt_error') || event._path?.includes('statusCode=404');
    if (is404Error) return;

    // Only apply compression to HTML content
    if (!response.headers?.['content-type']?.startsWith('text/html')) return;

    // Apply compression
    await useCompression(event, response);
  });
});

This plugin hooks into the Nuxt server's response rendering process, applying compression to HTML content while skipping it for 404 error pages.

Understanding the Compression Logic

The compression logic in the plugin works as follows:

1. 404 Error Check: It first checks if the response is for a 404 error page. If so, compression is skipped to avoid unnecessary processing for error responses.
2. Content-Type Check: Next, it checks the Content-Type of the response. The compression is only applied to responses with Content-Type starting with text/html, which is typical for web pages.
3. Applying Compression: Finally, if the response passes these checks, useCompression from h3-compression is used to compress the response data.

Conclusion

Integrating compression into your Nuxt 3 application can significantly improve its performance, particularly for users with slower internet connections. The h3-compression module provides a straightforward way to add this capability. By setting up a simple Nitro plugin as described above, you can ensure that your application serves compressed content efficiently, enhancing the overall user experience.

Remember to test your application thoroughly after implementing compression to ensure that everything works as expected and to observe the performance improvements.