[lighthouse, 프론트 성능최적화] Some third-party resources can be lazy loaded with a facade

현재 지인의 동물병원 홈페이지를 제작하고 있다.
해당 홈페이지는 단순 static한 웹사이트다.
처음으로 실제 서비스가 되는 프로젝트이기 때문에 이전 프로젝트에서는 생각하지 못했던 성능 최적화, SEO, 기타 등등에 대한 포스트를 몇가지 적어보고자 한다.

Lighthouse 검사

먼저 프론트엔드 성능 최적화의 필수 도구인 구글크롬의 lighthouse를 통해 다음과 같은 문제점을 지적 받았다.
Some third-party resources can be lazy loaded with a facade

문제 원인

홈페이지 하단에 유튜브 동영상을 <iframe>을 JSX컴포넌트에서 바로 임베딩하는데 이부분이 문제였다.

이렇게 바로 임베딩 할 경우 불필요하게 페이지 로드를 늦출 수 있다.

네트워크 탭을 보면 유튜브 관련 컨텐츠들을 받아오는 것을 확인 할 수 있다.

서드파티 콘텐츠가 중요하지 않다면, 이를 lazyload함으로써 이 성능 비용을 감소시킬 수 있다.

lazyload를 하는 동안 사용자에게는 훨씬 적은 용량의 facade를 보여주고 상호작용이 가능해지면 실제 컨텐츠를 보여주는 방법이 권장된다.

facade란 다음과 같이 실제 컨텐츠가 아닌 가짜 이미지파일을 말한다.

해결방법

리액트에서 이를 매우 간단하게 구현하는 라이브러리가 있다.
react-lite-youtube-embed

(videos.tsx)
import Section from "@/components/common/section";
import Video from "./video";
import Container from "@/components/common/container";

export default function VideosSection() {
  return (
    <Section>
      <div className="bg-stone-100 py-6 sm:py-12">
        <Container>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
            {VIDEOS.map((video) => (
              <Video
                videoId={video.videoId}
                title={video.title}
                key={video.videoId}
              />
            ))}
          </div>
        </Container>
      </div>
    </Section>
  );
}

const VIDEOS = [
  {
    videoId: "DsPgA4z2FcA",
    title: "강아지낙상 후 🚨응급수술이 필요한 증상에 대해 알아봐요!",
  },
  {
    videoId: "DYl8F3YzgPI",
    title:
      "고양이심장병은 물론, 강아지 정밀 검사와 특수동물 진료 가능한 병원은?",
  },
  {
    videoId: "eDavx8akNfw",
    title: "강아지와 고양이 외, 특수동물 병원을 찾는다면?",
  },
];


(video.tsx)
"use client"; 
// 해당 라이브러리에서 'useState'를 사용하므로 'use client'를 붙이라는 에러메세지가 뜬다.

import LiteYouTubeEmbed from "react-lite-youtube-embed";
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";

type VideoType = { videoId: string; title: string };

export default function Video({ title, videoId }: VideoType) {
  return <LiteYouTubeEmbed id={videoId} title={title} />;
}

라이브러리 사용 후에는 해당 파일들이 없어지고 다음과 같은 facade 이미지를 받아오는 것을 볼 수있다.

Lighthouse를 다시 돌려보면 Some third-party resources can be lazy loaded with a facade 항목을 통과한 것을 확인할 수 있다.