세 가지 측정항목으로 웹사이트 성능 향상

Jan 25, 2024

웹은 빠르게 성장하는 매체입니다. 매일 수천 개의 새로운 사이트가 등록되는데 어떻게 경쟁업체보다 우위를 점할 수 있습니까? 웹사이트를 개선하고 사용자 참여 시간을 늘리는 데 도움이 되는 간과되는 범주 중 하나는 성능입니다. 성능이 중요합니다! 웹사이트 성능은 긍정적인 사용자 경험을 창출하고 접근성을 활성화하며 트래픽을 늘리는 데 중추적인 역할을 합니다. 부적절한 성과는 이러한 지표를 변경하고 책임이 되어 비즈니스가 성공하기 위한 더욱 어려운 환경을 조성할 수 있습니다. 성능이 향상되면 검색 엔진 최적화(SEO)도 향상됩니다.

성능에 대한 측정항목은 다양합니다. CLS(누적 레이아웃 변경), LCP(콘텐츠가 포함된 최대 페인트) 및 TBT(총 차단 시간)의 세 가지 개선 사항을 다룰 것입니다. 현재 Lighthouse 버전 9에서는 세 가지 누적 지표가 Google Lighthouse 성능 점수의 70%를 차지합니다.

CLS(누적 레이아웃 변경)는 이해하기 가장 쉬운 사용자 경험 측정항목 중 하나입니다. 특정 페이지의 개별 구성 요소는 사용자 경험을 만들거나 망칠 수 있습니다. 사용자가 페이지를 처음 로드할 때 기대한 결과를 얻지 못하는 경우가 있습니다. 각 구성 요소에는 사용자에 대한 예측 가능한 작업이 있어야 합니다.

콘텐츠 크기에는 콘텐츠 이동을 줄이기 위해 선택기에 너비와 높이를 설정하는 것이 포함됩니다. 또한 연결이 느린 사용자는 렌더링 프로세스가 완료되면 해당 위치에 콘텐츠가 로드된다는 점을 이해할 수 있습니다. 일부 요소는 로드하는 데 시간이 더 오래 걸리므로 CLS에 부정적인 영향을 미칩니다. 예를 들어 반응형 이미지에는 추가 적용 범위가 필요합니다. 가상 선택기를 상단 패딩 비율로 설정하는 동안 종횡비를 설정하거나 요소를 절대값으로 변환하는 것을 고려하세요.

애니메이션은 올바르게 수행되면 사용자가 페이지를 즐겁게 만들 수 있는 독특한 방법입니다. 애니메이션에 위치(상단, 오른쪽, 하단, 왼쪽)와 너비/높이를 사용하지 마세요. 대신 변환 선택기와 위치 변환 속성을 사용하세요. 유연성을 높이려면 여백 선택기를 통합하세요. 변환 선택기는 꼭 필요한 경우가 아니면 레이아웃을 트리거하지 않습니다.

웹 글꼴은 웹 사이트 브랜딩 방법으로 점점 더 널리 사용되고 있습니다. 내부적으로 구현하거나 다른 사이트에서 호출할 수 있습니다. 연결 속도가 느린 사용자는 웹 글꼴을 보는 데 문제가 발생할 수 있습니다. 이러한 경우 브라우저는 일반적으로 파일이 로드될 때까지 일반 버전을 표시합니다. 로드된 후 브라우저가 웹 글꼴을 지원하는 경우 자동으로 올바른 버전으로 전환됩니다. 그렇지 않으면 사용자는 기본 글꼴을 받게 됩니다.

LCP(Contentful Paint) 측정항목은 요소(이미지, 비디오, 텍스트)를 렌더링하는 데 소요되는 추가 시간을 측정합니다. 훌륭한 사용자 경험을 제공하려면 측정항목 점수를 2.5초 미만으로 설정하세요. 텍스트를 통해 LCP를 개선하려면 CLS에 사용된 것과 동일한 전략을 사용하십시오. 이미지의 LCP 속도를 줄이려면 다음을 사용하여 이미지를 최적화하십시오.

콘텐츠가 포함된 최대 페인트의 전체 프로세스는 해당 요소(이미지, 비디오, 텍스트)를 가능한 한 빨리 페이지에 렌더링하는 것입니다. 이러한 전략은 네트워크 탭에서 중요한 요소의 우선순위를 지정하는 데 도움이 됩니다. 초기 뷰포트 로드에 필요하지 않은 JavaScript 파일은 나중을 위해 연기해야 ​​합니다.

TBT(총 차단 시간)는 페이지의 로드 응답성을 측정하기 위한 성능 지표입니다. 이 글의 마지막 카테고리이기는 하지만, 가중치도 30%로 가장 높습니다. TBT는 해당 입력이 마우스 클릭, 화면 터치 또는 키보드 누르기인지 여부에 관계없이 페이지가 사용자 입력에 응답하지 못하도록 차단되는 시간을 측정합니다. TTI(Time to Interactive)는 페이지가 반응하는 데 걸리는 시간을 측정합니다. FCP(First Contentful Paint)는 브라우저가 DOM(문서 개체 모델)에서 콘텐츠의 첫 번째 비트를 렌더링하는 경우입니다. TBT는 FCP와 TTI 사이의 모든 기간의 합계입니다. 이 범주를 개선하려면 먼저 사내 스크립트와 타사 스크립트를 분석해야 합니다.

결과적으로, 총 차단 시간은 가장 영향력 있는 성능 지표입니다. Time to Interactive와 First Contentful Paint는 모두 TBT와 메인 스레드에서 큰 역할을 합니다. TBT에 걸린 경우 FCP 또는 TTI 분석을 고려하십시오.