세션1. 웹 프론트엔드 성능 최적화를 해야하는 당위성
웹 성능 최적화를 수행하는 이유
-
서비스 관점에서도 웹 성능 최적화는 중요하다. (로딩시간, 이탈률)
- 백엔드 개발자, 디자이너, PM도 웹 성능 최적화를 알아야 한다.
-
Site speed improvement of just 0.1s leads to an increase in conversion rates & average order value
-
속도 정의 (=Core Web Vitals)
- LCP (Largest Contentful Paint)
- FID (First Input Delay) → 대체 → INP (page’s overall responsiveness)
- CLS (Cumulative Layout Shift)
-
속도 측정 도구
-
사용자의 데이터 (RUM)
-
발표자 분은 웹 페이지 테스트 라는 것을 주로 사용
-
RUM에서는 web-vitals JS를 주로 사용
웹 성능 최적화 방법
-
LCP Optimization
a. LCP 자원(이미지 파일)이 HTML에서 빨리 찾아져야 한다.
b. LCP 자원이 우선시 되어서 다운로드 돼야 한다.
c. CDN 사용 (TTFD 자원)
-
CLS Optimization
a. 동적으로 크기가 할당되는 것들에 사이즈를 fix 해주자
b. animations/transition 사용을 피하자
c. bfcache를 사용하자
-
FID Optimization
a. 긴 작업을 피하거나 분할하자
b. 불필요한 JavaScript 사용을 피하자
c. 대규모 렌더링 업데이트를 피하자
세션2. ifland 웹 프론트엔드 성능 최적화 적용 사례
ifland 및 ifland studio 소개
- Social Metaverse Service
- ifland studio
- ifland에서 아바타(ifme) 의상을 만들 수 있는 곳
ifland studio 웹 성능 최적화 사례 공유
- 앱 성능 최적화 대상 페이지는?
- 사용자들이 가장 많이 사용하고, 서비스의 진입점인 home(메인 페이지)
웹 성능 최적화 경험 및 팁 공유
- WebPageTest랑 Google Lighthouse 주로 사용
< 문제 상황 >
- Render Blocking Resource 다수 존재 (이미지 로딩이 느리다.)
💡 불필요 스크립트 제거 및 스크립트 로딩 옵션 지정을 통한 render blocking 요소 제거 (ex. defer 사용)
- 이미지 용량 문제
💡 WebP, AVIF가 PNG,JPEG에 비해 압축률 우수
- 해상도에 맞지 않는 이미지 사용, 즉 Desktop과 Mobile 공통 이미지 사용
💡
picture source태그를 사용하여 Desktop과 Mobile 별도 이미지 적용
- 네트워크 요청 낭비 (페이지 로딩시 불필요한 이미지 한번에 로드)
💡 메인 이미지 제외한 이미지에 대해
lazy loading적용
불필요한 네트워크량 감소를 위해 페이지 초기 로드시 이미지 요청 수 20개에서 2개로 감소
- 메인 이미지가 늦게 로드 (LCP. UX 영향)
💡 메인 이미지 Preload 적용하여 로딩속도 개선
- 모바일 해상도에서 Header 아이콘 및 로고 이미지 늦게 로드 (UX)
💡 Header 아이콘을 html 내 inline svg로 추가, 로고 이미지 preload 추가
- CSS, JS 용량 감소 여지 존재
💡 CSS, JS gzip, minify 작업 → 서버 네트워크 요청 용량 감소
- 화면 영역에 불필요한 움직임 존재
💡 CSS 수정을 통해 CLS 수치 0으로 개선 (콘텐츠 로드 부분 영역 확보)
- html, JS 중복 코드 발견 (Desktop, Mobile)
💡 코드 개선을 통한 소스 경량화
- 재방문자 페이지 접속시간 단축 개선점 발견
💡 백엔드에서 브라우저 캐싱 설정 (Request header 옵션 추가)
[ 결과 ]
[ Lessons learned & tips ]
- Script에 옵션 추가 (defer, async)
- WebP, AVIF 이미지 포멧 적용
- Image lazy loading 적용
- 리소스 Preload 옵션 적용
- 개발코드는 작품을 만들 수 있지만, 부채가 될 수도 있음 (항상 경량화를 염두)
- CWV 개선은 지속적인 노력이 요구되는 작업
- 웹과 그를 위한 기술은 지속적으러 변화하고 발전함
[ Conclusion ]
- 웹 프론트엔드 개발자는 웹 성능 개선을 통해 서비스 향상에 크게 기여할 수 있다.
- 웹 프론트엔드 성능 개선은 비즈니스 관점에서 상당히 중요하다. (로딩 시간이 길면 사용자는 이탈한다.)
- 사용자 중심으로 사이트를 지속적으로 개선하는 문화를 만들 필요가 있다.
- 측정 가능한 지표를 정의하고 목표를 설정하고 달성하는 일은 재미있다.
자료
