Next.Js 모험: 삽입된 YouTube 동영상 몇 개가 내 성능 점수를 망치는 방법

Next.Js 애호가님께,

최근에 저는 ProductHunt 출시를 위해 겸손한 시작을 준비하기 위해 열심히 노력하고 있습니다.

그래서 얼마 전에 홈페이지에 앱이 작동하는 모습을 보여주는 몇 개의 동영상이 필요하다고 결정했습니다. 화려한 걸 위한 예산이 없어서 3개의 스크린캐스트를 만들고 멋진 음악과 동기화하여 YouTube에 업로드했습니다.

나중에 페이지에 동영상을 삽입했습니다.

분명히 몇 년 전에 배웠던 몇 가지 오래된 교훈이 잊혀졌습니다.

다음 날 또 다른 스크린캐스트를 준비하다가 이 "멋진 전망"에 놀랐습니다.



나는 기절했다…

내가 페이지를 떠난 방법이 아닙니다. 마지막으로 확인했을 때 PWA를 제외한 모든 것이 녹색으로 표시되었습니다.

그래서 디버깅을 시작했고 바로 그 나쁜 점수의 원인이 내장된 YouTube 비디오라는 것을 알았습니다.

얼마나 당혹스럽습니까!

기술 SEO와 더 나은 웹 사이트 성능을 달성하는 방법에 대해 알고 있다고 주장했지만 해당 비디오가 내 웹 페이지에 미칠 끔찍한 영향을 예측하지 못했습니다.

그래도…

몇 가지 조사(일명 인터넷 검색)와 창의적인 숙고 끝에 다음과 같은 반응 구성 요소를 생각해 냈습니다.

import {useRef} from 'react';

export type Props = {
    video: string;
    width: string,
    height: string,
    thumbnailQuality: 'default' | 'hqdefault' | 'mqdefault' | 'sddefault'
}

export default function YouTubeFrame({video, width, height, thumbnailQuality}: Props) {
    const divRef = useRef<HTMLDivElement|null>(null);

    const onClick = () => {
        const iframe = document.createElement( "iframe" );
        iframe.setAttribute( "frameborder", "0" );
        iframe.setAttribute( "allowfullscreen", "1");
        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
        iframe.style.width = width;
        iframe.style.height = height;
        iframe.setAttribute( "src", `https://www.youtube.com/embed/${video}?rel=0&showinfo=1&autoplay=1` );
        if (divRef.current) {
            divRef.current.innerHTML = "";
            divRef.current.appendChild(iframe);
        }
    }


    return (
        <div ref={divRef} className="youtube-frame position-relative">
            <span onClick={onClick} className="ti-control-play position-absolute display-1 text-white" />
            <Image onClick={onClick} src={`https://img.youtube.com/vi/${video}/${thumbnailQuality}.jpg`} alt="YouTube Video Thumbnail" width={width} height={height} className="shadow" />
        </div>
    );
}

보시다시피 구성요소는 동영상 슬러그, 선호하는 미리보기 이미지 크기 및 원하는 크기를 매개변수로 허용합니다. 동영상을 바로 삽입하는 대신 플레이스홀더(썸네일)를 넣어 해당 플레이스홀더를 클릭한 후에만 동영상의 iframe이 추가되도록 했습니다.

천재적인 것은 아니지만 우주의 균형을 회복했습니다…



이 사례 연구는 Next.Js가 "SEO 친화적인"프레임워크이지만 "SEO 준비"가 아니라는 증거입니다.

우리는 웹 개발자로서 일을 망칠 여지가 많으므로 조심해야 합니다. 상당한 변경을 하려고 할 때마다 웹 사이트의 성능을 측정해야 합니다. 그리고 변경 후에 측정해야 합니다.

이 추가 모니터링은 작업의 실제 영향을 알 수 있는 유일한 방법입니다.

건배,
사셰 부치코프

추신 내가 만든 스크린캐스트를 보려면 BuhalBu’s homepage을 방문하십시오 …