예산으로 미디어 성능을 높이는 방법

이 기사는 커뮤니티가 모든 브라우저, 장치 및 대역폭에서 디지털 경험을 빠르고 쉽게 생성, 관리 및 제공할 수 있도록 도와주는 Cloudinary의 친애하는 친구들의 친절한 지원을 받았습니다. 감사합니다!

미국 학자 메이슨 쿨리는 인생의 어려운 사실을 이렇게 능숙하게 묘사했습니다. 의심할 여지 없이 미디어는 웹사이트에 활기를 불어넣고 페이지에 머물고 자주 다시 방문하도록 유도하는 것은 물론 매력, 흥분, 흥미를 더합니다. 그러나 통제 불능 지출이 장기적으로 나쁜 징조인 것처럼, 예산이 없는 디지털 미디어도 사이트 성능을 떨어뜨립니다.

예를 들어 페이지 로드 속도가 1초 만에 느려지면 Amazon 연간 매출이 16억 달러에 이를 수 있습니다. 페이지 로드 속도에 영향을 미치는 많은 요소 중에서 미디어 가 중요한 요소입니다. 따라서 미디어 최적화의 우선 순위가 절실히 필요합니다. 해당 작업에 돈을 쓰고 미디어 예산을 편성하면 장기적으로 상당한 비용 절감과 이점을 얻을 수 있습니다.

실적 예산

“실적 예산은 '...그냥 들리는 대로입니다. 페이지에 '예산'을 설정하고 페이지가 이를 초과하지 않도록 합니다. 이것은 특정 로드 시간일 수 있지만 일반적으로 예산을 요청 수 또는 페이지 크기로 나눌 때 더 쉽게 대화할 수 있습니다."

— 팀 캐들렉

웹 경험을 계획하고 성능 저하를 방지하기 위한 메커니즘으로서 성능 예산은 다음 기준으로 구성될 수 있습니다.

• 전체 페이지 무게,
• 총 HTTP 요청 수,
• 특정 모바일 네트워크의 페이지 로드 시간,
• 첫 번째 입력 지연(FID)
• 첫 번째 콘텐츠가 포함된 페인트(FCP),
• 누적 레이아웃 시프트(CLS),
• 가장 큰 내용이 포함된 페인트(LCP).

Vitaly Friedman은 최적화 기술에 대한 유용한 팁과 함께 웹 성능에 영향을 미치는 구성 요소를 설명하는 훌륭한 체크리스트를 제공합니다. 이러한 구성 요소에 익숙해지면 성능 목표를 설정할 수 있습니다.

명확하게 문서화된 성능 목표를 통해 다양한 팀이 최적의 콘텐츠 전달에 대해 의미 있는 대화를 나눌 수 있습니다. 예를 들어 예산은 페이지에 5개의 이미지(또는 3개의 이미지와 1개의 비디오)를 포함하고 계획된 한도 내에서 유지해야 하는지 결정하는 데 도움이 될 수 있습니다.

그러나 성능 예산을 독립형 메트릭으로 갖는 것은 별로 도움이 되지 않을 수 있습니다. 이것이 우리가 성과를 조직 목표와 연관시켜야 하는 이유입니다.

사업 실적

최적화되지 않은 비디오와 이미지에 많은 바이트를 과시하면 리치 미디어 경험이 더 이상 풍부하지 않을 것입니다. 조직은 사람들이 구매하도록 유도하거나, 교육하고, 동기를 부여하거나, 도움과 자원봉사자를 구하는 것과 같은 결과를 달성하기 위해 존재합니다. 웹에 있는 사람이라면 누구나 비즈니스 메트릭에 대한 다양한 성능 측정의 효과 사이의 관계를 이해할 것입니다.

WPOStats는 성능 저하(수백 밀리초에서 몇 초로)가 연간 매출의 엄청난 하락을 초래할 수 있다는 사실을 보여주는 수백 건의 사례 연구 를 강조합니다. 이러한 관계를 구축하면 성과가 비즈니스에 미치는 영향을 추적하고 궁극적으로 조직의 성과 문화를 구축하는 데 크게 도움이 됩니다.

