Next.js: Warning: data for page exceeds the threshold of 128 kB, this amount of data can reduce performance

I get this warning on many routes when building the site. The warning is explained on Next.js docs here.

I have deep-dived into this and figured out that the JSON file that is used in the Next.js for SSG is quite big… I wen’t further and analysed the JSON file to see where the big amount of data is and as seen from image below, most of the data is taken by pageProps, which comes from GraphQL and DatoCMS.

Looking further into pageProps object I see that most of the data is in the responsiveImage object(s) used by <Image /> component of the react-datocms package. At least 50% of all payload.

I would love to reduce this in order to avoid Time to First Byte penalty (TTFB). How are you approaching this?

No-one else experiencing this issue?

Hello @primoz.rome,

Can you show us what you are fetching on getStaticProps in the page issuing this error?

Here is the whole query, but as mentioned, almost half of the data is for the Responsive Image queries:

`
      query ProductBySlug($locale: SiteLocale = ${process.env.DEFAULT_SITE_LOCALE}, $eq: String = "") {
        product(locale: $locale, filter: {slug: {eq: $eq}}) {
          __typename
          _allSlugLocales {
            locale
            value
          }
          seo: _seoMetaTags {
            ...metaTagsFragment
          }
          id
          slug
          name
          title
          subtitle
          image {
            responsiveImage(imgixParams: {auto: format, w: 800}) {
              ...responsiveImageFragment
            }
          }
          description {
            blocks
            value
            links {
              __typename
              ... on ProductRecord {
                id
                slug
                title
                subtitle
              }
              ... on ProductCategoryRecord {
                id
                slug
                name
              }
              ... on SolutionRecord {
                id
                slug
                title
                subtitle
              }
              ... on SolutionCategoryRecord {
                id
                slug
              }
              ... on BlogPostRecord {
                id
                slug
                title,
                category {
                  slug
                }
              }
              ... on BlogCategoryRecord {
                id
                slug
                name
              }
              ... on PageRecord {
                id
                slug
                title
              }
            }
          }
          category {
            __typename
            _allSlugLocales {
              locale
              value
            }
            name
            shortName
            slug
          }
          measurementIcons {
            name
            image {
              url
            }
          }
          highlights {
            __typename
            id
            name
            content {
              value
              links {
                __typename
                ... on ProductRecord {
                  id
                  slug
                  title
                  subtitle
                }
              }
            }
          }
          features {
            __typename
            ... on FeatureColumnRecord {
              id
              anchor
              content {
                value
                links {
                  __typename
                  ... on ProductRecord {
                    id
                    slug
                    title
                    subtitle
                  }
                  ... on ProductCategoryRecord {
                    id
                    slug
                    name
                  }
                  ... on SolutionRecord {
                    id
                    slug
                    title
                    subtitle
                  }
                  ... on SolutionCategoryRecord {
                    id
                    slug
                  }
                  ... on TechSpecRecord {
                    id
                    slug
                  }
                  ... on BlogPostRecord {
                    id
                    slug
                    title,
                    category {
                      slug
                    }
                  }
                  ... on BlogCategoryRecord {
                    id
                    slug
                    name
                  }
                  ... on PageRecord {
                    id
                    slug
                    title
                  }
                }
              }
              contentBottom {
                value
                blocks {
                  __typename
                  id
                  table
                }
                links {
                  __typename
                  ... on TechSpecRecord {
                    id
                    slug
                    product {
                      slug
                    }
                  }
                  ... on ProductRecord {
                    id
                    slug
                  }
                }
              }
              columnsConfiguration
              columns {
                __typename
                id
                content {
                  value
                  blocks {
                    __typename
                    ... on ImageBlockRecord {
                      id
                      image {
                        responsiveImage(imgixParams: {auto: format, w: 500}) {
                          ...responsiveImageFragment
                        }
                      }
                    }
                  }
                }
              }
            }
            ... on FeatureRecord {
              id
              anchor
              video
              content {
                value
                blocks {
                  __typename
                  ... on SimpleTableRecord {
                    id
                    table
                  }
                }
                links {
                  __typename
                  ... on ProductRecord {
                    id
                    slug
                    title
                    subtitle
                  }
                  ... on ProductCategoryRecord {
                    id
                    slug
                    name
                  }
                  ... on SolutionRecord {
                    id
                    slug
                    title
                    subtitle
                  }
                  ... on SolutionCategoryRecord {
                    id
                    slug
                  }
                  ... on BlogPostRecord {
                    id
                    slug
                    title,
                    category {
                      slug
                    }
                  }
                  ... on BlogCategoryRecord {
                    id
                    slug
                    name
                  }
                  ... on PageRecord {
                    id
                    slug
                    title
                  }
                }
              }
              images {
                responsiveImage(imgixParams: {auto: format, w: 800}) {
                  ...responsiveImageFragment
                }
              }
            }
            ... on FeatureTitleRecord {
              id
              anchor
              title
              subtitle
              colorClass
            }
          }
          software {
            title
            feature1 {
              value
            }
            feature6 {
              value
            }
            feature5 {
              value
            }
            feature4 {
              value
            }
            feature3 {
              value
            }
            feature2 {
              value
            }
            excerpt {
              value
            }
            image {
              responsiveImage(imgixParams: {auto: format, w: 1280}) {
                ...responsiveImageFragment
              }
            }
          }
          testimonials {
            author
            company
            occupation
            text
            companyLink {
              name
              logo {
                responsiveImage(imgixParams: {auto: format, sat:-100, w: 300}) {
                  ...responsiveImageFragment
                }
              }
            }
          }
          downloads {
            id
            name
            description
            version
            language
            fileType
            asset {
              url
            }
          }
          faq {
            question
            answer
          }
          relatedProducts {
            __typename
            slug
            title
            subtitle
            image {
              responsiveImage(imgixParams: {auto: format, w: 300}) {
                ...responsiveImageFragment
              }
            }
          }
          subpages {
            __typename
            ... on TechSpecRecord {
              id
              slug
              buttonLabel
            }
            ... on ProductSubpageRecord {
              id
              buttonLabel
              slug
            }
          }
        }
      }
      ${metaTagsFragment}
      ${responsiveImageFragment}
    `,

@primoz.rome

Seems like there isn’t much we can do on our end, as you are fetching a lot of data (more than 128kb) in getStaticProps, as it seems like all product images are being returned from there, so the warning is pretty much warranted, maybe some delay on parts of the request (ones that would require some scrolling to be viewed) and not just request everything on getStaticProps should be the way to go here