Skip to content

Commit

Permalink
docs: add one more covered Nuxt issue
Browse files Browse the repository at this point in the history
  • Loading branch information
johannschopplich committed May 31, 2024
1 parent 1d6a6ba commit fa52471
Showing 1 changed file with 3 additions and 2 deletions.
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ This module provides a solution for the following Nuxt issues (among others):

- [Disable prefetch for dynamic imports](https://github.com/nuxt/nuxt/issues/18376) (#18376)
- [Optimizations for prefetching chunks](https://github.com/nuxt/nuxt/issues/14584) (#14584)
- [`inlineStyles` option causes duplication of CSS](https://github.com/nuxt/nuxt/issues/21821) (#21821)

## Features

Expand Down Expand Up @@ -69,11 +70,11 @@ This module hooks into the Nuxt build process to optimize the LCP score by disab
> [!INFO]
> This feature has to be enabled manually. In order to use it, you need to have the Nuxt `inlineStyles` feature enabled. Make sure to test your application after enabling this option.
While the latest Nuxt versions inline styles during SSR rendering, the `entry.<hash>.css` stylesheet is still rendered in the HTML. This can lead to render-blocking CSS, which can negatively affect the Largest Contentful Paint score.

> [!WARNING]
> Due to [a bug in Nuxt](https://github.com/nuxt/nuxt/issues/26514), this feature may not work as expected in current Nuxt versions. It will be fixed in Nuxt 3.12.
While the latest Nuxt versions inline styles during SSR rendering, the `entry.<hash>.css` stylesheet is still rendered in the HTML. This can lead to render-blocking CSS, which can negatively affect the Largest Contentful Paint score.

CSS stylesheets are render-blocking resources, which means that the browser has to download and parse the CSS before rendering the page. By removing the `entry.<hash>.css` stylesheet from the HTML, the browser can render the page faster, which can improve the LCP score.

First, try to import the main application styles in the `app.vue` file. They will be saved as the `entry` CSS file when Nuxt is built:
Expand Down

0 comments on commit fa52471

Please sign in to comment.