마찬가지로 느린 사이트는 전환에 큰 영향을 줄 수 있습니다. 온라인 비즈니스가 직면한 어려운 과제는 공연 예산 내 에서 청중을 참여시키는 것 사이에서 적절한 균형을 찾는 것입니다.

그렇다면 청중 참여를 위한 중요한 구성 요소가 최적화된 시각 미디어 라는 것은 놀라운 일이 아닙니다. 예를 들어 관련성 있고 흥미롭고 매력적인 시각 자료와 함께 제품 또는 서비스에 대한 이야기를 짜는 매력적인 비디오입니다.

MIT 신경과학자에 따르면 우리의 뇌는 시각 매체를 13밀리초 미만으로 흡수하고 이해할 수 있는 반면, 텍스트는 보통 독자가 이해하는 데 3.3분이 넘게 걸릴 수 있습니다. 종종 다시 읽고 다른 곳을 상호 참조한 후입니다. 그렇다면 마이크로비디오 콘텐츠(보통 10-20초 길이)가 종종 큰 참여와 전환 이득을 제공한다는 것은 놀라운 일이 아닙니다.

비디오의 매력

온라인 쇼핑을 하는 동안 자세한 제품 이미지 를 볼 수 있을 것으로 기대합니다. 몇 년 동안 저는 제품 사용법이나 조립 방법, 실제 사용 사례를 보여주는 비디오로 보완되는 제품 탐색을 선호하게 되었습니다.

제 개인적인 경험 외에도 많은 연구가 비디오 콘텐츠의 중요성을 증명합니다.

• 소비자의 96%는 온라인 구매 결정을 내릴 때 동영상이 도움이 된다고 생각합니다.
• 온라인 쇼핑객의 79%는 웹페이지의 텍스트를 읽는 것보다 제품에 대한 정보를 동영상으로 보는 것을 선호합니다.
• 올바른 제품 비디오는 전환율을 80% 이상 높일 수 있습니다.

웹상의 비디오 전송에 대해 말하면,

“평균 비디오 무게는 매년 극적으로 증가하고 있으며 데스크톱보다 모바일에서 더 많이 증가하고 있습니다. 어떤 경우에는 모바일 장치에 고해상도 화면이 있기 때문에 보장될 수 있지만 HTML만 사용하여 다양한 비디오 크기를 제공하는 기능이 부족하기 때문일 수도 있습니다. 웹상의 많은 대형 비디오는 마케팅 페이지에 직접 배치되며 적절한 크기를 전달할 수 있는 정교한 미디어 서버가 없기 때문에 미래에는 반응형 이미지에서 볼 수 있는 비디오 전달을 위한 유사한 간단한 HTML 기능을 볼 수 있기를 바랍니다. "

— 스콧 젤

Conviva의 2020년 4분기 스트리밍 상태(등록 필요)에서도 동일한 감정이 전달되었는데, 이 보고서에서는 휴대전화가 다른 장치보다 20% 더 많은 버퍼링 문제 , 19% 더 높은 비디오 시작 실패 및 5% 더 긴 시작 시간을 보았다고 언급했습니다.

렌더링 문제 외에도 비디오 전송 은 특히 브라우저의 최적 형식을 제공할 수 없는 경우 대역폭 비용을 증가시킬 수 있습니다. 또한 콘텐츠 전송 네트워크(CDN) 또는 여러 CDN을 사용하여 지연 시간을 줄이기 위해 가장 가까운 가장자리 영역에 사용자를 매핑하지 않는 경우(최적 이하의 라우팅이라고 함) 비디오 시작 속도가 느려질 수 있습니다.

