프런트엔드 개발자가 누적 레이아웃 이동을 수정하는 방법

구글은 다시 한 번 알고리즘을 업데이트하고 있으며 크다. Core Web Vitals 업데이트는 5월에 출시되며 속도와 사용자 경험에 관한 것입니다. 더 구체적으로 말하면 Google은 LCP(최대 내용 통증), FID(첫 번째 입력 지연) 및 CLS(누적 레이아웃 이동)를 모두 측정하기 시작합니다.

이 블로그 게시물에서는 누적 레이아웃 시프트와 프런트엔드 개발자가 이를 해결하기 위해 수행할 수 있는 작업에 대해서만 중점적으로 다룹니다.

누적 레이아웃 이동이 있는지 어떻게 알 수 있습니까?

Page Speed Insights를 사용하여 LCP 및 FID와 같은 기타 지표와 함께 웹 사이트의 콘텐츠 이동을 정량적으로 확인할 수 있습니다.

Core Web Vitals는 사용자 경험에 관한 것이므로 Airbrake Performance Monitoring 과 같은 도구를 사용하면 도움이 될 수 있습니다. 개발자를 위해 설계된 성능 모니터링 도구를 사용하면 Apdex 점수 , 지연 시간, 쿼리 및 경로 정보 등을 측정하는 기능을 통해 애플리케이션의 UX에 대한 즉각적인 통찰력을 얻을 수 있습니다.

이를 Moovweb과 결합하면 웹 사이트의 속도를 완벽하게 최적화할 수 있으며 애플리케이션의 UX를 측정할 뿐만 아니라 5단계 앞서 나갈 수 있습니다.

UX 및 CLS까지 귀하의 웹 사이트가 어디에 있는지 알게되면, 그것을 수정할 시간입니다.

프런트엔드 개발자가 누적 레이아웃 변경을 수정하는 방법

혹시 웹 사이트에 기사를 클릭 하려고, 갑자기 이동 하 고, 당신은 다른 뭔가를 클릭 끝내? 또는, 어쩌면, 당신은 기사를 읽는 중이고, 모든 것이 아래로 이동합니다. 예, 이것들은 누적 레이아웃 이동의 예입니다. 다른 모든 요소가 로드된 후 웹 사이트의 요소가 로드될 때 누적 레이아웃 변경이 발생합니다. 그것은 사용자에게 매우 귀찮을 수 있습니다. 뿐만 아니라 구글은 이것에 당신을 ding, 하지만 당신은 오히려 당신이로드 할 때까지 기다리는 것보다 다른 웹 사이트로 이동하려는 잠재적 인 사용자를 잃게됩니다. CLS 문제가 사용자에게 영향을 미치기 전에 문제를 해결하여 이러한 문제를 방지합니다.

프런트엔드 개발자는 웹 사이트에서 누적된 레이아웃 변경을 줄이기 위해 취할 수 있는 네 가지 조치를 소개합니다.

글꼴 업데이트

글꼴은 웹 사이트에 개성과 개성을 추가하지만, 이러한 특수 글꼴은 비용이 발생합니다. 글꼴 파일의 큰 특성으로 인해 브라우저는 보이지 않는 텍스트의 플래시로 알려진 FOIT를 사용하여 보상하는 경향이 있습니다. FOIT로 인해 웹 페이지 로딩 시간이 심각하게 느려질 수 있습니다.

FOIT에 의존하는 대신 “스타일이 지정되지 않은 텍스트의 플래시”방법 (FOUT)을 사용해야합니다. 웹 사이트 텍스트를 FOUT로 변경하는 가장 쉬운 방법은 다음과 같습니다.

전통적으로 글꼴을 다음과 같이 코딩합니다. @font-face { font-family: georgia; }

대신 @font-face { font-family: georgia; font-display: swap; } 비트를 사용해야 합니다.

“Font-display”는 시스템 폰트를 사용하여 API t0 디스플레이 폰트를 즉시 알려줍니다. 글꼴 파일이 로드되면 웹 사이트에서 원하는 글꼴로 바꿉니다.

불행히도, FOUT 메서드는 모든 브라우저에서 작동하지 않을 수 있습니다. 그렇지 않은 경우 브라우저는 글꼴을 로드하기 위한 기본 동작으로 되돌아갑니다. 이 도구 를 사용하여 이러한 동작에 대한 자세한 분석을 볼 수 있습니다.

글꼴 파일의 긴 로드 시간을 없애기 위해 사용할 수 있는 두 번째 방법은 모든 브라우저에서 작동하지만 코드 라인을 업데이트하는 것만큼 간단하지는 않습니다.

이전 방법과 마찬가지로 기본 글꼴이 완전히 로드될 때까지 기다린 다음 사용자 지정 글꼴로 전환합니다. 차이점은 웹 사이트의 CSS 및 JavaScript 코드 모두에 뛰어 들어야 한다는 것입니다.

먼저, CSS를 업데이트하여 초기 페이지 로드 시 사용자 지정 글꼴을 사용하지 않는 것이 좋습니다. 시스템 글꼴을 사용하여 페이지의 텍스트를 가능한 한 빨리 다운로드하십시오.

JavaScript 코드를 사용하여 글꼴 얼굴 관찰자를 구현할 수 있습니다. 이 코드는 웹 글꼴이 로드될 때 이를 모니터링하고 알려줍니다. 글꼴 모양 관찰자는 스크롤 이벤트를 사용하여 글꼴을 빠르게 로드할 수 있습니다. 전체 가이드를 보려면 fontfaceobserver GitHub 페이지를 확인하십시오.

