화면 성능 개선하기

어플리케이션의 성능을 개선할 수 있는 요소를 찾아서 개선 해보아요

미션 진행 코드

사용자의 경험을 위해 어플리케이션의 성능을 검사 하고 개선점을 만들어봅시다.

웹 성능 테스트


TODO

  • 페이지 성능은 우선 기본적으로 가장 많이 방문하는 페이지나 트래픽이 많이 발생할 것으로 예상되는 페이지 등 중요하다는 페이지로 웹 성능 테스트 진행 해보아요

평가는 전체적인 점수와 각 측정 항목별 반응시간을 나타낸다.

  • First Contentful Patin : 첫번째 텍스트 혹은 이미지가 표시되는 시간

  • Speed Index : 컨텐츠가 얼마나 빨리 표시되는지 보여준다.

  • Largest Contentfull Paint : 최대 텍스트 혹은 이미지가 표시되는 시간

  • Total Blocking Time : FCP와 상호작용 시간 사이의 모든 시간의 합

  • Cumulative Layout Shift : 표시 영역 안에 보이는 요소의 이동을 측정

사이트
FCP
SI
LCP
TBT
CLS

지하철 노선도

3.1 s

3.2 s

3.1 s

0 ms

0

네이버 지도

0.7 s

3.6 s

4.0 s

1,240 ms

0.001

카카오 지도

0.8 s

0.9 s

0.8 s

0 ms

0

Reverse Proxy 개선하기


TODO

  • gzip 압축 설정

  • cache 설정

  • HTTP/2 설정


1

Gzip 압축 설정

2

Cache 설정

3

HTTP/2 설정

Tomcat 개선하기


Last updated