Core Web Vital 규칙으로 웹 사이트 최적화

귀하의 웹사이트가 잘 최적화되어 있고 사용자를 위해 게시할 준비가 되었는지 확인하는 방법은 무엇입니까?

사용자에게 훌륭한 사용자 경험을 제공하고 도달 범위를 넓히려면 많은 규칙과 최적화를 수행해야 합니다!

핵심 웹 바이탈은 웹에서 훌륭한 사용자 경험을 제공하는 데 필수적인 전 세계 개발자를 위한 협력 지침을 제공하기 위한 Google의 이니셔티브입니다.



핵심 웹 바이탈은 웹 바이탈의 일부이지만 웹사이트가 최종 사용자에게 제공되는 속도와 index.html이 모든 자바스크립트 코드와 함께 제공되는 속도를 정의하는 3가지 핵심 메트릭이 있습니다. 번들에서.

LCP(가장 큰 콘텐츠가 있는 페인트)

이는 웹 사이트의 가장 큰 구성 요소가 사용자에게 로드되는 속도를 결정합니다. 뷰포트에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고합니다.

그것은 주로 다음을 포함합니다.

<img> <image> <video>

태그 요소.



예: 여기에서 비디오는 가장 큰 구성 요소이므로 이 구성 요소가 2.5초 이내에 클라이언트(사용자)에게 제공되는 경우 좋은 LCP 점수로 간주됩니다.

FID(첫 번째 입력 지연)

이 측정항목은 사용자가 버튼을 탭하거나 링크를 클릭하거나 브라우저에서 자바스크립트 코드를 실행해야 하는 작업을 수행하는 등 처음으로 웹사이트와 상호작용하는 시간을 측정합니다.

이 경험이 좋지 않거나 기준에 미치지 못한다면 사용자가 처음으로 웹 페이지를 방문했을 때 원하는 것이 아니기 때문에 이미 사용자를 잃은 것입니다.

이러한 이유로 전 세계의 개발자는 브라우저가 JS가 실행될 때까지 기다려야 하는 장기 실행 차단 코드를 작성하지 않습니다.

예제와 몇 가지 다이어그램으로 설명하겠습니다.



위 다이어그램에서 백엔드에 대한 일부 네트워크 요청(대부분 Css, Js 파일 및 자산)이 있고 기본 스레드도 로드되고 있음을 볼 수 있습니다.



이제 위의 다이어그램에서 FCP와 TTI 사이에 많은 시간이 걸린다는 것을 알 수 있습니다. 그들은 3개의 긴 탁입니다!

사용자가 이 3가지 간격 사이에 웹 페이지와 상호 작용을 시도한다고 가정하면 사용자는 자신의 입력을 계속 적용하지만 메인 스레드가 여전히 렌더링 및 로드 중이기 때문에 불행하게도 출력을 받지 못할 것입니다.

*사용자가 입력하고 메인 스레드가 응답할 수 있을 때 지연됩니다. *

CLS(누적 레이아웃 시프트)

어떤 기사를 읽거나 웹 페이지의 비디오를 볼 때 갑자기 텍스트가 이동하고 비디오가 변경되고 갑작스러운 방식으로 이동되는 것을 눈치챘을 것입니다. (예: Google 광고가 넘쳐나는 모든 웹페이지).

이는 자산이나 동적 자산 또는 링크와 같은 리소스가 비동기적으로 로드되거나 react.DOM 요소가 기존 콘텐츠 상단에 동적으로 로드되기 때문에 발생합니다.

이것은 웹 경험과 레이아웃을 망칠 뿐만 아니라 사용자 경험도 망가뜨리기 때문에 웹 사이트에 좋지 않습니다.

CLS(Cumulative Layout Shift) 메트릭은 실제 사용자에게 발생하는 빈도를 측정하여 이 문제를 해결하는 데 도움이 됩니다.

-------------------------------------보너스------------ ---------------------------

또한 이 링크Pagespeed Insights를 사용하여 이러한 점수 및 자신의 웹사이트의 기타 메트릭을 확인할 수 있습니다.

나는 최근에 내 자신의 포트폴리오 웹사이트Jyotindra KT를 확인했고 결과는 다음과 같습니다!



나는 그 결과에 꽤 놀랐지만 완전히 최적화되지는 않았습니다. 내 자산을 더 효율적으로 로드하려면 작업해야 할 일부 영역도 제공했기 때문입니다.



이것이 내 친구의 게시물입니다.

여기까지 오셨다면 여기에서 저를 팔로우하고 **에서 기술 및 개발자 커뮤니티에 대해 매일 트윗하고 커뮤니티와 적극적으로 교류하는 **에서도 저를 팔로우하세요.

감사합니다 !
안부 Jyotindra Tavanoji ❤️