我正在使用NextJS与Mantine开发一个网站。我使用createStyles来添加样式。我也尝试使用尽可能多的mantine组件。
当我在Vercel上部署站点时，我发现除了CLS之外，所有站点性能参数都很棒，这很糟糕;如此可怕，以至于你在第一次启动网站时就能感觉到内容的转变。
仅作为示例，Header的代码如下：

import { useState } from 'react';
import {
  createStyles, Container, Anchor, Group, ActionIcon, useMantineColorScheme
} from '@mantine/core';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Sun from '@/public/svg/sun.svg';
import MoonStars from '@/public/svg/moonStars.svg';

const useStyles = createStyles((theme) => ({
  inner: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },

  burger: {
    [theme.fn.largerThan('sm')]: {
      display: 'none',
    }
  },

  links: {
    fontWeight: 700,
    textTransform: 'uppercase',
    textDecoration: 'none',
    fontSize: theme.fontSizes.md,
  },

  mainLink: {
    color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[6],
    borderBottom: `2px solid transparent`,
    transition: 'border-color 100ms ease, color 100ms ease',

    '&:hover': {
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
      textDecoration: 'none',
    },
  },

  mainLinkActive: {
    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
    borderBottomColor: theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 5 : 6],
  },

  sideText: {
    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
  }
}));

export default function Component() {
  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
  const { classes, cx } = useStyles();
  let pathname = usePathname();
  const [active, setActive] = useState(() => {
    if (pathname.split('/')[1] === '') return 0;
    if (pathname.split('/')[1] === 'blog') return 1;
  });

  let mainLinks = [
    { "link": "/", "label": "About" },
    { "link": "/blog", "label": "Blog" },
  ]

  const mainItems = mainLinks.map((item, index) => (
    <Anchor component={Link} href={item.link} key={item.label} py='xl' px='md'
      className={cx(classes.mainLink, { [classes.mainLinkActive]: index === active }, classes.links)}
      onClick={() => setActive(index)} >
      {item.label}
    </Anchor>
  ));

  const changeColorScheme = () => {
    toggleColorScheme();
    localStorage.setItem('color-scheme', colorScheme === 'dark' ? 'light' : 'dark');
  }

  return (
    <Container pos='relative' mb='2rem'>
      <Container pos='sticky' className={classes.inner}>
        <div className={classes.links}>
          <Group spacing={0} >
            {mainItems}
          </Group>
        </div>
        <Group position="center" my="xl">
          <ActionIcon
            onClick={() => changeColorScheme()}
            size="lg"
            sx={(theme) => ({
              backgroundColor:
                theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
              color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
            })}>
            {colorScheme === 'dark' ? <Sun /> : <MoonStars />}
          </ActionIcon>
        </Group>
        {/* <Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" /> */}
      </Container>
    </Container>
  );
}

字符串
如果你想自己尝试，可以找到website deployed here
我能想到的一个主要问题是，也许mantine将所有组件都转换为JS，而发布太多的JS使其变得动态，因此所有的转换都是如此
如果使用mantine组件导致了问题，我准备转向原生HTML组件，但我需要确定是否是Mantine导致了问题。
请帮助找出究竟是什么原因导致了高CLS的高内容转移，以及如何改善/防止内容转移。