마찬가지로 최적화되지 않은 이미지가 페이지 팽창의 주요 원인이었습니다. Web Almanac에 따르면 모바일 또는 데스크톱 장치로 전송되는 이미지 바이트의 차이는 매우 작아서 모든 추가 바이트가 실제로 필요하지 않은 장치 의 경우 대역폭을 더 많이 낭비하게 됩니다.

의심할 여지 없이 매력적이면서도 최적화되지 않은 콘텐츠를 너무 많이 사용하면 비즈니스 목표에 해가 됩니다. 바로 여기에서 균형 잡힌 예술이 작용합니다.

미디어 콘텐츠와 성능의 균형을 맞추는 기술

리치 미디어는 사용자 참여를 촉진할 수 있지만 웹 사이트 성능 및 비즈니스 목표와 함께 제공 비용의 균형을 맞춰야 합니다. 한 가지 대안은 YouTube 또는 Vimeo와 같은 타사를 통해 비디오를 호스팅하고 제공하는 것입니다.

그러나 대역폭 절약에도 불구하고 이러한 접근 방식에는 비용이 따릅니다. 콘텐츠 소유자는 완전히 맞춤화된 브랜드 경험 을 구축하거나 개인화를 제공할 수 없습니다. 물론 이미지를 호스팅하고 제공해야 합니다.

콘텐츠를 오프로드할 필요가 없습니다. 다른 옵션도 사용할 수 있습니다. 다음을 수행하여 최적의 미디어 전달을 위해 시스템을 개선하는 것을 고려하십시오.

현재 사용량 이해

웹 페이지의 무게와 미디어 자산의 크기를 연구하십시오. 웹 연구 전문가인 Tammy Everts는 페이지 크기가 모바일의 경우 1MB 미만이고 다른 모든 페이지의 경우 2MB 미만이어야 한다고 권장합니다. 또한 중요한 페이지에 표시되는 리소스를 식별합니다.

예를 들어, 텍스트 단락과 관련 이미지를 짧은 비디오로 바꿀 수 있습니까? 그 결정이 비즈니스 목표에 어떤 영향을 미칩니까? 이 단계에서 실제 사용자 모니터링(RUM) 및 분석을 검토하고 전환율 및 참여율을 높이는 중요한 페이지를 식별해야 할 수 있습니다.

또한 LightHouse와 같은 도구를 사용하여 툴킷의 일부로 Google의 CWV(Core Web Vitals)를 종합적으로 추적해야 합니다. CrUX와 같은 실제 사용자 모니터링(RUM)을 통해 CWV를 측정할 수도 있습니다. CWV는 Google이 크롤러에 보내는 신호이기도 하므로 LCP(Large Contentful Paint), FID(First Input Delay) 및 CLS(Cumulative Layout Shift)와 같은 측정항목을 모니터링하고 최적화하는 것이 좋습니다.

올바른 형식 제공

보기 장치 또는 브라우저에 크기 및 해상도 측면에서 가장 적합한 형식으로 이미지 또는 비디오를 제공합니다. 이를 위해 이미지 CDN이 필요할 수 있습니다. 또는 WebM, AVIF, JPEG-XL, HEIC 등과 같은 변형을 만들고 요청하는 User-Agent 및 Accept 헤더를 기반으로 올바른 콘텐츠 유형을 선택적으로 제공합니다.

일회성 전환의 경우 Squoosh.app 또는 avif.io와 같은 도구를 사용해 볼 수 있습니다. 관련된 방법은 애니메이션 GIF를 비디오로 변환하는 것입니다. 자세한 내용은 이 Web.dev 기사를 참조하세요. 비디오 게시를 처리하기 위한 워크플로를 설정하고 싶으십니까? 크기 및 품질에 맞게 비디오 최적화 문서에서 유용한 정보를 참조하십시오.

적당한 크기로 서빙하세요

모바일 장치의 이미지 중 41% 이상이 부적절한 크기입니다. 따라서 고정 너비를 제공하는 대신 Lazysizes와 같은 도구를 사용하여 컨테이너 크기에 맞게 이미지와 비디오를 자릅니다. 게다가 이미지를 자르는 동안 관심 영역을 감지할 수 있는 AI 도구를 사용하면 시간과 노력을 절약할 수 있습니다. 스크롤 없이 볼 수 있는 이미지에 대해 기본 지연 로딩을 활용할 수도 있습니다.

