[CS] 프론트엔드 성능 최적화 방법 알아보기 🔍

 

웹 개발을 하면서 중요하다고 생각하는 것은 UI/UX인 것 같다.

그렇다면 프론트엔드에서 성능을 최적화할 수 있는 방법은 뭐가 있을까? 🤔

---

이미지 최적화

     문제: 큰 이미지 파일은 페이지 로딩을 느리게 만듦.

     

     [해결방법]

• 이미지 압축: TinyPNG 같은 도구로 용량 줄이기
• WebP 포맷 사용: JPEG/PNG보다 훨씬 가볍고 품질 좋음
• 필요한 크기만 로딩: 너무 큰 이미지 불러오지 말고, 사용 위치에 맞는 크기로 리사이즈

<!-- 나쁜 예 -->
<img src="/images/hero-original.png" width="300" height="200">

<!-- 좋은 예 -->
<img src="/images/hero-optimized.webp" width="300" height="200" loading="lazy">

---

지연 로딩 (Lazy Loading)

     문제: 사용자가 안 보는 부분의 리소스를 처음부터 다 불러오면 느림.

     

     [해결방법]

• 이미지나 컴포넌트는 필요할 때만 로딩

<!-- 이미지 지연 로딩 -->
<img src="product.jpg" loading="lazy">

<!-- React에서 컴포넌트 lazy load -->
const ProductPage = React.lazy(() => import('./ProductPage'));

---

DOM 조작 최소화

     문제: DOM을 자주 건드리면 렌더링 성능이 떨어짐.

 

     [해결방법]

• 변경 사항 한 번에 적용 (ex: documentFragment)
• React/Vue 같은 프레임워크 사용 시, state 변경 최소화

// 나쁜 예
list.forEach(item => {
  const el = document.createElement('li');
  el.textContent = item;
  document.body.appendChild(el); // 매번 DOM 수정
});

// 좋은 예
const fragment = document.createDocumentFragment();
list.forEach(item => {
  const el = document.createElement('li');
  el.textContent = item;
  fragment.appendChild(el);
});
document.body.appendChild(fragment); // 한 번만 DOM 수정

---

비동기 처리 활용

     문제: 모든 스크립트를 동기로 실행하면 로딩 막힘.

 

     [해결방법]

• <script async> 또는 <script defer> 사용
• API 요청은 fetch나 axios로 비동기 처리

<!-- 좋은 예: HTML 렌더링 끝나고 스크립트 실행 -->
<script src="main.js" defer></script>

---

[script 실행 순서에 관한 내용은 아래 글의 '자바스크립트 코드는 언제 실행될까?' 부분 참고!] ⤵️

https://y-flm.tistory.com/79

[CS] 브라우저의 렌더링 과정

---

이 외에도 불필요 라이브러리 제거, CSS Animation 활용 등이 있고, LightHouse를 이용해서 성능을 측정할 수도 있다!

---

[최종 요약]

방법	효과
이미지 최적화	로딩 속도 개선
코드 최소화/압축	파일 사이즈 ↓
지연 로딩	처음 로딩 빠르게
캐싱	재방문 시 빠르게
라이브러리 정리	불필요한 용량 ↓
DOM 조작 최소화	렌더링 부드럽게
비동기 처리	브라우저 멈춤 방지
Core Web Vitals 최적화	SEO와 UX 개선