성능은 사용자 환경의 핵심 요소입니다. 페이지가 로드되는 속도와 사용자 입력에 얼마나 빠르게 반응하는지는 사용자가 사이트를 인식하는 방식에 큰 영향을 미치며, 사용자가 웹사이트에 머무르게 할 수도 있고 웹사이트를 중단하게 할 수도 있습니다. 이 페이지에서는 웹사이트의 속도를 높이고 속도를 유지하는 데 도움이 되는 다양한 웹 성능 주제에 대한 풍부한 정보를 제공합니다.
실적을 처음 접하시나요? 시작하는 데 도움이 되는 종합적인 과정을 제공합니다.
세 가지 핵심 웹 바이탈 측정항목, 작동 방식, 우수한 사용자 환경을 위해 중요한 이유를 알아보세요.
Core Web Vitals 측정항목에 대해 알아본 후 다음 가이드를 통해 최적화하는 가장 좋은 방법을 이해할 수 있습니다.
측정항목을 자세히 살펴보는 가이드 모음을 통해 Core Web Vitals에 관해 자세히 알아보세요.
이제 기준점 새로 사용 가능에서 실적을 개선하기 위한 새로운 기능을 살펴보세요.
기업이 코어 웹 바이탈을 개선하여 비즈니스 측정항목을 늘린 사례를 알아보세요.
Chrome DevTools를 사용하여 웹사이트의 성능 문제를 디버그하는 방법을 알아보세요.
과정

웹 성능은 복잡하고 다양한 주제 영역이지만 배울 수 없는 것은 아닙니다. 성능에 대해 잘 모르는 경우 이 과정을 통해 먼저 성능의 기본사항을 소개하고, 이를 바탕으로 고급 주제를 학습할 수 있습니다. 이 과정을 완료하면 배운 내용을 곧바로 적용할 수 있습니다!

실적 알아보기

Core Web Vitals 측정항목은 사용자 환경에 중점을 둔 세 가지 측정항목으로 구성됩니다. 인지된 로드 시간, 시각적 안정성, 사용자 입력에 대한 반응성 등 페이지의 성능과 사용성을 측정합니다. Core Web Vitals를 처음 사용하는 경우 이 가이드를 통해 작동 방식을 익히고 최적화 방법을 알아볼 수 있습니다.
LCP는 가장 큰 콘텐츠가 페이지에 표시되는 데 걸리는 시간을 측정하는 측정항목입니다. LCP가 낮은 페이지는 사용자에게 페이지가 빠르게 로드되고 있다고 신호를 보냅니다.
자세히 알아보기
CLS는 페이지에서 레이아웃의 예상치 못한 변경사항을 관찰하여 레이아웃 안정성을 측정하는 측정항목입니다. CLS가 낮은 페이지는 페이지의 레이아웃이 안정적이고 사용자가 상호작용하려고 할 때 예기치 않게 변경되지 않는다는 신호를 사용자에게 전달합니다.
자세히 알아보기
INP는 페이지가 사용자 입력에 얼마나 빠르게 반응하는지 측정하는 측정항목입니다. INP가 낮은 페이지는 사용자와 상호작용할 때 페이지가 빠르게 응답한다는 신호를 보내 웹사이트가 더 안정적이고 즐겁게 사용할 수 있다는 것을 의미합니다.
자세히 알아보기
각 Core Web Vitals 측정항목은 사용자 환경을 개선하도록 최적화할 수 있습니다. 각 가이드에서는 입증된 기법을 적용하여 웹사이트의 성능과 안정성을 개선하여 사용자가 더 오래 머물고 이탈할 가능성을 줄이는 방법을 자세히 설명합니다.
사용자가 페이지에서 가장 중요한 콘텐츠를 최대한 빨리 볼 수 있도록 LCP를 최적화하는 방법을 알아보세요.
자세히 알아보기
사용자가 웹사이트의 안정성과 유용성을 유지할 수 있도록 CLS를 최적화하는 방법을 알아보세요.
자세히 알아보기
사용자가 웹사이트의 상호작용에 빠르게 응답할 것으로 기대할 수 있도록 사용자를 위해 INP를 최적화하는 방법을 알아보세요.
자세히 알아보기
Core Web Vitals의 세 가지 측정항목과 이를 최적화하는 방법을 알아보는 것부터 시작하면 좋지만, 이 주제와 관련하여 알아야 할 내용은 더 많습니다. 이 콘텐츠 모음에서는 측정 및 디버그 방법을 이해하고 쿠키 알림, 캐러셀, 기타 일반적인 사용자 인터페이스 문제에 관한 몇 가지 추가 권장사항을 확인할 수 있습니다.
자세히 알아보기
성능을 개선하면 사용자 환경이 개선될 뿐만 아니라 비즈니스 성장에도 도움이 될 수 있습니다. 다음 기업이 어떻게 Core Web Vitals를 개선하고 비즈니스 측정항목을 늘렸는지 알아보세요.
Disney+ Hotstar가 INP를 61% 줄여 거실 기기에서 주간 카드 조회수를 100% 늘린 방법을 알아보세요.
자세히 알아보기
PubTech의 동의 관리 플랫폼이 고객 웹사이트의 INP를 최대 64% 줄이고 광고 조회가능성을 최대 1.5% 개선한 방법을 알아보세요.
자세히 알아보기
Taboola가 Long Animation Frames API (LoAF)를 사용하여 게시자 파트너 웹사이트의 INP를 최대 36% 개선한 방법을 알아보세요.
자세히 알아보기

기준은 웹 플랫폼 기능을 모든 주요 브라우저 엔진에서 안전하게 사용할 수 있을 때 웹 개발자에게 신호를 보냅니다. 다음은 이제 기준에서 새로 사용할 수 있는 웹 성능 관련 기능입니다.
content-visibility CSS 속성은 2024년 9월에 새로운 기준으로 제공되었습니다.
AVIF 이미지 형식이 2024년 1월에 새로 사용 가능한 기준이 되었습니다.
모듈 미리 로드가 기준이 되었습니다. 2023년 9월에 새로 사용할 수 있습니다.
Server-Timing HTTP 응답 헤더가 2023년 3월에 새로운 기준이 되었습니다.

Chrome DevTools는 웹 애플리케이션의 성능을 이해하고 개선하는 데 도움이 되는 도구를 비롯하여 개발자가 웹 애플리케이션을 디버그하는 데 사용하는 도구 모음입니다.
DevTools의 Network 패널에는 페이지에서 로드하는 모든 리소스와 로드하는 데 걸린 시간이 표시됩니다. 이 패널을 사용하여 리소스 부하 관련 성능 문제를 식별하는 방법을 알아봅니다.
자세히 알아보기
DevTools의 Performance 패널은 기본 스레드의 활동, 네트워크 활동 및 성능 문제를 식별하고 수정하는 데 도움이 되는 추가 도구를 비롯하여 기록 세션 동안 페이지의 성능에 관한 매우 자세한 정보를 보여줍니다.
자세히 알아보기
메모리 패널에는 페이지의 JavaScript에서 사용 중인 메모리 양이 표시됩니다. 이 패널을 사용하는 방법을 알아두면 페이지의 JavaScript로 인한 메모리 관련 문제를 발견하고 해결할 수 있습니다.
자세히 알아보기