[6월 Tech Seminar] 웹 프론트엔드 성능 최적화 방법 및 적용 사례

이번 테크 세미나를 통해 웹 프론트엔드 성능 최적화에 대해 조금 더 자세히 배우게 되었습니다.

특히, CWV로 웹 성능을 측정 할 때 LCP, FID, CLS 지표를 이용해 판단하고, 각 지표의 영역을 ifland에 최적화시킨 예시까지 보여주셔서 이해하기 쉽고 재미있게 세미나를 들을 수 있었습니다.

 

 

세미나를 들으면서 적어두었던 내용을 정리해보면

✅ Why should Web Performance be optimized?

‘왜 웹 성능 최적화를 시켜야 할까?’라는 질문에서 시작해보려고 합니다.

페이지 로드 속도는 사용자 경험에 큰 영향을 미치며 페이지 로드 속도가 빨라질 수록 사용자가 사이트에 머무는 시간이 더 길어진다(즉, business impact를 불러온다.)는 연구 결과가 해당 질문에 대한 답변을 할 수 있을 것 같습니다.

앞서 언급한 바와 같이 CWV(Core Web Vitals)로 웹 성능을 측정 할 수 있는데, 이는 LCP, FID, CLS 이 세가지 지표로 판단하게 됩니다.

• LCP(Largest Contentful Paint) : 화면이 떴을 때 사용자에게 보여지는 가장 큰 영역의 컨텐츠가 얼마나 빠르게 뜨는가?

→ 보통 이미지가 해당됨

• FID(First Input Delay) : 첫 Input이 들어갔을 때 얼마나 빠르게 반응하는가?

→ 사용자가 웹 페이지에 머무는 동안 모든 Input의 지연을 측정해야 효과적이라고 판단되어 모든 Input들을 체크 후 얼마나 지연이 있었는지 측정 후 평균을 내고자 곧 INP로 대체될 예정이라고 합니다.

• CLS(Cumulative Layout Shift) : 얼마나 비주얼이 안정적인가?

→ 예를 들어, 광고가 컨텐츠를 가리지 않는가?

 

 

✅ How to measure Web Performance?

‘웹 성능을 어떻게 측정하는가?’

 

 

웹 성능을 측정할 수 있는 툴은 크게 Google Tools와 Third Party Tools로 구분했을 때 아래와 같은 툴들이 존재합니다.

✔️ Google Tools

• Search Console
• PageSpeed Insights
• web-vitals JS
• Chrome User Experience Report

✔️ Third Party Tools

• CLOUDFLARE
• New Relic
• Akamai
• Calibre
• SpeedCurve
• Blue Triangle
• Sentry
• RAYGUN

 

이러한 툴을 이용하여 웹 성능을 파악 후 LCP, FID, CLS의 최적화 방법을 각각 아래와 같이 정리 할 수 있습니다.

✔️ LCP 최적화

• LCP resource(대체로 이미지) HTML에서 빠르게 찾아져야 함
• LCP resource가 우선시되어 다운로드 되도록 해야 함
• TTFB(Time To First Byte) 리소스를 최적화 하기 위해 CDN을 사용함

 

✔️ CLS 최적화

• 콘텐츠에 명확하게 사이즈를 명시해주면 됨
• 동적으로 로딩되는 컨텐츠가 주로 문제가 됨
• 사이즈가 명확하게 명시되지가 않은 상태로 그려지면서 컨텐츠가 아래로 밀리게 된 부분을 layout shift로 잡게 되고 악영향을 미치게 됨 (따라서 미리 확보해놔야 함)

→ 레이아웃에 흔들림이 생기는 애니메이션은 지양해야 함

 

✔️ FID 최적화

• 자바스크립트를 필요한 부분만 다운로드 하고 메인 스레드가 작업할 수 있도록 연결함

→ Why? 자바스크립트는 싱글 스레드임(멀티 스레드 X, 다른 작업이 동시에 작업 X)

