[GDGoC Ewha] Part Exchange 세션

11월 20일, GDG Ewha 6기의 파트 익스체인지 세션이 진행됩니다.

파트 익스체인지 세션에서 Web, Backend, App, AI 각 파트의 멤버들이 자신이 속한 파트 이외의 파트를 선택하여, 조를 이뤄 해당 파트에 관한 지정된 키워드에 대해 조사하고, 정리하여 발표하는 시간을 가질 예정입니다.

웹 파트 키워드

• CSR vs SSR vs ISR
• DOM과 VirtualDOM (중)
• React와 Next.js (하)
• 다양한 CSS Module (하)

백엔드 파트 키워드

• Restful API
• RDBMS vs NoSQL
• Serverless 아키텍처
• CI/CD 와 DevOps
• 컨테이너 환경과 쿠버네티스

앱 파트 키워드

• Widget과 위젯 트리
• StatelessWidget vs StatefulWidget
• Hot Reload vs Hot Restart
• 상태관리 개념 (상태관리가 필요한 이유, 기본 상태관리와 외부 패키지를 이용한 상태관리 비교)

AI 파트 키워드

• Epoch & Batch Size
• Activation Functions (활성화 함수)
• Convolutional Neural Network (CNN)
• word2vec (Word to Vector)
• Transfer Learning (전이 학습)과 Fine-Tuning (파인 튜닝)

 

이번 포스트에서는 프론트엔드 분야에 속하는, 웹 애플리케이션이 빠르고 효율적으로 동작하도록 하는 데 중요한
"프론트엔드 성능 최적화 기법"에 대해 정리해보면서 파트 익스체인지 세션을 미리 체험하는 시간을 가질 예정입니다.

프론트엔드 성능 최적화 기법을 통해 향상된 성능으로 최적화 된 웹사이트는 사용자 경험을 크게 향상시킬 수 있습니다.

---

브라우저 동작원리

우선 프론트엔드의 성능 최적화를 확인하기에 앞서서 브라우저가 어떻게 화면을 사용자에게 보여주는지를 알아야 합니다.

브라우저 로딩 과정: 파싱 > 스타일 > 레이아웃(리플로우) > 페인트 > 합성 & 렌더

 

웹 페이지 로드 최적화

(1) 브라우저 상에서 최적화

DOMContentLoaded: HTML과 CSS가 파싱된 후 발생하는 이벤트로, 페이지 구조가 준비된 시점이다. 이 시점부터 페이지를 렌더링할수 있다.

Load: HTML뿐만 아니라 이미지, 스크립트 파일, 스타일 시트 등 모든 리소스가 로드된 시점이다.

(2) 리소스 최적화

이미지 최적화
이미지 크기를 적절히 조정하고, WebP 같은 압축 포맷을 사용하여 용량을 줄인다. 필요 없는 이미지 리소스를 제거하는 것도 중요하다.

https://squoosh.app/ => Squoosh로 이미지를 WebP 형식으로 최적화하기

Lazy Loading
페이지 로드 시점에서 화면에 보이는 이미지나 리소스만 불러오고, 나머지는 사용자가 스크롤할 때 불러오는 방식이다. 이를 통해 초기 로딩 시간을 단축할 수 있다.

(3) 코드 분할 (Code Splitting)

JavaScript 코드 분할
필요한 최소한의 코드만 초기 로딩 시 불러오고, 나머지 코드는 사용자 상호작용에 맞춰 지연 로딩한다. 이렇게 하면 초기 로딩 시간이 단축된다.

 

웹 페이지 렌더링 최적화

(1) DOM 최적화

불필요한 DOM 노드 제거
복잡한 DOM 구조는 렌더링 성능을 저하시킬 수 있다. 최소한의 DOM 노드를 유지하는 것이 중요하다.

Reflow, Repaint 최소화
스타일 변경 시 레이아웃과 관련된 변경은 Reflow와 Repaint를 발생시켜 성능에 영향을 미친다. 

• Reflow는 레이아웃 재계산을 의미한다. 페이지의 구조나 요소들이 변경될 때, 브라우저는 이를 반영하기 위해 전체 DOM 구조를 재계산한다. 예를 들어, HTML 요소의 크기, 위치, 레이아웃이 변할 때 Reflow가 발생한다.
• Repaint는 화면의 스타일이 변경되었을 때 발생하는 프로세스다. Repaint는 요소의 스타일 변경이 배치된 후 화면에 다시 그려지는 과정을 말한다. 하지만 레이아웃이 변경되지 않고, 스타일 속성(색상, 배경, 글꼴 등)만 바뀔 때 발생한다.
  
  
  

