유튜브 영상 첨부한 웹페이지 속도 영향 컨트롤 방법

최근 구글 서치 콘솔에 페이지 경험 카테고리 핵심 성능 보고서에 CLS 문제 : 0.25 이상(데스크톱)의 문제가 생겨서 확인하고자 합니다.

불량 URL 보고서

 

여러 문제들이 있을 겁니다.

먼저

변경한 사항이 없는데도 내 사이트 상태가 변경됨

사이트를 변경하지 않았는데 여러 페이지의 상태가 크게 바뀐 경우, 많은 페이지가 경계선 상태에 있다가 사이트 수준의 이벤트로 인해 그 경계선을 넘었을 가능성이 있습니다. 예를 들어 사이트 트래픽이 크게 증가하거나 이미지 파일을 제공하는 서비스의 지연 시간이 바뀌면 사이트 속도가 느려질 수 있습니다. 사이트 수준의 작은 변경사항만으로도 가까스로 '빠름' 상태를 유지하고 있던 여러 페이지가 '개선이 필요함' 카테고리로 내려갈 수 있으며, '개선이 필요함'에서 '느림'으로 바뀔 수도 있습니다.

 

CLS란

CLS(레이아웃 변경 횟수): CLS는 페이지의 전체 수명 동안 발생하는 모든 예상치 못한 레이아웃 변화의 모든 개별적인 레이아웃 변화 점수의 총 합계를 측정합니다. 점수는 0부터 시작하며 양수인 수입니다. 여기에서 0은 변화가 없음을 나타내며 숫자가 클수록 페이지의 레이아웃이 많이 변경되었음을 보여줍니다. 사용자가 상호작용하려고 할 때 페이지 요소가 변경되는 사용자 환경은 좋지 않으므로 CLS는 중요합니다. 왜 큰 값이 표시되었는지 알 수 없다면 페이지와 상호작용해 보면서 점수에 어떻게 영향을 주는지 확인하세요.

 

우선 페이지에 기존 삽입된 로딩 시간을 3000에서 1500으로 단축시켰고

그다음 첨부된 동영상을 최적화 해보려고 합니다.

 

유튜브 동영상을 iframe으로 삽입했는지 확인하고 로딩 속도 단축을 위해 $(window).load()를 써서 전페체이지가 로딩된 뒤에 페이지가 뜨도록 설정합니다.

그러면 로딩이미지를 띄워 유저들이 로딩이 되고 있다는 것으로 인식할 수 있습니다.

 

자동으로 재생되게 하는 autoplay나 특정 시간 이후부터 재생하는 start 같은 매개변수들도 적용해 볼 수 있습니다.

그리고 controls이라는 매개 변수를 통해서 클릭하기 전까지 로딩이 되지 않아서 로딩 시간을 단축하는데 영향을 줄 수 있습니다.

controls
값 : 0, 1 또는 2를 지정할 수 있음. 기본값은 1
이 매개변수는 동영상 플레리어 컨트롤을 표시할지 여부를 나타내며 Flash플레이어를 로드하는 iFrame 삽입의 경우 이 매개변수가 플레이어에서 컨트롤이 표시되는 시점 및 플레이어가 로드되는 시점을 정의한다.

controls = 0
플레이어 컨트롤이 플레이어에서 표시되지 않음
controls = 1
플레이어 컨트롤이 플레이어에서 표시됨
controls = 2 플레리어 컨트롤이 플레이에서 표시됨
참고 : 매개변수 값 1 및 2는 동일한 사용자 환경을 제공하기 위해 마련되지만 controls=2는 iFrame 삽입에 1보다 개선된 성능을 제공

참고 : https://brunch.co.kr/@khross3701/9

유튜브 영상 삽입 뒤 웹페이지 로딩 속도 느려짐 해결

기존 html 설정

변경해본 매개변수

controls=2

클릭 뒤 로딩하는 옵션

showinfo=0

제목을 없애는 옵션

modestbranding=1

유뷰트 로고 없애는 옵션

변경 html 설정