[데보션영] ‘웹 프론트엔드 성능 최적화 방법 및 적용 사례’ 테크세미나 후기

안녕하세요! 데보션 영 2기 '데보션시스터즈'팀의 서다원입니다.

이번 포스팅에서는 6월 테크세미나 [웹 프론트엔드 성능 최적화 방법 및 적용 사례] 후기를 공유해보려합니다.

저는 프론트엔드 개발자를 진로로 희망하고 있는데요. 그만큼 이번 테크 세미나에 관심이 가득했어요! 확실히 채용 공고를 보면 우대 사항에 ‘성능 최적화’ 개념이 나오곤 했거든요. 저 또한 사이트의 성능이 좋아야 좋은 사용자 경험을 제공할 수 있다- 라는 것은 머리로 알고 있지만 정확히 어떻게 하는지, 어떤 사례가 있는지는 잘 모르고 있었던 것 같아요.

한국의 사용자들은 로딩 타임이 2초동안 뜨지 않으면 사이트를 나가버린다고 합니다. 정말 충격이었어요. 아무리 사이트 백엔드 상의 로직을 잘 짜놓았다고 하더라도, 프론트엔드의 성능을 최적화 시켜 놓지 않았다면 그런 노력도 소용이 없어지겠다는 생각이 들었습니다. 페이지 로딩 속도가 사용자 경험에 굉장히 큰 영향을 미치는 것 같습니다. 추가로 0.1초의 사이트 속도 향상이 conversion rate 를 증가시키고, 주문량도 증가 시킨다고 하네요. 정말 어마어마한 영향력인 것 같아요. 한번 아래에 간단하게 세미나에서 인상깊게 들었던 키워드들을 정리해보았어요.

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

1️⃣ 웹 성능 최적화를 수행하는 이유

- 서비스 관점에서도 웹 성능 최적화는 중요(로딩시간, 이탈률)
- 백엔드 개발자, 디자이너, PM 도 웹 성능 최적화를 알아야 한다.
- 속도를 어떻게 정의할까?
    - 속도를 정의할 때 Core Web Vitals, 줄여서 CWV 라고 한다.
    - 구글에서 발표하기를 세가지 지표로 정의하자- 라고 했다고 한다(2020년도 초반).
    이전에도 속도를 말하는 지표는 있었지만, 이 CWV 가 유독 각광받은 이유는 ‘사용자 관점에서 정의된 지표’ 이기 때문이다. 세가지는 다음과 같다.
    - LCP(Largest Contentful Paint) : 화면에 처음 떴을 때 사용자에게 보여지는 가장 큰 컨텐츠가 얼마나 빨리 로딩이 되는지(보통은 이미지).
    - FID (First Input Delay) : 사용자가 입력을 했을 때 사이트가 얼마나 빨리 반응을 하는지.→ 대체 → INP (page’s overall responsiveness)
    - CLS (Cumulative Layout Shift) : 얼마나 비주얼이 안정적인지.
- 웹 사이트 성능 테스트 도구 : https://www.catchpoint.com/webpagetest
    - 위 사이트를 통해서 웹 페이지의 로딩 속도, 성능 및 최적화에 대한 다양한 측정 항목을 평가할 수 있다.

2️⃣ 웹 성능 최적화 방법

- LCP Optimization
    - LCP 자원(이미지 파일)이 HTML 에서 빨리 찾아져야
    - LCP 자원이 우선시 되어서 다운로드 되어야
    - CDN 사용(TTFD 자원)
- CLS Optimization
    - 동적으로 크기가 할당되는 것들에 사이즈를 fix
    - Animation / transition 사용을 피하기
    - Bfcache 사용
- FID Optimization
    - 긴 작업을 피하거나 분할
    - 불필요한 JS 사용을 피하기
    - 대규모 렌더링 업데이트를 피하기

🚀 세션 2. Ifland 웹 프론트엔드 성능 최적화 적용 사례

1️⃣ ifland 및 ifland studio 소개

- Social Metaverse Service
- Ifalnd studio : ifland 에서 아바타 의상을 만들 수 있는 곳

2️⃣ ifland studio 웹 성능 최적화 사례 공유

- 앱 성능 최적화 대상 페이지는?
    - 사용자들이 가장 많이 사용하고, 서비스의 진입점인 home(메인 페이지)

3️⃣ 웹 성능 최적화 경험 및 팁 공유

- WebPageTest
- Google Lighthouse
- Render Blocking Resource 다수 존재(이미지 로딩 느림)
    - 불필요 스크립트 제거 및 스크립트 로딩 옵션 지정을 통한 render blocking 요소 제거 (예 : defer 사용)
- 이미지 용량 문제
    - WebP, AVIF가 PNG,JPEG에 비해 압축률 우수
- 해상도에 맞지 않는 이미지 사용, 즉 Desktop과 Mobile 공통 이미지 사용
    - picture source 태그를 사용하여 Desktop과 Mobile 별도 이미지 적용
- 네트워크 요청 낭비 (페이지 로딩시 불필요한 이미지 한번에 로드)
    - 메인 이미지를 제외한 이미지에 대해 lazy loading 적용. 불필요한 네트워크량 감소를 위해 페이지 초기 로드 시 이미지 요청 수 20 ->2개로 감소
- 모바일 해상도에서 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 ]

1. Script에 옵션 추가 (defer, async)
2. WebP, AVIF 이미지 포멧 적용
3. Image lazy loading 적용
4. 리소스 Preload 옵션 적용
5. 개발코드는 작품을 만들 수 있지만, 부채가 될 수도 있음 (항상 경량화를 염두)
6. CWV 개선은 지속적인 노력이 요구되는 작업
7. 웹과 그를 위한 기술은 지속적으로 변화하고 발전함

🚀 [ Conclusion ]

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

🚀 포스팅을 마무리 하며

세미나를 들으니까 웹 프론트엔드 개발자가 정말 사용자 경험에 있어서 중요한 역할을 하고, 그만큼 좋은 프론트 엔드 개발자가 되기 위해서는 성능 최적화에 대해서도 열심히 공부를 해야겠다는 생각이 들었습니다. 이번 여름방학때에는 단순히 기능 구현에만 집중하지 않고 성능을 생각하면서 프로젝트를 개발하는 자세를 가져봐야겠다고 생각했어요! 멋진 세미나를 진행해주신 세미나 Speaker 분들께 감사드립니다! 👏