프런트엔드 개발자는 글꼴 로딩 시간을 개선하기 위해 수행할 수 있는 몇 가지 간단한 변경 사항입니다.

웹 사이트에서 이미지 수정

웹 사이트에 이미지가 로드되는 방식은 누적된 레이아웃 변경에 큰 영향을 미치고 감소합니다. 속성 없이 업로드된 이미지는 대량의 변화를 일으키는 경향이 있습니다. 따라서 웹 사이트에 이미지를 추가할 때 다음 방법을 사용하는 것이 좋습니다.

이미지 및 비디오 요소에 크기 속성 사용

이 업데이트 전에 이미지에 “너비”및 “높이”속성을 추가하면 웹 사이트가 Google에서 순위를 매기는 방식에 거의 영향을 미치지 않았습니다. 이제 핵심 바이탈 업데이트를 통해 중요한 차이를 만들 것입니다. 여기서부터 이미지에 속성을 포함하려면 여분의 시간을 할애해야 합니다.

다음과 같이 이미지를 업로드할 경우:

예: <h1>오류 모니터링이 멋지다</h1>

<p>손상된 코드를 신속하게 찾아 수정</p>

<IMG src=”Erron_image.jpg” alt=””>

<P>올바른 오류 모니터링 소프트웨어와 함께, 당신은 버그 무료 코드를 유지할 수 있습니다.</p>

다음과 같은 일이 발생합니다 : 사용자의 브라우저가 먼저 HTML을 읽고 다운로드합니다. 일단 그것이 완료되면, 그것은 마침내 이미지를 다운로드 할 것입니다. 결국 브라우저가 이미지를 위한 공간을 확보함에 따라 웹 페이지의 콘텐츠가 변경됩니다.

이 CLS 문제를 해결하는 것은 간단합니다: 이미지에 height 및 width 속성 태그를 추가하기만 하면 됩니다.

예: <h1>오류 모니터링이 멋지다</h1>

<p>손상된 코드를 신속하게 찾아 수정</p>

너비 = “450” 높이 = “450”>

<P>올바른 오류 모니터링 소프트웨어와 함께, 당신은 버그 무료 코드를 유지할 수 있습니다.</p>

이미지에 너비와 높이를 추가하면 HTML 문서의 나머지 부분이 다운로드될 때 웹 페이지에 이미지를 위한 공간을 남겨 두라는 메시지가 표시됩니다.

덜 엄격한 접근 방식을 위해 CSS 종횡비 상자 를 사용할 수도 있습니다.

두 가지 방법 모두 잘못되었지만 웹 사이트에서 누적된 레이아웃이 변경되지 않도록 하려면 두 가지 방법을 모두 사용해야 합니다.

동적 광고를 신중하게 배치

광고는 콘텐츠 레이아웃 변경에 관해서 끔찍합니다. 당신이 그들과 함께 조심 하지 않으면 그들은 당신의 콘텐츠를 모든 장소에 갈 것 이다.

웹 사이트에 광고를 게재할 때 다음 팁을 사용하여 콘텐츠의 변화를 방지하십시오.

• 이미지와 마찬가지로 광고가 웹 사이트에 충분한 예약 공간이 있는지 확인해야합니다.

• 웹 페이지의 맨 위에 광고를 게재하지 마십시오. 이로 인해 그 아래에 있는 모든 콘텐츠에 대한 콘텐츠가 변경될 가능성이 있습니다.

• 웹 페이지의 중간 또는 하단 근처에 광고를 배치합니다.

동적 광고에 관한 모범 사례는 다음과 같습니다. 사용자 환경을 크게 개선할 뿐만 아니라 누적된 레이아웃도 바뀝니다.

임베디드 위젯에 주의하십시오.

임베디드 위젯은 웹 사이트의 판도를 바꾸는 역할을 합니다. 그들은 당신이 당신의 웹 사이트에 대한 흥미롭고 이식 가능한 콘텐츠를 만들 수 있지만, 그들은 상당한 단점이 있습니다. 이미지 및 광고와 달리 웹 사이트에 위젯을 위한 공간을 예약하는 것이 어려울 수 있습니다.

Twitter 위젯이 있다고 가정해 보겠습니다. 때로는 트윗이 몇 글자만 될 수도 있고, 이미지와 링크가 포함될 수도 있습니다. 필요한 공간이 계속 변할 때 얼마나 많은 공간을 예약해야 하는지 어떻게 알 수 있습니까?

웹 사이트에 공간을 예약하여 임베드의 자리 표시자를 업로드하여 이 문제를 해결할 수 있습니다. 하지만 어떻게 해야 할까요?

” GlobalKey “를 만들어 위젯에 할당해야합니다. 키가 있으면 위젯의 크기를 확인하고 위젯에 대한 웹 사이트의 적절한 공간을 예약 할 수 있습니다.

결론

웹 사이트에서 누적된 레이아웃 이동을 줄이는 데 사용할 수 있는 방법은 몇 가지뿐입니다. CLS와 관련된 많은 문제는 공간을 포함하고 이미지, 광고 및 위젯을 위해 웹 사이트에 충분한 공간을 예약합니다. 글꼴을 업로드하는 방법도 웹 사이트의 속도에 크게 영향을 미칩니다.

5월에 Core Web Vitals가 출시되면 Google 순위에서 떨어지지 않도록 지금 이러한 변경을 시작해야 합니다.