홈페이지를 마이그레이션하면서 가장 신경을 썼던 부분은 아무래도 웹 페이지 로드 성능이었던 것 같습니다. 이미지가 많은 영화 소개 홈페이지 특성 상, 모든 이미지를 원본 사이즈로 로드하게 되면 페이지 로드 속도는 물론이고 전송 데이터의 양도 많아져서 결국에는 사용자 경험이 떨어지게 되기 때문이죠. 이를 해결하기 위해 혹성의 아이 홈페이지에는 이미지 최적화 기법과 차세대 이미지 포맷인 WebP를 채택했습니다.

홈페이지를 배포하기 시작하고 Lighthouse 도구로 성능을 측정해봤습니다. 그런데, 성능 수치에서 저의 기대에 못 미치는 점수가 나왔습니다. 이미지 최적화를 했음에도 말이죠. 보고서를 더 살펴봤습니다.

성능 점수에 영향을 주는 요소 중 하나는 YouTube 임베드 관련 코드였습니다. YouTube 동영상을 다른 웹 사이트에 게시를 하려면 <iframe> 태그를 사용하게 되는데, 이렇게 불러온 YouTube의 iframe이 동영상 플레이어와 관련한 JavaScript 코드 및 리소스를 로드하기 때문에 페이지 성능 점수에 영향을 주는 것이었습니다.

문제를 해결하기 위해 해결법을 찾아보기 시작했습니다. YouTube의 API도 찾아 보고, iframe 관련 속성들도 찾아보곤 했습니다만, 원하는 답을 찾지는 못했습니다. 그러던 중, 한 가지 생각이 번득 들었습니다. "iframe을 필요할 때만 로드하면 되는 거 아닌가?"

어차피 임베드된 YouTube 동영상 iframe은 '사용자가 클릭했을 때 동영상이 실행'되기 때문에, 사용자가 클릭하기 전에는 iframe을 로드할 필요가 없는 것이었습니다. 그래서 저는 YouTube 플레이어 영역에 동영상의 섬네일을 먼저 로드하고, 섬네일을 사용자가 클릭했을 때 iframe을 동적으로 로드하는 방식으로 개선하였습니다.

위의 방식으로 YouTube 임베드를 개선하여 Lighthouse 점수를 측정한 결과 성능 점수가 약 10점 가량 상승되었습니다. YouTube가 차지하던 타사 코드의 영향도 사라졌고요. 또한 페이지 전송 용량도 1MB 가량 줄어드는 효과도 봤습니다. 홈페이지를 개선하는 김에 접근성 점수도 보완하고 검색 엔진 최적화도 보완한 덕분에 저에게 만족스러운 Lighthouse 점수를 얻을 수 있었습니다.

다만 아쉬운 점은, 권장 사항 점수는 개선하기 어려웠습니다. Cloudflare의 Turnstile 서비스에서 deprecated된 API를 사용하고 있어서 발생하는 문제로 파악하고 있습니다. 이 부분의 해결책에 대해서는 한번 고민해보아야 할 것 같습니다.