var div = document.getElementById('target');
 
div.style.padding = '12px';
div.style.width = '200px';
div.style.height = '400px'

-> 위의 코드와 같이 HTML 요소에 접근하여 요소의 스타일을 변경하는 코드는 최악의 경우 3번의 리플로우를 발생시킬 수 있다. 

아래는 위 코드를 cssText를 이용해 단 한번만 DOM 객체에 접근하여 수정할 수 있도록 해 Reflow, Repaint를 최소화 하여 최적화 시킨 코드이다.

var div = document.getElementById('target');
 
Ddiv.style.cssText = 'padding:12px; width:200px; height:400px';

 

이처럼 DOM tree의 빈번한 수정은 웹 어플리케이션의 성능이 하락시키는 주된 요인으로 작용하므로, Reflow, Repaint를 최소화하여 웹 성능을 향상시킬 수 있다.

(2) CSS 최적화

Critical CSS
초기 페이지 로딩에 필요한 필수 CSS만 먼저 로드하고, 나머지 CSS는 지연 로딩하는 방식이다. 이를 통해 첫 화면을 빠르게 표시할 수 있다.

불필요한 CSS 제거
사용되지 않는 CSS는 제거하여 리소스를 최소화한다. PurifyCSS와 같은 도구를 활용할 수 있다.

(3) 자바스크립트 최적화

비동기 로딩 (Async Loading)
자주 사용하지 않는 스크립트는 페이지 로드 후 비동기적으로 불러온다. 이렇게 하면 초기 로딩을 빠르게 할 수 있다.

Debouncing, Throttling 
사용자 입력이나 이벤트 리스너가 과도하게 실행되지 않도록 제한한다. 예를 들어, 스크롤 이벤트나 키 입력 이벤트를 최적화할 수 있다.

(4) 웹 폰트 최적화

폰트 서브셋화
폰트 파일 크기를 줄이기 위해 실제로 사용하는 글리프만 포함시킨다. 불필요한 문자는 제외하고 필요한 문자만 남긴다

폰트 로딩 최적화
font-display: swap 속성을 사용하면, 폰트가 로딩될 때 기본 폰트를 보여주고, 로딩이 완료되면 지정한 폰트로 교체된다. 페이지가 빠르게 렌더링된다.

 

캐싱과 네트워크 최적화

(1) 브라우저 캐싱

HTTP 캐시 헤더 설정
웹 리소스가 자주 변경되지 않으면, 브라우저에 리소스를 저장해 두어 페이지 로딩 속도를 개선할 수 있다.

Service Workers
이 기술을 사용하면 웹 애플리케이션은 오프라인에서도 동작하고, 빠르게 리소스를 캐싱할 수 있다.

(2) 콘텐츠 전송 네트워크 (CDN)

CDN 사용
전 세계에 분산된 서버를 통해 사용자가 가장 가까운 서버에서 리소스를 받아올 수 있다. 이를 통해 로딩 속도가 개선된다.

 

성능 측정 및 모니터링

Lighthouse
구글에서 제공하는 도구로, 웹 애플리케이션의 성능, 접근성, SEO 등을 분석할 수 있다. 크롬 개발자도구를 통해 접근 가능하다.
웹 사이트 내에서 최적화가 필요한 부분을 알려준다.

Web Vitals
페이지 로딩, 상호작용 시간, 시각적 안정성 등을 측정하는 중요한 지표를 제공한다. 이를 통해 실시간으로 웹 페이지 성능을 모니터링할 수 있다.

• Largest Contentful Paint는 인식되는 로드 속도를 측정하는 항목으로, 페이지의 주요 콘텐츠가 로드되었을 가능성이 높은 시점에 페이지 로드 타임라인에 점을 표시합니다.
• First Input Delay는 응답성을 측정하는 항목으로, 사용자가 페이지와 처음 상호 작용하려고 할 때 느끼는 경험을 정량화합니다.
• Cumulative Layout Shift는 시각적 안정성을 측정하는 항목으로, 눈에 보이는 페이지 콘텐츠의 예기치 않은 레이아웃 변화량을 정량화합니다.