CLS(Cumulative Layout Shift)는 웹 페이지의 시각적 안정성을 나타내는 지표입니다. 페이지가 로드될 때 레이아웃이 변경되는 정도를 측정하며, 이를 계산할 때는 뷰포트에서 발생한 모든 레이아웃 변화의 크기와 빈도를 곱한 값을 누적하여 계산합니다. CLS는 사용자 경험을 크게 저해할 수 있으므로 최소화해야 합니다. 다음은 CLS를 발생시키는 사례입니다.
DOM 추가
DOM(Document Object Model)은 웹 페이지의 구조를 나타내는 계층 구조로, 웹 페이지의 HTML 요소를 표현합니다. 웹 페이지가 로드될 때 JavaScript를 사용하여 DOM 요소를 동적으로 추가하면, 이전에 로드된 콘텐츠와 충돌하여 레이아웃 변화가 발생할 수 있습니다. 이러한 경우에는 미리 요소의 크기를 예측하여 레이아웃이 변경되지 않도록 설계하는 것이 좋습니다.
이미지나 광고 로딩
이미지나 광고를 로드하는 동안 브라우저는 이전에 로드된 콘텐츠의 레이아웃을 변경해야 할 수 있습니다. 예를 들어, 이미지를 로드하기 전에 이미지가 들어갈 자리에 빈 공간을 만들어 놓지 않으면, 이미지 로딩 시 레이아웃이 변경되어 CLS가 발생할 수 있습니다. 이러한 경우에는 이미지를 로드하기 전에 미리 자리를 예약하는 것이 좋습니다. 또한, 이미지를 최적화하여 로딩 시간을 줄이는 것도 중요합니다.
FOIT / FOUT
FOIT(Flash of Invisible Text)과 FOUT(Flash of Unstyled Text)는 웹 폰트를 사용하는 경우 발생하는 문제입니다. 웹 폰트를 사용하는 경우, 웹 페이지의 로딩 시간이 더 오래 걸리거나, 웹 페이지의 초기 로딩 시 폰트가 깨지는 현상을 방지하기 위해 다음과 같은 문제가 발생할 수 있습니다. FOIT / FOUT 사례에 대해 자세히 알아보겠습니다.
FOIT(Flash of Invisible Text)
FOIT는 웹 폰트가 로드되기 전에 브라우저에서 기본 폰트로 표시되었다가, 폰트가 로드되면 웹 폰트로 변경되는 현상을 말합니다. 이로 인해 웹 페이지가 깜박이거나, 폰트가 변하는 모습이 사용자에게 보여지기 때문에, 사용자 경험을 저하시키는 요인이 될 수 있습니다.
FOUT(Flash of Unstyled Text)
FOUT는 웹 폰트가 로드되기 전에 빈 공간으로 남겨져 있다가, 폰트가 로드되면 웹 폰트로 변경되는 현상을 말합니다. 이 경우에도 사용자에게 폰트가 깨진 상태로 나타나게 되어, 사용자 경험을 저하시키는 요인이 될 수 있습니다.
이러한 FOIT와 FOUT 문제는 웹 폰트가 로드되는데 걸리는 시간과 관련이 있습니다. 폰트 파일의 용량이 크거나, 로딩 속도가 느린 서버에서 폰트를 다운로드할 경우, 웹 페이지의 로딩 시간이 지연됩니다. 이에 따라, FOIT와 FOUT가 발생할 가능성이 높아지게 됩니다.
FOIT와 FOUT를 해결하기 위해서는, 웹 폰트를 로드하는데 걸리는 시간을 최소화하는 것이 중요합니다. preload와 font-display CSS 속성을 사용하여, 폰트 파일을 미리 로드하고, 폰트가 로드되기 전에 기본 폰트나 빈 공간으로 대체하는 방법을 사용할 수 있습니다. 또한, 폰트 파일의 용량을 줄이거나, CDN(Content Delivery Network)을 사용하여 폰트 파일을 빠르게 다운로드할 수 있도록 하는 것도 좋은 방법입니다.
FOIT / FOUT해결 방법 예
1. preload와 font-display CSS 속성 사용하기
preload 속성은 웹 페이지가 로드되기 전에 리소스를 미리 로드하는 기능을 제공합니다. font-display CSS 속성은 웹 폰트를 로드하는 방식을 설정할 수 있는 속성입니다. 이를 사용하여, 폰트 파일을 미리 로드하고, 폰트가 로드되기 전에 기본 폰트나 빈 공간으로 대체하여 FOIT와 FOUT 문제를 해결할 수 있습니다.
<head>
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: 'My Font';
src: url('font.woff2') format('woff2');
font-display: swap; /* 폰트가 로드되기 전에 기본 폰트로 대체 */
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyWebFont', '대체글꼴', Arial, sans-serif;
/* 웹폰트와 최대한 비슷한 형태의 대체글꼴 지정 */
}
</style>
</head>
2. 서버에서 폰트 파일 압축하기
웹 폰트 파일의 용량을 줄이는 것은 FOIT와 FOUT 문제를 해결하는 데 도움이 됩니다. 서버에서 폰트 파일을 Gzip 또는 Brotli와 같은 압축 알고리즘으로 압축하면, 폰트 파일의 용량을 줄이고, 다운로드 속도를 높일 수 있습니다.
3. CDN(Content Delivery Network) 사용하기
CDN을 사용하면, 웹 폰트 파일을 더 빠르게 다운로드할 수 있습니다. CDN은 전 세계에 분산된 서버를 사용하여, 웹 폰트 파일을 빠르게 다운로드할 수 있도록 도와줍니다. 또한, CDN은 클라이언트 측 캐시를 활용하여, 동일한 폰트 파일이 여러 번 다운로드되지 않도록 하여, 네트워크 트래픽을 줄일 수 있습니다.
4. 웹 폰트의 다운로드 우선순위 설정하기
웹 폰트의 다운로드 우선순위를 설정하여, FOIT와 FOUT 문제를 해결할 수 있습니다. 다운로드 우선순위를 설정하면, 웹 페이지가 더 빠르게 렌더링됩니다. 이를 위해, 다음과 같은 방법을 사용할 수 있습니다.
preload 속성을 사용하여 폰트를 미리 로드합니다. 이를 통해 폰트가 렌더링되기 전에 미리 다운로드하여 FOIT 및 FOUT를 최소화 할 수 있습니다.
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
font-display 속성을 사용하여 폰트가 로드되기 전에 대체되도록 합니다. 이를 통해, 폰트가 로드되기 전에 기본 폰트로 대체되어 FOIT와 FOUT를 방지할 수 있습니다
@font-face {
font-family: 'My Font';
src: url('font.woff2') format('woff2');
font-display: swap;
}
font-display 속성을 사용하여 폰트가 로드되기 전에 대체되는 시간을 설정할 수 있습니다. 이를 통해, 로드 시간이 긴 폰트일 경우, 사용자는 긴 시간동안 대체 폰트를 보게되는 FOIT를 방지할 수 있습니다.
@font-face {
font-family: 'My Font';
src: url('font.woff2') format('woff2');
font-display: fallback;
font-display: swap;
}
font-weight와 font-style 속성을 사용하여, 사용하지 않는 글꼴 스타일을 제외하여 폰트 파일의 용량을 줄일 수 있습니다.
@font-face {
font-family: 'My Font';
src: url('font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
font-display 속성을 사용하여, fallback 폰트를 사용할 때 폰트가 로드되는 지연 시간을 줄일 수 있습니다.
@font-face {
font-family: 'My Font';
src: url('font.woff2') format('woff2');
font-display: fallback;
}