1. 코어 웹 바이탈 개요
코어 웹 바이탈(Core Web Vitals)은 웹사이트의 사용자 경험(UX)을 평가하기 위해 구글이 정의한 일련의 중요한 성능 지표입니다. 이 지표들은 웹페이지의 로딩 속도, 상호작용성, 시각적 안정성을 측정하여 사용자 경험을 개선하는 데 초점을 맞추고 있습니다. 코어 웹 바이탈은 LCP, FID, CLS 세 가지 주요 지표로 구성됩니다.
이 세 가지 지표는 웹사이트의 성능을 종합적으로 평가하는 데 중요한 역할을 하며, 구글은 이러한 지표를 검색 순위에 반영합니다. 웹사이트 운영자는 코어 웹 바이탈을 최적화하여 사용자 경험을 개선하고, 검색 엔진에서 더 나은 순위를 얻을 수 있습니다.
2. 코어 웹 바이탈 지표
2.1. Largest Contentful Paint (LCP)
페이지에서 가장 큰 콘텐츠 요소(이미지, 비디오, 텍스트 블록 등)가 화면에 완전히 렌더링되는 데 걸리는 시간을 측정합니다. 사용자에게 빠르게 유용한 콘텐츠를 제공하는 것이 목적이며, LCP가 2.5초 이내면 좋다고 평가됩니다. 다음과 같은 조치를 함으로써 개선할 수 있습니다.
- 서버 응답 시간 단축: 서버 응답 시간을 줄이기 위해 서버 성능을 개선하거나, CDN(Content Delivery Network)을 사용하여 콘텐츠를 사용자에게 더 가까운 서버에서 제공할 수 있습니다.
- 렌더링 차단 리소스 최소화: CSS와 JavaScript 같은 렌더링 차단 리소스를 최소화하고, 중요하지 않은 스크립트는 비동기적으로 로드합니다.
- 이미지 및 미디어 최적화: 이미지 파일을 압축하고 적절한 크기와 형식을 사용하며, lazy-loading(지연 로딩)을 적용하여 필요한 시점에 이미지를 로드합니다.
- 크리티컬 렌더링 패스 최적화: 중요한 CSS를 인라인으로 포함시키고, 필요한 경우 주석을 통해 중요한 스타일을 먼저 로드합니다.
2.2. First Input Delay (FID)
사용자가 페이지와 처음 상호작용(예: 링크 클릭, 버튼 클릭)할 때까지 걸리는 시간을 측정합니다. 빠른 응답성은 사용자 만족도를 높이며, FID가 100밀리초 이하이면 좋은 성능으로 간주됩니다. 다음과 같은 조치를 함으로써 개선할 수 있습니다.
- 메인 스레드 작업 최소화: JavaScript 작업을 최적화하고, 메인 스레드에서 오래 걸리는 작업을 피합니다. Web Workers를 사용하여 백그라운드 작업으로 오프로드할 수 있습니다.
- 코드 분할: 필요한 시점에만 코드가 로드되도록 코드 분할을 적용하여 초기 로드 시간을 줄입니다.
- 타사 스크립트 최적화: 타사 스크립트를 최소화하고, 필요한 경우 비동기적으로 로드합니다.
- 브라우저 최적화: 최신 브라우저 기능과 API를 사용하여 성능을 개선합니다.
2.3. Cumulative Layout Shift (CLS)
페이지가 로드되는 동안 발생하는 예기치 않은 레이아웃 변경의 빈도와 정도를 측정합니다. 예기치 않은 레이아웃 이동은 사용자의 경험을 방해할 수 있으며, CLS 점수가 0.1 이하이면 양호합니다. 다음과 같은 조치를 함으로써 개선할 수 있습니다.
- 이미지 크기 명시: HTML에서 이미지와 비디오 요소에 고정된 크기를 명시하여 브라우저가 로드 중에 공간을 예약할 수 있도록 합니다.
- 동적 콘텐츠 예측: 동적 콘텐츠(예: 광고, 동적 삽입 요소 등)의 크기를 예측하고, 레이아웃이 변경되지 않도록 사전에 공간을 확보합니다.
- 폰트 로딩 최적화: 웹 폰트를 로드할 때 FOUT(Flash of Unstyled Text)와 FOIT(Flash of Invisible Text)를 방지하기 위해
font-display속성을 사용합니다. - 레이아웃 변경 최소화: CSS에서 레이아웃 변경을 유발할 수 있는 요소(예: 크기, 위치 등)를 안정적으로 설정합니다.
3. 티스토리 블로그 성능 최적화 방법
티스토리와 같은 포털 사이트의 블로그 플랫폼에서는 사용자가 직접 서버 설정이나 코드를 깊이 있게 조정할 수 없는 경우가 많습니다. 그러나 블로거가 코어 웹 바이탈을 개선하기 위해 다음과 같은 몇 가지 방법들이 있습니다
- 이미지 최적화: 업로드하는 이미지의 파일 크기를 줄이고, 적절한 크기와 형식을 사용합니다. 예를 들어, JPEG, PNG나 차세대 이미지 포맷인 WEBP 형식을 사용하고, 해상도를 최적화합니다.
- Lazy Loading 사용: 티스토리에서는 일부 테마나 설정에서 이미지를 lazy-load 방식으로 로드할 수 있습니다. 이를 통해 초기 페이지 로딩 시 불필요한 이미지 로딩을 지연시킬 수 있습니다.
- 간단한 테마 사용: 복잡한 테마는 많은 리소스를 필요로 하기 때문에, 상대적으로 가벼운 테마를 사용하면 LCP를 개선할 수 있습니다.
- 가벼운 플러그인 사용: 블로그에 추가하는 플러그인이나 위젯은 최소한으로 유지합니다. 불필요한 스크립트가 페이지 로딩과 상호작용을 지연시킬 수 있습니다.
- 필요 없는 스크립트 제거: 스크립트나 위젯 중 필요하지 않은 것들은 제거합니다. 예를 들어, 방문자 카운터, 외부 광고 스크립트 등을 줄일 수 있습니다.
- 고정된 크기의 이미지 사용: 게시물에 이미지를 추가할 때 HTML 태그에 너비와 높이를 명시하여 레이아웃 이동을 방지합니다.
- 폰트 로딩 최적화: 웹폰트를 사용할 때 [ font-display: swap; ] 속성을 사용하여 페이지 로딩 시 텍스트가 기본 시스템 폰트로 먼저 표시되고, 웹폰트가 로드된 후 교체되도록 합니다.
- 안정적인 레이아웃 유지: 콘텐츠를 작성할 때 불필요한 요소를 추가하지 않고, CSS를 통해 고정된 레이아웃을 유지합니다. 예를 들어, 이미지나 비디오가 로드되기 전에 공간을 미리 확보해 둡니다.
- 광고 위치 고정: 광고 배너나 동적 콘텐츠가 있는 경우 고정된 위치에 배치하여 레이아웃 이동을 방지합니다.
4. 추가 조치
- 페이지 속도 테스트: 구글의 PageSpeed Insights 또는 Lighthouse 같은 도구를 사용하여 페이지 속도를 테스트하고, 제공된 권장 사항을 따릅니다.
- 콘텐츠 최적화: 글을 작성할 때 HTML 구조를 간단하게 유지하고, 필요 없는 태그를 최소화합니다.
- CDN 사용: 가능하다면 티스토리의 이미지 호스팅을 대신할 외부 CDN을 이용해 이미지나 기타 리소스를 제공하여 로딩 시간을 단축시킵니다.