레이아웃 스레싱

레이아웃 스레싱은 웹 페이지에서 발생할 수 있는 문제 중 하나로 브라우저 엔진이 레이아웃 계산을 반복적으로 수행하면서 발생한다.

레이아웃은 웹 페이지의 요소들의 위치와 크기를 결정하는 과정이다.

브우저는 웹 페이지의 요소들에 CSS 스타일을 적용하고, 각 요소의 위치와 크기를 계산하여 화면에 표시한다.

이 때 , 레이아웃 작업은 비용이 큰 작업으로, 브라우저는 최적화를 위해 레이아웃 계산을 최적화하려고 한다.

레이아웃 스레싱 발생 환경

자바스크립트에서 스타일 변경

자바스크립트 코드가 dom요소의 스타일을 변경하면 브라우저는 해당 요소와 관련된 레이아웃을 다시 계산한다.

자바스크립트에서 레이아웃 정보 읽기

JavaScript 코드에서 DOM 요소의 위치나 크기와 같은 레이아웃 정보를 읽을 때, 브라우저는 해당 정보를 제공하기 위해 레이아웃 계산을 수행한다 → 이해안감

최적화 방법

• CSS 스타일 변경을 최소화 한다. 가능한 경우 CSS 애니메이션 등을 사용한다.(리플로우, 리페인트 안일어남)
• 자바스크립트에서 레이아웃 정보를 반복적으로 읽는 것을 피한다. 필요한 경우 한 번만 읽도록 최적화 한다.
• 레이아웃 변경이 필요한 경우에 가능한 한 한 번에 처리하도록 묶는 등 최적화된 방식을 사용한다.

레이아웃 시프트

레이아웃 시프트는 Core Web Vitals 중 하나인 CLS(Cumulative Layout Shift, 누적 레이아웃 이동)의 지표 중 하나이다.

CLS는 웹 페이지의 시각적 안정성을 측정하기 위한 지표이다. 사용자 경험에 큰 영향을 미칠 수 있는 레이아웃 시프트를 측정한다.

CLS는 웹 페이지의 수명 주기 동안 발생하는 모든 레이아웃 시프트를 계산하여 평균 점수를 제공한다. 점수는 0에서 1 사이의 범위로 표현되고, 0에 가까울수록 좋은 사용자 경험을 의미한다. 1에 가까울수록 레이아웃 시프트가 빈번하게 발생되어, 사용자는 예상치 못한 페이지 이동이나 버튼 클릭 등으로 불편을 느낄 수 있다.

최소화 방법

• 이미지, 비디오 등 리소르의 크기를 사전에 지정하여 로딩 시 레이아웃 시프트를 방지한다.
• 폰트 로딩에 대한 적절한 처리를 수행하여 텍스트의 레이아웃 시프트를 방지한다.
• 외부 리소스(광고, 외부 스크립트) 의 크기와 레이아웃 변화를 사정에 예측하여 CLS를 줄인다.

LCP

LCP(Largest Contnentful Paint)는 Core Web Vitals 중 하나이다.

LCP는 웹 페이지 로딩 성능을 측정하는 지표 중 하나이다. 사용자가 페이지의 주요 콘텐츠를 시각적으로 확인할 수 있는 시점을 측정한다.

페이지 로딩 중에 가장 큰 콘텐츠 요소(Largest Contentful Element) 가 화면에 나타나는 시간을 측정한다.

일반적으로 LCP는 이미지, 비디오, 텍스트 블록 등과 같은 큰 콘텐츠 요소를 의미한다. 사용자가 페이지의 주요 콘텐츠를 빠르게 볼 수 있을 때, 좋은 사용자 경험을 제공한다고 판단한다.

영향받는 사항

네트워크 지연

콘텐츠를 가져오는동안 네트워크 지연은 LCP를 늦출 수 있다.(안 좋아진다 이 말임)

리소스 크기

LCP는 페이지에서 로드되는 가장 큰 콘텐츠 요소의 크기에 의해 결저왼다. 따라서 리소으의 압축, 최적화 및 적절한 크기 조정은 LCP 개선에 도움이 된다.

블로킹 자바스크립트 및 CSS

LCP 는 렌더링을 차단하는 자바스크립트 또는 CSS로드에 영향을 받을 수 있다. 자바스크립트와 CSS를 최적화하여 브라우저 렌더링을 방해하지 않도록 해야한다.