FCP/LCP 개선

Document request latency

첫 HTML 요청(TTFB)이 느리다.

Avoids redirects → 리다이렉트 문제는 없음 (좋음)
Server responded slowly (observed 1191 ms)→ 서버가 HTML을 응답하는 데 약 1.2초 걸림
Applies text compression→ gzip / brotli 압축은 잘 적용됨

nextjs의 revalidate를 사용하고 있어서 캐싱은 이미 적용되어있었다.

SSR 페이지에서 API 요청 보내는 부분을 병렬화하였다.

수정 전

export const revalidate = 60;

interface ListPageProps {
  searchParams: Promise<{
    search: string;
    category: number;
    page: number;
  }>;
}

const PostListPage = async ({ searchParams }: ListPageProps) => {
  const { search, category, page } = await searchParams;
  const posts = await getPosts(page ?? 1, 10, category ?? 0, search ?? '');


  return (
    <div className={'py-4 flex flex-col gap-4 relative'}>
      <PostTop search={search} category={category} />
      <div className={'lg:grid grid-cols-[5fr_2fr] flex flex-col gap-4'}>
        <PostList posts={posts?.items ?? []} page={posts?.page ?? 1} total={posts?.total ?? 0} />
        <MenuList />
      </div>
    </div>
  );
};

MenuList.tsx
const MenuList = async () => {
  const menus = await getMenuList('tree');
  return (
    <section className={'glass-card p-4 h-[800px]'}>
      <div className={'flex justify-between items-center pb-[10px] border-b-2 border-border'}>
        <span className={'font-bold'}>Categories</span>
      </div>
      <div className={'py-3 w-full overflow-x-auto flex flex-col gap-1'}>
        {(menus?.data ?? []).map((menu) => (
          <MenuGroup key={menu.id} menu={menu} />
        ))}
      </div>
    </section>
  );
};

export default MenuList;

수정 후

export const revalidate = 60;

interface ListPageProps {
  searchParams: Promise<{
    search: string;
    category: number;
    page: number;
  }>;
}

const PostListPage = async ({ searchParams }: ListPageProps) => {
  const { search, category, page } = await searchParams;
  const [posts, menus] = await Promise.all([
    getPosts(page ?? 1, 10, category ?? 0, search ?? ''),
    getMenuList('tree'),
  ]);

  return (
    <div className={'py-4 flex flex-col gap-4 relative'}>
      <PostTop search={search} category={category} />
      <div className={'lg:grid grid-cols-[5fr_2fr] flex flex-col gap-4'}>
        <PostList posts={posts?.items ?? []} page={posts?.page ?? 1} total={posts?.total ?? 0} />
        <MenuList menus={menus?.data ?? []} />
      </div>
    </div>
  );
};

export default PostListPage;

Network dependency tree

HTML 받음
CSS 다운 시작
CSS 안에 font-face 있음
폰트 3개 다운로드 시작

폰트 때문에 렌더링이 지연되고 있음

SUIT 폰트 3개가 Critical Path에 들어가 있음

웹 폰트를 사용해서 지연된 것 같다.

로컬 폰트로 변경!

폴더 구조

fonts/
  SUIT-Regular.woff2
  SUIT-Bold.woff2
app/
  layout.tsx

layout.tsx

export const suit = localFont({
  src: [
    {
      path: '../fonts/SUIT-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: '../fonts/SUIT-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
  ],
  display: 'swap',
  preload: true,
});

Modern HTTP

nginx 에서 기본으로 제공하는 프로토콜이 http 1.1이였다. http2 로 올려주자

default.conf

# --------------------

# HTTPS (443)

# --------------------
# Front
server {
  listen 443 ssl http2;
...

접근성

라벨이 없는 버튼에 title 속성을 추가해줬다.

CLS

높이 단위를 vh -> svh로 변경해서 모바일 주소창 변화에 따른 높이 재계산 흔들림 완화해주고

로딩 스피너 대신 스켈레톤 UI 사용했다

Metadata를 잘 설정한 덕분인지 SEO 는 개선할 점이 없었다 예이~

Next.js 렌더링 성능 최적화

lighthouse 100점 맞기