웹 성능 최적화 방법

프론트엔드 성능 측정 왜 해야할까?

프론트엔드에서 측정해야 하는 성능을 무엇일까?

1. 로딩 속도
1. FCP(First Contentful Paint): 첫 요소가 로드 될 때까지 걸리는 시간
2. FMP(First Meaningful Paint): 사용자에게 첫 요소가 로드 될 때까지 걸리는 시간
• FMP의 경우 약 20%의 항목에서 정확하지 않다고 하여, 현재는 LCP를 기준으로 로딩 속도 측정
3. LCP(Largest Contentful Paint): 주요 컨텐츠가 로드 될 때까지 걸리는 시간





화면에서 가장 큰 요소가 계속 변경, 아래는 가장 큰 화면이 렌더 후 다른 요소가 렌더되고 있지만 다른 요소는 렌더되고 있지 않음 ⇒ LCP를 이용해 로딩속도 확인

2. 렌더링 성능
1. 60은 사람이 자연스럽다고 느끼는 초당 화면 수
2. 한 화면이 그려지는 시간이 1s/60 = 약 16ms 여야지 우리눈에 자연스럽게 보임.
3. 브라우저 렌더링 과정

3. 메모리 누수
1. 할당된 자원이 제때 해제되지 않고, 계속해서 메모리에 남아있는 현상
2. 대부분은 가비지 콜렉터에 의해 해제가 되지만, 다음과 같은 이유로 인해 해제가 되지 않는 경우가 있습니다.
3. 위 그래프와 다르게 아래 그래프는 힙과 노드가 증가만 할 뿐 감소하지 않는 것을 확인할 수 있다.

4. Web Vitals



1. LCP 위에서 했음
2. FID(First Input Delay): 사용자의 행동에 대해 이벤트 핸들러가 작동할 때 까지의 시간
1. 사용자의 이벤트를 받고, 실제로 처리할 수 있게 될 때까지 걸리는 시간을 FID라고 한다.(입력에 대한 반응)

3. CLS(Cumulative Layout Shift): 시각적인 안정성 측정 시 사용
1. 이런 변경도 계산



4. 성능 측정 체크리스트

성능 측정, 어떻게 할 수 있을까?

1. Lighthouse
1. 구글이 제시한 Web Vitals를 이요하여 성능을 측정하고 결과를 제공
2. 어느 부분에서 성능적인 문제가 있는지 보여줌 ⇒ 결국 이 부분을 향상 시킨다는 것을 목표로 하면 될 듯, 각 페이지 별로 스크린샷, 다른 환경에서 어떤 결과가 나오는지 찍어두고 리팩토링을 한 뒤 어떻게 개선 되었는지 비교 분석하는 방향으로
3. 개발자 도구, 퍼포먼스, 네트워크 탭
• 퍼포먼스: 직접 원하는 구간을 녹화함으로써 네트워크 렌더링, 메모리 전반에 대한 사항 확인
• 메모리: 스냅샷 간의 차이를 비교해서 어느 항목에서 누수가 발생하는지 확인 가능
• 네트워크: 네트워크 탭을 통해 에셋, 네트워크 요청이 얼마나 걸리는지 확인 가능
4. 리액트 프로파일러
• 컴포넌트 별 렌더링 시간 파악 가능
• 인터랙션 변화 추적
• 모니터링 도구
• 제니퍼 프론트
• 뉴렐릭

성능 측정 시 고려할 것들

참고자료

[최적화] 웹 성능 최적화 방법 5분 완성

it계열 회사에 재직하면 웹성능 최적화는 쉽게 접할 수 있는 이슈이자 피할 수 없는 숙제이다. 성능 최적화 방법 몇가지를 알고 계신가요? 알고있는 성능 최적화 방법을 모두 설명해주세요. ( ...🤔 전부요..? ) 성능 최적화 내지는 웹성능 최적화 를 구글에 검색하면 수많은 이론과 자료가 나온다. 어떤 부분에 초점을 맞추느냐에 따라서 그 방법은 분류 또한 다양해진다.

https://velog.io/@hsecode/%EC%B5%9C%EC%A0%81%ED%99%94-%EC%9B%B9-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-%EB%B0%A9%EB%B2%95-5%EB%B6%84-%EC%99%84%EC%84%B1

[10분 테코톡] 🍺 서니의 프론트엔드 성능 측정

https://www.youtube.com/watch?v=A6J74xLWqYg

웹사이트 성능을 위한 12가지 최고의 웹사이트 속도 테스트 도구 | AppMaster

아무도 기다릴 시간이 없는 바쁜 세상에서 방문자는 웹사이트가 더 빨리 로드되는 것도 좋아합니다. 따라서 사이트 방문자를 판매로 전환하기 위해 웹 사이트 로드 시간을 최적화하는 것이 불가피해졌습니다. 방문자가 웹 페이지에 머물고 전환율을 높이려면 최적화된 웹 사이트를 통해 더 나은 사용자 경험을 제공해야 합니다.

https://appmaster.io/ko/blog/12gaji-coegoyi-websaiteu-sogdo-teseuteu-dogu