웹 개발을 하면서 중요하다고 생각하는 것은 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 실행 순서에 관한 내용은 아래 글의 '자바스크립트 코드는 언제 실행될까?' 부분 참고!] ⤵️
[CS] 브라우저의 렌더링 과정
브라우저의 렌더링 과정은 웹 개발자라면 필수적으로 알아야 할 지식 중 하나이다!간단히 말하자면, 우리가 작성한 HTML / CSS / JS를 브라우저가 화면에 그리는 과정을 말한다. 쉽게 이해해보기 위
y-flm.tistory.com
이 외에도 불필요 라이브러리 제거, CSS Animation 활용 등이 있고, LightHouse를 이용해서 성능을 측정할 수도 있다!
[최종 요약]
| 방법 | 효과 |
| 이미지 최적화 | 로딩 속도 개선 |
| 코드 최소화/압축 | 파일 사이즈 ↓ |
| 지연 로딩 | 처음 로딩 빠르게 |
| 캐싱 | 재방문 시 빠르게 |
| 라이브러리 정리 | 불필요한 용량 ↓ |
| DOM 조작 최소화 | 렌더링 부드럽게 |
| 비동기 처리 | 브라우저 멈춤 방지 |
| Core Web Vitals 최적화 | SEO와 UX 개선 |
'공부 > CS' 카테고리의 다른 글
| [CS] REST API란? (0) | 2025.04.20 |
|---|---|
| [CS] MPA vs SPA (프론트엔드 구조 알아보기 🔍) (0) | 2025.04.18 |
| [CS] CSR vs SSR vs SSG (웹 페이지 렌더링 방식 정리 🔍) (0) | 2025.04.16 |
| [CS] 쿠키 vs 세션 vs 로컬 스토리지 (0) | 2025.04.15 |
| [CS] HTTP(Hyper Text Transfer Protocol)란? (0) | 2025.04.14 |
