GatsbyJS 성능 최적화: 페이지 로딩 속도 향상 방법

GatsbyJS 성능 최적화: 페이지 로딩 속도 향상 방법

GatsbyJS는 기본적으로 빠르지만, 프로젝트 규모가 커질수록 로딩 속도를 최적화해야 할 필요가 있습니다.
이번 글에서는 Gatsby의 성능을 극대화하는 방법을 소개하겠습니다. 🚀

---

1. Gatsby 성능 최적화가 필요한 이유

웹사이트 속도는 SEO 점수, 사용자 경험(UX), 전환율 등에 영향을 미칩니다.
✅ Gatsby 성능을 저하시키는 요소

• 불필요한 대량의 GraphQL 쿼리
• 과도한 클라이언트 사이드 렌더링(CSR)
• 최적화되지 않은 이미지 및 코드
• 캐싱 및 CDN 미사용

---

2. 이미지 최적화 (gatsby-plugin-image)

반응형

이미지는 웹사이트에서 가장 많은 리소스를 차지하므로, 적절한 최적화가 필요합니다.

✅ 최적화 플러그인 설치

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp

✅ gatsby-config.js 설정

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`
  ]
};

✅ 이미지 최적화 적용 (GatsbyImage 사용)

import { GatsbyImage, getImage } from "gatsby-plugin-image";

const ImageComponent = ({ data }) => {
  const image = getImage(data.file.childImageSharp);
  return <GatsbyImage image={image} alt="최적화된 이미지" />;
};

export const query = graphql`
  query {
    file(relativePath: { eq: "image.jpg" }) {
      childImageSharp {
        gatsbyImageData(layout: CONSTRAINED, placeholder: BLURRED)
      }
    }
  }
`;

🚀 이제 이미지를 최적화된 형태로 로드하며, Lazy Loading도 자동 지원됩니다.

---

3. 코드 스플리팅(Code Splitting) 최적화

불필요한 코드가 번들에 포함되면 페이지 로딩 속도가 느려집니다.
Gatsby에서는 **동적 임포트(Dynamic Import)**를 사용하여 코드 스플리팅을 최적화할 수 있습니다.

✅ 코드 스플리팅 예제 (React.lazy 사용)

import React, { Suspense, lazy } from "react";

const HeavyComponent = lazy(() => import("../components/HeavyComponent"));

const HomePage = () => {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <HeavyComponent />
    </Suspense>
  );
};

export default HomePage;

✅ 장점

• HeavyComponent는 사용자가 필요할 때만 로드됨
• 초기 페이지 로딩 속도 개선

🚀 이제 페이지 로딩 속도가 향상됩니다.

---

4. Gatsby 캐싱 및 빌드 속도 최적화

Gatsby는 캐싱을 활용하여 페이지 빌드 속도를 최적화할 수 있습니다.

✅ Gatsby 캐시 삭제 후 다시 빌드

gatsby clean
gatsby build
gatsby serve

🚀 기존 캐시를 삭제하고 다시 빌드하면 불필요한 데이터가 제거됩니다.

---

5. Third-Party 스크립트 로딩 최적화

Google Analytics, 광고 스크립트 등 외부 스크립트가 많으면 페이지 로딩 속도가 느려질 수 있습니다.
👉 비동기 로딩(Async) 또는 지연 로딩(Defer) 방식으로 최적화해야 합니다.

✅ Google Analytics 비동기 로딩 (gatsby-plugin-google-gtag 활용)

npm install gatsby-plugin-google-gtag

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ["YOUR_GA_TRACKING_ID"],
        gtagConfig: { anonymize_ip: true },
        pluginConfig: { head: false }
      }
    }
  ]
};

✅ 장점

• Google Analytics 스크립트를 비동기로 로드하여 초기 페이지 렌더링을 방해하지 않음

---

6. PWA(Progressive Web App) 지원 (gatsby-plugin-offline)

PWA를 적용하면 웹사이트가 오프라인에서도 동작 가능하며, 속도도 향상됩니다.

✅ PWA 플러그인 설치

npm install gatsby-plugin-offline

✅ gatsby-config.js 설정

module.exports = {
  plugins: [`gatsby-plugin-offline`]
};

🚀 이제 사용자는 웹사이트를 캐싱하여 빠르게 로딩할 수 있습니다.

---

7. Gatsby 배포 시 CDN(Content Delivery Network) 활용

CDN을 사용하면 전 세계 어디에서나 빠른 속도로 웹사이트를 로딩할 수 있습니다.

✅ Netlify를 활용한 배포

npm install -g netlify-cli
netlify deploy --prod

✅ Netlify는 기본적으로 CDN을 제공하여 속도를 최적화합니다.

---

8. 결론

이번 글에서는 GatsbyJS의 성능을 최적화하는 다양한 방법을 배웠습니다.
✔ 이미지 최적화 (gatsby-plugin-image)
✔ 코드 스플리팅 (React.lazy)
✔ 캐싱 및 빌드 속도 최적화 (gatsby clean)
✔ Third-Party 스크립트 최적화 (gatsby-plugin-google-gtag)
✔ PWA 적용 (gatsby-plugin-offline)
✔ CDN을 활용한 배포 최적화 (Netlify, Vercel)

🚀 다음 글에서는 Gatsby에서 검색 엔진 최적화(SEO)를 적용하는 방법을 다루겠습니다!

---