▲

GN⁺: YouTube Embeds는 너무 무겁고, 고치는게 가능함

 (frontendmasters.com)
2P by neo 2달전 | favorite | 댓글 2개
  • YouTube Embeds는 약 1.3MB 크기이며 여러 임베드 간에 리소스를 공유하지 않음
  • <lite-youtube> 웹 컴포넌트를 사용하면 약 100k로 줄어들며 리소스를 공유하고 기능을 희생하지 않음

YouTube 비디오 임베드

  • YouTube 비디오를 웹사이트에 임베드할 수 있음
  • YouTube의 Share 메뉴에서 < > Embed 옵션을 선택하면 <iframe>이 포함된 HTML 코드가 제공됨
  • <iframe>은 성능에 좋지 않지만, 보호된 타사 콘텐츠에는 적합함

성능 개선을 위한 제안

  • loading="lazy" 속성을 추가하여 비디오가 보이지 않을 때 즉시 로드되지 않도록 함
  • 인라인 스타일을 추가하여 비디오의 원래 비율을 유지하고 유동적으로 만듦

현재 YouTube Embed의 문제점

  • 단일 YouTube Embed만 있는 페이지에서 32개의 요청, 1.3MB 데이터 전송, 2.76초 로드 시간 소요
  • 여러 임베드 간에 리소스를 공유하지 않아 임베드 수가 늘어날수록 데이터 전송량이 선형적으로 증가함

외관 및 기능

  • YouTube Embed는 비디오의 "포스터" 이미지, 비디오 제목, 큰 재생 버튼을 제공함
  • 이러한 기능은 많은 리소스를 사용하지 않고도 구현 가능함

왜 이런 방식인가?

  • 가벼운 임베드를 테스트했으나 참여도가 감소했다는 보고가 있음
  • 그러나 이는 직관에 반하는 결과이며, 더 깊은 검토가 필요함
  • 많은 리소스를 사용하는 것은 환경적으로도 문제가 됨

해결책: 다른 방식으로 임베드 경험 복제

  • Google의 Paul Irish가 만든 lite-youtube-embed 웹 컴포넌트가 있음
  • 이 컴포넌트는 시각적 성능에 초점을 맞추어 약 224배 더 빠르게 렌더링됨
  • 기본 임베드와 동일한 기능을 제공하면서도 속도, 효율성, 기본 프라이버시를 향상시킴

Lite YouTube Embed 사용 방법

  1. 웹 컴포넌트를 초기화하는 JavaScript를 연결
  2. 사용
  • npm에서 설치하거나 프로젝트에 복사하여 사용 가능
  • CDN에서 링크하여 사용 가능

대안

  • Shadow DOM 버전 (스타일 보호, 스타일링 어려움)
  • 직접 구현
    • Raymond Camden: YouTube Embed 웹 컴포넌트 빌드 (바닐라 및 WebC 버전)
    • Adrian Roselli: YouTube 및 Vimeo 웹 컴포넌트
  • Mux: <youtube-video> (DOM API와 일치)
  • React Port 및 Next.js 공식 버전

GN⁺의 정리

  • YouTube Embed는 많은 리소스를 사용하여 성능에 부정적인 영향을 미침
  • lite-youtube-embed와 같은 웹 컴포넌트를 사용하면 성능을 크게 향상시킬 수 있음
  • 환경적으로도 긍정적인 영향을 미칠 수 있음
  • 비슷한 기능을 제공하는 다른 웹 컴포넌트도 고려해볼 만함
▲
neo 2달전  [-]
Hacker News 의견

  • 커뮤니티 포럼 플랫폼에서 YouTube 임베드를 감지하고 클릭 전까지 로드되지 않는 프록시 썸네일로 대체함

    • 한 사람이 YouTube 비디오를 공유한다고 해서 모든 사용자가 1MB 이상의 YouTube JavaScript를 다운로드하고 Google에 의해 IP가 추적될 필요는 없음

  • 저자는 가벼운 버전이 참여도를 줄인다는 것을 믿지 않음

    • 반면, 나는 완전히 믿음
    • 추천된 lite-youtube-embed 프로젝트 페이지의 데모에서 가벼운 버전이 비디오를 재생하는 데 더 오래 걸림
    • 로드 시간이 밀리초 단위로 늘어날수록 참여도가 감소함

  • 다른 플레이어가 사용자에게 다르게 취급된다는 것은 놀랍지 않음

    • lite-youtube-embed는 실제 YouTube 페이지로 클릭할 수 없게 함
    • 이는 콘텐츠의 실제 출처로 이동을 방지하려는 시도로 보일 수 있음
    • 임베드된 비디오를 거의 재생하지 않지만, 재생할 때는 일반 YouTube 경험을 선호함
    • 추가적인 레이어가 있는 것처럼 보이면 클릭할 가능성이 줄어듦

  • 개발자가 사용자들이 소프트웨어를 어떻게 사용하는지 정확히 알 수 없다는 잘못된 믿음의 예임

    • 비디오와 Google의 사용을 줄이고, JavaScript의 메가바이트를 줄이기를 원함
    • 더 나은 웹을 위해 YouTube 비디오 임베드를 중단해야 함

  • 블로거들이 GitHub Gist 임베드를 사용하지 않도록 강제할 필요가 있음

    • Hugo와 같은 정적 사이트 생성기는 구문 강조 표시가 있는 코드 스니펫을 지원함
    • 동적 사이트는 highlight.js를 사용할 수 있음

  • 임베드의 전체 무게를 줄이고 UX를 개선하는 한 가지 방법은 광고를 차단하는 것임

    • Content Security Policies를 사용하여 페이지에서 광고를 차단할 수 있음

  • ublock 사용자를 위한 사용자 측 솔루션으로 click 2 load를 사용할 수 있음

    • Chrome이 manifest v3로 전환 중이므로 작동하지 않을 수 있음

  • 가벼운 임베드가 참여도를 줄인다는 테스트 결과가 있음

    • 빠른 로드 시간이 참여도를 개선해야 하지만, 가벼운 임베드로 참여도가 감소했다면 기능이 희생되었을 가능성이 있음

  • 임베드된 비디오는 YouTube 서버의 파일을 가리키는 <video> 요소일 수 있음

    • 상업적 이익이 방해가 되었음

  • 임베드의 수가 늘어날수록 무게가 선형적으로 증가함

    • 동일한 출처 정책이 캐시된 리소스를 사용할 수 있도록 해야 함

  • lite youtube embed의 대안으로 나의 솔루션을 공유함

    • 완전한 사용자 정의 가능성 측면에서 더 나은 절충안을 제공함
답변달기