웹 애플리케이션의 성능을 최적화할 수 있는 방법들에 대해서 아는대로 설명해주세요.

웹 애플리케이션의 성능을 최적화할 수 있는 방법들

1️⃣ 코드 스플리팅(Code Splitting) ✂️

필요한 코드만 먼저 불러오자!

SPA(싱글 페이지 앱)에서 모든 JS 파일을 한 번에 불러오면 너무 무겁죠!
✅ 페이지별로 필요한 파일만 나눠서 로드하면 초기 로딩 속도가 빨라져요.

💻 예시 (React + React.lazy)

const MyPage = React.lazy(() => import('./MyPage'));

<Suspense fallback={<Loading />}>
  <MyPage />
</Suspense>

---

2️⃣ 레이지 로딩(Lazy Loading) 🐢

보이는 것만 불러오자!

이미지나 동영상은 스크롤해서 보일 때만 로딩되도록 하면
네트워크를 아낄 수 있어요!

💻 예시 (HTML)

<img src="photo.jpg" loading="lazy" alt="이미지" />

✅ 크롬, 사파리 등 최신 브라우저 지원!

---

3️⃣ 이미지 최적화 🖼

이미지는 꼭 압축하거나 포맷 변경!

• JPG → WebP 전환 (50% 용량 절감)
• 필요 이상 큰 이미지는 ❌

✅ WebP 예시:

<picture>
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="이미지" />
</picture>

---

4️⃣ 캐싱(Cache) 활용 ♻️

이미 불러온 건 다시 안 불러오게!

브라우저에 캐시 전략을 설정하면
한 번 받은 JS, 이미지 등을 재사용할 수 있어요.

📄 예시 (HTTP 헤더)

Cache-Control: max-age=31536000

💡 CDN 설정에서도 활용 가능!

---

5️⃣ JS 로딩 최적화 📜

자바스크립트 때문에 화면이 멈추면 안돼요!

• async: 스크립트를 병렬로 다운로드 후 즉시 실행
• defer: HTML 파싱이 끝난 후 실행

💻 예시

<script src="main.js" async></script>
<script src="analytics.js" defer></script>

---

🎯 한눈에 보는 요약

최적화 방법 설명

코드 스플리팅	필요한 JS 파일만 분리 로드
레이지 로딩	스크롤에 따라 이미지/리소스 나중에 로딩
이미지 최적화	WebP 사용, 용량 줄이기
캐싱	중복 다운로드 방지
async / defer	JS가 DOM 렌더링을 막지 않도록 설정

 

---

웹 애플리케이션의 성능을 최적화할 수 있는 방법

 

웹 애플리케이션 성능 최적화에는 여러 가지 방법이 있습니다.

우선, 코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드할 수 있습니다. 이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선할 수 있습니다.

또한, 레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식을 적용할 수 있습니다. 예를 들어, 사용자가 페이지를 스크롤할 때 하단의 이미지가 필요해지면 그때 비로소 이미지를 불러오는 것입니다. 이렇게 하면 불필요한 리소스 로딩을 줄여 성능을 높일 수 있습니다.

이미지에 대해서는 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법이 있습니다. 이를 통해 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다.

또한, 캐싱을 활용하면, 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능을 크게 향상시킬 수 있습니다. 적절한 캐시 정책을 설정하는 것이 매우 중요합니다.

자바스크립트 로딩 시에는 비동기 로딩(async) 이나 지연 로딩(defer) 을 적용하여 자바스크립트가 DOM을 차단하지 않도록 할 수 있습니다. 이를 통해 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬로 불러오거나, 적절한 타이밍에 로드하게 되어 사용자 경험이 더 쾌적해질 수 있습니다.