CS2 [CS 지식] FCP, TTI, LCP는 무엇인가 🎈 FCPFirst Contentful Paint(이하 FCP)는 웹 성능 메트릭 지표 중 하나이다. 페이지가 로드되기 시작한 시점부터 페이지에서 최초로 '의미 있는 컨텐츠가 렌더링 되는 순간’ 까지를 측정한다. 측정되는 최소단위는 다음과 같다.단일 텍스트 문자하나의 이미지SVG의 한 부분흰색이 아닌 Canvas 요소✨ 위의 요소 중 하나가 렌더링 완료되면 FCP로 측정한다. 측정되지 않는 요소는 다음과 같다.페이지 레이아웃을 위한 빈 컨테이너컬러나 사이즈가 설정이 되어 있더라도 해당 요소가 렌더링 되었을 때는 FCP로 측정하지 않는다.로딩 스피너나 스켈레톤 UI사실 처음 이 부분은 스피너가 애니메이션으로 작동하고 화면 영역을 구성하고 있기 때문에 FCP로 측정이 될 줄 알았으나 아래와 같이 코드를 .. 2025. 2. 4. [CS 지식] Lazy Loading 🎈 의미레이지 로딩이란 중요도가 떨어지거나 현재 화면에 보이지 않는 요소들의 로딩을 뒤로 미루어 로딩 성능을 향상시키는 최적화 기술을 의미한다. 사용하는 이유하나의 페이지에 많은 정보를 포함하는 경우 요소들이 모두 로드될때까지의 시간이 오래걸리게 된다. 이러한 문제는 사용자 경험을 저하시키게 된다. 현재 당장에 사용자가 보고 있는 화면 요소를 우선적으로 로딩하고 나머지 뷰포트를 벗어난 영역에 대해서는 추후 뷰포트에 들어올때 로드를 하는 방식을 사용하여 페이지에 최초 접근 시 빠르게 로딩을 완료할 수 있게 해준다. 이탈률웹사이트 로딩속도와 이탈률의 관계도를 보여주는 데이터는 다음과 같다.로딩 시간 이탈률로딩 시간이탈률1초 이하7%2초13%3초16%4초10%5초28%5초 이상26%표는 BrowserStac.. 2025. 2. 1. 이전 1 다음