我有一个无头的WordPress网站在Nextjs实现和Vercel托管，但当我打开网页的一些图像需要大约10秒加载，我没有线索为什么，你可以尝试在https://blog.ultatel.com/page/2检查

import { useInView } from "react-intersection-observer";
const PostCard = ({
  post,
  variant = "primary",
  className,
  showAuthor = false,
}: PostCardProps) => {
  const [loading, setLoading] = useState(true);
  const [ref, inView] = useInView({
    triggerOnce: true,
    fallbackInView: true,
  });
  const [ref2, inView2] = useInView({
    triggerOnce: true,
    fallbackInView: true,
    threshold: 0.15,
  });
  const rootClassName = cn(
    s.card,
    {
      [s.primary]: variant === "primary",
      [s.secondary]: variant === "secondary",
    },
    className
  );
  return (
    <div className={rootClassName} ref={ref}>
      <Link
        className={s.coverWrapper}
        href={`/${post?.slug}`}
        aria-label={post?.title}
      >
        {inView && (
          <>
            {loading && <div className={s.loading}></div>}
            <Image
              src={post?.featuredImage?.node?.sourceUrl ?? "/default.webp"}
              alt={post?.featuredImage?.node?.altText ?? ""}
              ref={ref2}
              quality={90}
              className={`${s.cover} ${inView2 && s.show}`}
              width={700}
              height={700}
              onLoadingComplete={() => setLoading(false)}
              priority
              
            />
          </>
        )}
      </Link>
      <div className={s.post__content}>
        <div className={s.categoryTime}>
          {post?.categories?.edges?.length >= 1 && (
            <div className="flex items-center gap-2 flex-wrap">
              <Tag
                category={post?.categories?.edges[0]?.node}
                variant={variant}
                className={s.tag}
              />
            </div>
          )}

          {post?.readingTime && (
            <div className={s.time}>{post?.readingTime} min read</div>
          )}
        </div>
        <h3 className={s.post__title}>
          <Link href={`/${post?.slug}`}>{post?.title}</Link>
        </h3>
        {showAuthor && (
          <div>
            <Link
              href={`/author/${post?.author?.node?.slug}`}
              className={s.author}
            >
              {post?.author?.node?.name}
            </Link>
          </div>
        )}
        <LineButton
          className={s.buttonLine}
          variant={variant}
          href={`/${post?.slug}`}
          aria={`Read ${post?.title}`}
        >
          Read post{" "}
          <svg
            className={s.icon}
            width="12"
            height="11"
            viewBox="0 0 12 11"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.20904 1.21197L10.711 5.64783L7.20904 10.0837"
              stroke={variant === "primary" ? "white" : "#004C66"}
              strokeWidth="2"
            />
            <line
              x1="0.205078"
              y1="5.38708"
              x2="10.7111"
              y2="5.38708"
              stroke={variant === "primary" ? "white" : "#004C66"}
              strokeWidth="2"
            />
          </svg>
        </LineButton>
      </div>
    </div>
  );
};
export default PostCard;

这是我当前的postCard组件，用于呈现图像。
我使用react-intersection-observer来渲染图像，只有当用户滚动到明信片时，我试着删除这个Inview，只延迟加载图像，我试着使用fill属性，size属性，但所有版本都不工作，有人能解释给我听吗，为什么渲染图像需要这么长时间？（看到问题后，我添加了一个'占位符'加载，给用户一些反馈）

{loading && <div className={s.loading}></div>}