Prefetching vs Preloading vs Prerendering

Prefetching vs Preloading vs Prerendering

 

🏁 웹 성능 최적화의 3대 기술 비교

 

현대 웹 개발에서는 사용자 경험(UX)을 극대화하기 위해 리소스 로딩 최적화가 매우 중요합니다. 여기서 Prefetching, Preloading, Prerendering은 핵심적인 역할을 하는 기술들인데요, 이들의 차이와 사용 목적을 제대로 이해하면 성능 최적화를 훨씬 더 효과적으로 할 수 있습니다. 오늘은 이 세 가지 기술의 개념과 차이, 활용 사례를 깊이 있게 다뤄볼게요.

 

1. Prefetching: 예측 기반 리소스 로드

 

🌟 “사용자가 다음에 필요로 할 리소스를 미리 준비”

 

Prefetching은 브라우저가 사용자의 미래 행동을 예측해 특정 리소스를 미리 백그라운드에서 로드하는 기술입니다.

사용자가 아직 클릭하지 않았지만, 곧 클릭할 가능성이 높은 링크의 리소스를 준비하는 방식이죠.

 

📋 특징

• 언제?

현재 페이지 렌더링 이후, 여유 리소스를 사용해 비동기로 로드합니다.

• 사용 목적?

사용자가 페이지 이동 시, 로드 시간을 단축합니다.

• 어디에 사용?

예를 들어, 네비게이션 메뉴, 다음 페이지 링크.

 

🔧 HTML 예제

 

<link rel="prefetch" href="/next-page.html">

 

🛠️ React/Next.js 예제

 

import Link from "next/link";

 

function HomePage() {

  return (

    <Link href="/about" prefetch={true}>

      About Us

    </Link>

  );

}

 

2. Preloading: 현재 페이지를 위한 리소스 우선 로드

 

🌟 “현재 페이지에 꼭 필요한 리소스를 최우선적으로 준비”

 

Preloading은 현재 페이지 렌더링에 필요한 리소스를 우선적으로 다운로드하도록 브라우저에 지시하는 방식입니다.

브라우저가 기본적으로 리소스를 로드하는 우선순위를 조정하는 데 도움을 줍니다.

 

📋 특징

• 언제?

현재 페이지 렌더링 중 중요한 리소스를 먼저 로드합니다.

• 사용 목적?

사용자가 페이지에서 바로 보게 될 핵심 리소스를 빠르게 준비.

• 어디에 사용?

웹폰트, 중요한 CSS 파일, 메인 배너 이미지 등.

 

🔧 HTML 예제

 

<link rel="preload" href="/styles.css" as="style">

<link rel="preload" href="/image.jpg" as="image">

 

🛠️ React 예제

 

function App() {

  return (

    <>

      <link rel="preload" href="/styles.css" as="style" />

      <img src="/image.jpg" alt="Main Banner" />

    </>

  );

}

 

3. Prerendering: 미래를 위한 완벽한 준비

 

🌟 “다음 페이지를 완전히 렌더링하고 준비”

 

Prerendering은 페이지의 리소스뿐 아니라, 페이지 자체를 미리 렌더링하여 준비하는 방식입니다.

사용자가 링크를 클릭했을 때 즉시 렌더링됩니다.

 

📋 특징

• 언제?

사용자가 클릭할 가능성이 높은 페이지를 예상하여, 전체 페이지를 미리 렌더링.

• 사용 목적?

페이지 전환 시 지연 없이 즉시 로드.

• 어디에 사용?

첫 방문 이후 바로 이동할 가능성이 높은 페이지.

 

🔧 HTML 예제

 

<link rel="prerender" href="/next-page.html">

 

🛠️ React 예제

 

React에서는 Prerendering을 직접 처리하기보다는 Next.js의 Static Generation 같은 기술을 활용하는 것이 일반적입니다.

 

// Next.js

function getStaticProps() {

  return { props: { data: "Prerendered Data" } };

}

 

export default function Page({ data }) {

  return <div>{data}</div>;

}

 

4. 주요 차이점 비교표 📊

 

기술 사용 시점 주요 목적 활용 예시

Prefetching 현재 페이지 렌더링 완료 후 여유 리소스 활용 다음에 필요할 리소스 준비 링크된 다음 페이지 데이터

Preloading 현재 페이지 렌더링 중 우선 처리 현재 페이지의 핵심 리소스 준비 CSS, 웹폰트, 중요 이미지

Prerendering 미래에 방문할 페이지를 완전히 렌더링 사용자가 클릭 즉시 콘텐츠 제공 사용자 행동 예측 기반 페이지 전환

 

5. 언제, 무엇을 사용해야 할까? 🧐

 

🔍 Prefetching

• 사용자가 링크를 클릭할 가능성이 높은 경우.

• 네비게이션이나 추천 콘텐츠에 적용.

 

🔍 Preloading

• 현재 페이지에 중요한 리소스가 있다면.

• 렌더링 속도가 중요한 CSS, JS, 이미지 파일에 적용.

 

🔍 Prerendering

• 특정 페이지로의 전환이 매우 높은 확률로 발생하는 경우.

• 사용자 여정에서 확실히 다음에 방문할 페이지를 준비.

 

6. 최적화 팁 🎯

1. 사용자 행동 예측

사용자가 자주 방문하는 패턴을 분석해 Prefetching과 Prerendering을 적용합니다.

2. 리소스 크기 고려

큰 리소스는 Preloading으로 제한적으로 처리하고, 작은 리소스는 Prefetching으로 관리하세요.

3. Lighthouse로 모니터링

Google Lighthouse를 활용해 성능 점수를 확인하고, 최적화 결과를 분석하세요.

 

결론: 사용자 경험을 위한 전략적 선택이 중요

 

Prefetching, Preloading, Prerendering은 각각의 목적과 사용 시점이 다릅니다. 올바른 기술을 적절히 사용하면 페이지 로드 속도와 사용자 경험을 크게 개선할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당!🌷