• 불필요한 자바스크립트를 없애라
• 큰 랜더링 업데이트를 하지마라

 

✅ What is ifland studio(Web Performance Optimization Target)

이러한 성능 최적화 Social Metaverse Service인 Ifland에는 어떻게 적용되었는지 Measure(현재 상황을 측정, 인지) → Analyze(현상 분석 및 개선점 도출) → Optimize(최적화(개선) 적용) 순서대로 설명해주셨습니다.

 

 

✅ How to optimize web performance at ifland studio

최적화 전 개선해야 될 포인트는 총 10가지였으며 각각 아래 방법으로 최적화 되었습니다.

M1 : Render Blocking Resource 다수 존재

A1 :스크립트 로딩 옵션이 존재

⇒ O1 : 불필요 스크립트 제거 및 스크립트 로딩 옵션 지정을 통한 render blocking 요소 제거

 

M2 : 이미지 용량 문제

A2 : WebP, AVIF가 PNG, JPEG에 비해 압축률 우수

→ Image 포멧 PNG에서 WebP로 변경

⇒ O2 : 기존 대비 이미지 사이즈 크게 감소

 

M3 : 해상도에 맞지 않는 이미지 사용

A3 : picture source 태그 사용하여 Desktop, Mobile용 별도 이미지 제작 필요

⇒ O2, O3 : 기존 대비 이미지 하나당 사이즈 60~80% 감소

 

M4 : 네트워크 요청 낭비

A4 : 이미지 lazy loading / 메인 이미지 제외한 이미지에 대해 lazy loading 적용

⇒ O4 : 불필요한 네트워크량 감소

→ 페이지 초기 로드시 이미지 요청 수 20개에서 2개로 감소

 

M5 : 메인 이미지가 늦게 로드

A5 : 메인 이미지 Preload 적용

⇒ O5 : 메인 이미지 preload 적용하여 로딩속도 개선

 

M6 : 모바일 해상도에서 Header 아이콘 및 로고 이미지 늦게 로드

A6 : Header 아이콘을 html 내 inline svg로 추가, 로고 이미지 preload 추가

⇒ O6 : 자연스러운 웹 사이트 로딩으로 UX 개선

 

M7 : CSS, JS 용량 감소 여지 존재

A7 : CSS, JS, gzpi, minify 작업

⇒ O7 : 서버 네트워크 요청 용량 감소

 

M8 : 화면 영역에 불필요한 움직임 존재

A8 : 콘텐츠 로드 부분 영역 확보

⇒ O8 : CSS 수정을 통해 CLS 수치 0으로 개선

 

M9 : html, JS 중복 코드 발견

A9 : 코드 개선을 통한 소스 경량화

⇒ O9 : 서버 네트워크 요청 용량 감소

 

M10 : 재방문자 페이지 접속시간 단축 개선점 발견

A10 : 백엔드에서 브라우저 캐싱 설정(Request header 옵션 추가)

⇒ O10 : 일부 콘텐츠 브라우저 캐시 적용(예정)

 

 

✅ Lessons learned & Tips

세미나의 마무리로, ifland에 최적화 했던 경험들을 토대로 팁을 알려주셨는데 다시 한 번 웹 성능 최적화의 중요성을 생각해볼 수 있었던 좋은 시간이었습니다.

1. 웹 프론트엔드 개발자는 웹 성능 개선을 통해 서비스 향상에 크게 기여할 수 있다.
2. 웹 프론트엔드 성능 개선은 비즈니스 관점에서 상당히 중요하다. (로딩 시간이 길면 사용자는 이탈한다)
3. 사용자 중심으로 사이트를 지속적으로 개선하는 문화를 만들 필요가 있다.
4. 측정 가능한 지표를 정의하고 목표를 설정하고 달성하는 일은 재미있다. (인정 받기까지 한다면 더욱 좋다.