/ ACTIVITY

DEVOCEAN 6월 Tech 세미나 - 웹 프론트엔드 성능 최적화 방법 및 적용 사례

대외활동 게시글 목록

웹 프론트엔드 성능 최적화 방법 및 적용 사례

6월 테크 세미나 주제는 웹 프론트엔드 성능 최적화 방법 및 적용 사례에 관한 내용이었습니다.

세션 1. 웹 프론트엔드 성능 최적화를 해야 하는 당위성

  • 웹 성능 최적화를 수행하는 이유
  • 웹 성능 최적화 방법
  • 웹 성능 최적화 경험 및 팁 공유

세션 2 : ifland 웹 프론트엔드 성능 최적화 적용 사례

  • ifland 및 ifland studio 소개
  • ifland studio 웹 성능 최적화 사례 공유
  • 웹 성능 최적화 경험 및 팁 공유

로 이루어진 세미나였습니다.

https://devocean.sk.com/vlog/view.do?id=423&vcode=A03

세션 1. 웹 프론트엔드 성능 최적화를 해야 하는 당위성

웹 프론트엔드 최적화는 사용자와 상호작용에 밀접한 관계를 가짐.
Site speed가 0.1초 향상될 때 평균 주문 가치가 높아짐
Largest Contentful Paint : 로딩 속도 측정
First Input Delay : 상호작용성 측정
Cumulative Layout Shift : 시각 안정성 측정

INP : FID의 대체로 전반적인 사용자와 상호작용을 관찰하여 페이지 민감도를 평가하는 요소

Core Web Vitals, Real User Monitoring, Page speed audit reports 등 다양한 Tool로 사용자 경험에 대한 평가를 진행할 수 있음

LCP 리소스는 HTML 소스에서 찾을 수 있도록 하며, 우선순위를 갖고 TTFB를 최적화하기 위한 CDN을 사용하여 최적화가 가능

CLS 최적화는 컨텐츠의 명시적 크기 설정, 레이아웃을 유발하는 CSS 사용 애니메이션 지양, bfcache에 대한 자격 요건 충족 등을 통해 가능

FID는 긴 작업을 피하고, 불필요한 Javascript와 대규모 렌더링 업데이트를 피함으로써 최적화 가능

세션 2 : ifland 웹 프론트엔드 성능 최적화 적용 사례

ifland : Social Metaverse Service (공동 공간 ifsquare + 개인 공간 ifhome)

서비스 진입점이 가장 많이 사용하는 지역 -> 최적화 대상

Measure -> Analyze -> Optimize의 반복

Measure : 최적화 적용 전 측정
Render Blocking Resource, Script Loading option, Image 용량 등 다양한 문제
-> 모바일 웹에서도 문제 발생 여부 확인

최적화 후 약 30% 이상의 감소 효과를 볼 수 있음

마무리

웹 프론트엔드 개발자는 성능 개선을 통해 서비스 향상과 비즈니스 향상에 기여할 수 있으며 측정 가능한 지표를 정의하고 사용자 중심 개선이 필요하다.
항상 경량화를 염두해두고 개발 코드를 작성하자.

느낀점

작년 고급 웹프로그래밍에서 프론트엔드와 백엔드를 경험할 때는 작동만 되게끔 코드를 작성하기 급했었는데 실제 현업에서는 이러한 고민들이 있다는 것을 알게 되었고 서비스에서 큰 영향을 미친다는 것을 배웠습니다.

실제로 웹 프로젝트는 아니었지만, AI 모델 서빙 프로젝트를 진행할 때마다 모델 추론 시간과 프론트엔드에서의 출력 시간을 줄이기 위해 고민했던 기억이 떠올랐습니다. 당시에 그래서 저는 모델을 최대한 경량화 시키고자 했으며 백엔드에서는 모델을 미리 저장해두고 출력을 진행하는 방식으로 진행했었습니다. 하지만 어느 정도가 적당한거야? 라는 의문을 가졌었는데 LCP, FID, CLS 등 이런 값들을 통해 웹 퍼포먼스를 측정한다는 것이 가장 인상 깊었습니다.

앞으로 프로젝트에서 개발 완성이 목표가 아닌 지속적인 개선을 위한 프로젝트도 진행하고 싶다는 생각이 들었습니다.