비디오에 자막 추가

거의 85%의 비디오가 소리 없이 재생됩니다. 자막을 추가하면 접근 가능한 경험을 제공할 뿐만 아니라 청중의 관심을 끌고 참여도를 높일 수 있습니다. 그러나 비디오를 전사하는 것은 지루한 작업일 수 있습니다. AI 기반 전사 서비스로 작업하고 대신 개선하여 워크플로를 자동화할 수 있습니다.

여러 CDN을 통해 제공

CDN은 라스트 마일 대기 시간을 완화하고 비디오 시작 시간을 단축하며 잠재적으로 버퍼링 문제를 줄일 수 있습니다. Citrix의 연구에 따르면 다중 CDN 전략은 대기 시간을 더욱 줄일 수 있고 CDN의 에지 노드에서 국부적으로 중단된 경우에도 지속적인 가용성을 제공할 수 있습니다.

여러 신중한 도구를 활용하는 대신 Cloudinary의 Media Optimizer와 같은 제품을 탐색할 수 있습니다. 이 제품은 미디어를 효과적이고 효율적으로 최적화하여 다중 CDN 에지 노드를 통해 올바른 형식과 품질을 제공합니다. 즉, Media Optimizer는 품질과 크기를 모두 최적화하여 작은 파일에서 높은 시각적 충실도를 제공합니다.

점진적으로 비디오 렌더링

YouTube에서 미리보기 동영상을 자동 재생하면 동영상 시청 시간이 90% 이상 증가하는 것으로 나타났습니다. 동영상 자동재생은 장점이 적고 단점이 많으므로 사용할 때와 사용하지 않을 때를 주의하는 것이 중요합니다. 비디오를 일시 중지하는 옵션을 최소한으로 갖는 것이 중요합니다.

페이지 크기 예산의 균형을 맞추는 좋은 방법은 먼저 AI가 만든 비디오 미리보기와 포스터 이미지만 제공하고 사용자가 비디오를 클릭하는 경우에만 전체 비디오를 로드하는 것입니다. 그렇게 하면 불필요한 다운로드를 제거하고 페이지 로드를 가속화할 수 있습니다.

또는 처음에 미리 보기 비디오를 로드하고 플레이어가 전체 버전을 자동 재생하도록 합니다. 미리보기가 완료되면 플레이어는 네트워크 연결 API를 사용하여 장치의 연결 유형을 확인하고 사용자가 연결 상태가 양호하면 미리보기에서 실제 비디오로 소스를 교체합니다.

데모용 샘플 페이지를 확인할 수 있습니다. 팁 이 있습니다. CDN은 네트워크 연결 유형을 보다 안정적으로 감지할 수 있으므로 프로덕션 품질의 코드는 CDN을 활용하여 네트워크 속도를 감지할 수 있으며, 이를 기반으로 클라이언트 코드가 장편 비디오를 점진적으로 로드할 수 있습니다.

마무리

앞으로는 말로 할 수 없는 방식으로 이야기를 전달하는 놀라운 능력 덕분에 시각 미디어는 웹사이트와 모바일 앱에서 계속 지배적인 요소가 될 것입니다. 그러나 전달할 올바른 콘텐츠를 결정하는 것은 비즈니스 전략과 사이트 성능에 따라 다릅니다.

“실적 예산은 어떤 콘텐츠를 표시할지 결정하는 데 도움이 되지 않습니다. 그보다는 그 콘텐츠를 표시하기 위해 선택하는 방법에 관한 것입니다. 페이지의 무게를 줄이기 위해 중요한 콘텐츠를 모두 제거하는 것은 성능 전략이 아닙니다."

— 팀 캐들렉

명심해야 할 건전한 조언입니다.