JS 구성 요소를 사용할 때 (CLS) 레이아웃 이동을 피하는 방법

Javascript를 기반으로 하는 구성 요소를 사용하는 경우 특히 어떤 방식으로든 Javascript 시작을 지연하는 경우 콘텐츠(CLS)의 레이아웃 이동을 알 수 있습니다. 이 경우 Javascript가 시작될 때까지 요소의 초기 모습을 볼 수 있습니다.

그러나 물론 사용자 상호작용이 있을 때까지 또는 몇 초 후에 자바스크립트를 지연시키는 것은 pagespeed insights 에서 웹사이트의 점수를 높이는 좋은 습관이자 좋은 트릭입니다. 따라서 더 나은 옵션은 레이아웃 이동을 피하는 방법을 찾는 것입니다. 다행스럽게도 그렇게 복잡하지 않습니다.

이 자습서에서는 Mr.Utils JS 구성 요소에 초점을 맞추지만 동일한 논리가 다른 도구에도 적용됩니다.

일반적인 JS 구성 요소의 작동 방식 이해

Mr.Utils javascript 구성 요소가 작동하는 방식은 페이지 로드 후 필요한 CSS 인라인 속성을 요소에 추가하는 것입니다. 단, 해당 속성 중 일부를 이미 사용하는 유틸리티 클래스가 요소에 없는 경우에만 가능합니다.

아시다시피 HTML 클래스는 CSS 속성의 스타일을 적용하기 위해 Javascript에 의존하지 않습니다. 이 상황에서 Javascript를 지연시킬 때 레이아웃 변경을 피하기 위해 이 사실을 유리하게 사용할 것입니다.

콘텐츠 레이아웃 이동 수정

속성을 추가하는 구성 요소에 대한 CLS 수정

Mr.Utils Swipe 구성 요소와 같은 구성 요소는 다음 인라인 속성을 요소에 추가합니다.

display: -webkit-inline-box;
flex-wrap: unset !important;
overflow-x: scroll !important;
-webkit-overflow-scrolling: touch !important;
overflow-y: hidden;

그러나 완전히 동일한 작업을 수행하는 유틸리티 클래스가 하나 있으므로 스와이프 클래스를 추가한 후 다음 유틸리티 클래스를 추가하기만 하면 됩니다.

mr-horizontalscroll

Mr.Utils를 플러그인으로 사용하는 경우: 클래스를 추가하는 대신 기타 > 스크롤 > 가로 스크롤에서 옵션을 선택할 수 있습니다.

결국 요소에 다음과 같은 클래스가 있습니다.

mr-swipe mr-horizontalscroll

이렇게 하면 javascript가 실행되기 전에 속성이 추가되고 스와이프 구성 요소의 이점(예: 마우스로 드래그하는 기능)을 잃지 않고 레이아웃 이동을 피할 수 있습니다.

새 요소를 만드는 구성 요소에 대한 CLS 수정

페이지 매김(라디오, 화살표, 드롭다운)의 탭 및 탐색 옵션과 같은 구성 요소는 해당 요소가 아직 존재하지 않는 경우 페이지에 새 요소를 추가합니다. 따라서 이 상황에서 Javascript가 시작될 때 레이아웃 이동을 피하는 방법은 수동으로 요소를 생성하는 것입니다. 살펴보겠습니다.

Mr.Utils의 Javascript가 생성하는 것과 정확히 동일한 요소를 사용하려면 요소 뒤(또는 the proper class 를 사용할 때 이전)에 아래 HTML 코드를 사용할 수 있습니다.

페이지 매김 화살표

<div class="mr-pagination">
<button class="mr-arrows mr-prev">⇦</button>
<button class="mr-arrows mr-next">⇨</button>
</div>

페이지 매김 라디오 버튼

페이지 수와 일치하도록 마지막 "mr-radio"를 복제합니다.

<div class="mr-pagination">
<span class="mr-radios">
<input name="mr-radio" title="1/2" class="mr-radio" type="radio" value="1" checked="checked">
<input name="mr-radio" title="2/2" class="mr-radio" type="radio" value="2">
</span>
</div>

페이지 매김 드롭다운

페이지 수와 일치하도록 마지막 "옵션"을 복제합니다.

<div class="mr-pagination">
<select class="mr-pageselect" title="/2">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

탭

페이지 수와 일치하도록 마지막 "mr-tab"을 복제합니다.

<div class="mr-tabsnav mr-horizontalscroll">
<button class="mr-tab mr-active">Tab 01</button>
<button class="mr-tab">Tab 02</button>
</div>

좀 더 많은 제어를 원하거나 사이트 빌더를 사용하는 경우 기본/상위 요소가 mr-pagination 또는 mr-tabsnav 클래스를 사용하는 한 다른 방식으로 새 요소를 만들 수도 있습니다.

WordPress에서 Mr.Utils를 플러그인으로 사용하는 경우 블록 편집기를 사용하여 탭 구성 요소용 버튼을 만들 수 있습니다. 그런 다음 단추 컨테이너를 선택하여 유틸리티에서 구성 요소 > 탭 탐색을 선택합니다.

고정 탭 CLS의 라이브 예

이 라이브의 좋은 예는 Itemzero’s Shop에 있으며 탭은 블록 편집기와 Mr.Utils를 사용하여 생성되었습니다.



Itemzero의 상점은 Mr.Utils 구성 요소의 탭을 사용합니다.

그리고 그게 다야! JS 구성 요소를 사용할 때 레이아웃 이동을 피하는 몇 가지 방법입니다.