LightHouse로 진단해서 나온 문제점 개선

ijimlnosk·2024년 3월 29일

기존에 만들어둔 TMDB의 API를 사용해서 영화 소개를 하는 페이지를 LightHouse로 진단하여 문제점을 개선해보았다.

처음 LightHouse를 사용하여 진단한 결과이다.

FCP 개선하기

자바스크립트는 줄이는 문제는 build로 어느정도는 줄여주었지만 더 압축하기 위해 webpack을 사용하여 build를 하려고 했으나 웹팩의 내용을 아직 다 이해하지 못해 지금은 사용하지 못하였다.
필수 원본 미리 연결하기는 public 폴더 안에 index.html폴더 안에 link에 preconnect와 dns-prefetch를 사용해주어 미리 연결되게 설정을 해주었다.

LCP 개선하기

image 태그에 alt사용하여 검색엔진 최적화
preloadLink로 head에 image 미리 불러와서 이미지 미리 로드 해결

 useEffect(() => {
        const preloadLink = document.createElement('link');
        preloadLink.href = `https://image.tmdb.org/t/p/w300${data?.poster_path}`;
        preloadLink.rel = 'preload';
        preloadLink.as = 'image';
        document.head.appendChild(preloadLink);

        return () => {
            if (preloadLink) {
                document.head.removeChild(preloadLink);
            }
        };
    }, [data]);