server side and static pages loads slow, bad core web vitals on pagespeed.web.dev. app.js size becomes large.

[gauravsapkal1]

Summary

We have NextJS 11.1.3 version of our application and we deployed that on AWS Amplify. We have several static and serverside pages. But now we are facing issue with google core web vitals, we are getting very bad performance core web vitals for our static and SSR pages. load time is high, FCP is more than 1.6 seconds, LCP also around 4 seconds even though we don't have nothing large content to load. So I need help regrading optimising this issue below are few details about my application.

NextJS 11.1.3 version,
deployed on AWS Amplify,
using tailwindcss 3.3.0,
webpack version 5.74.0,

below is my next.config.js file

const { withSentryConfig } = require("@sentry/nextjs");
const { DeleteSourceMapsPlugin } = require("webpack-delete-sourcemaps-plugin");

const nextConfig = {
  // add server side rendered env variables
  env: {
    NEXT_PUBLIC_API: process.env.NEXT_PUBLIC_API,
    IPIFY_API_KEY: process.env.IPIFY_API_KEY,
  },
  images: {
    domains: ["https://test.in", "localhost"],
  },
  plugins: [new DeleteSourceMapsPlugin()],
  async redirects() {
    return [
      {
        source: "/a/:b",
        destination: "/:b",
        permanent: true,
      },
      {
        source: "/a/:b/c/:id",
        destination: "/:b/c/:id",
        permanent: true,
      },
    ];
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  reactStrictMode: false,
  webpack5: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.resolve.alias.canvas = false;
    config.resolve.alias.encoding = false;
    config.plugins.push(new DeleteSourceMapsPlugin());
    return config;
  },
  async headers() {
    return [
      {
        source: "/test/:mypage",
        headers: [
          {
            key: "Cache-Control",
            value:
              "public, max-age=14400, s-maxage=14400, stale-while-revalidate=7200",
          },
        ],
      },
    ];
  },
  productionBrowserSourceMaps: true,
  sentry: {
    widenClientFileUpload: true,
    transpileClientSDK: true,
    hideSourceMaps: true,
    disableLogger: true,
    disableServerWebpackPlugin: false,
    disableClientWebpackPlugin: false,
  },
};

const sentryWebpackPluginOptions = {
  org: process.env.NEXT_PUBLIC_SENTRY_ORG_NAME,
  project: process.env.NEXT_PUBLIC_SENTRY_PROJECT_NAME,
  authToken: process.env.NEXT_PUBLIC_SENTRY_AUTH_TOKEN,
  sourceMapFilename: "[name].[hash].js.map",
  silent: true,
};

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

amplify.yml file

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - export NODE_OPTIONS=--max-old-space-size=8192
        - node -e 'console.log(v8.getHeapStatistics().total_available_size/(1024*1024))'
        - fallocate -l 4G /swapfile
        - chmod 600 /swapfile
        - mkswap /swapfile
        - swapon /swapfile
        - swapon -s
        - cat /proc/sys/vm/swappiness
        - nvm use $VERSION_NODE_16
        - |
            echo "add deploy key"
            eval "$(ssh-agent -s)"
            ssh-add <(echo "$DEPLOY_KEY" | base64 -d)
            echo "disable strict host key check"
            touch ~/.ssh/config
            echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
            echo '@test:registry = https://npm.pkg.github.com' > .npmrc;
        - npm install --force
    build:
      commands:
        - free -m
        - node -e 'console.log(v8.getHeapStatistics().total_available_size/(1024*1024))'
        - nvm use $VERSION_NODE_16
        - node -v
        - npm run build
        - echo "Deleting .next/cache directory"
        - rm -rf .next/cache
        - echo ".next/cache directory deleted"
        - echo "=====NEXT build directory==="
        - du -h -d1 .next
        - echo "============================="
  customHeaders:
    - pattern: '/job/*'
      headers:
      - key: 'Cache-Control'
        value: 'public, max-age=14400, s-maxage=14400, stale-while-revalidate=7200'
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

above are the details of my application if you need any more details i will provide. Even simple ssr and static pages load really slow and on pagespeed its always saying that "Minimize main-thread work 5.4 s", "Largest Contentful Paint element 4,330 ms", but i dont have large element which will take this much lcp time, "Reduce JavaScript execution time 2.8 s".

Thank You in advance

Additional information

No response

Example

No response

[hardcodepunk]

It might be Sentry getsentry/sentry-javascript#9179