WordPress에 비디오를 삽입하는 가장 효율적인 방법

게시 됨: 2024-03-04

목차
동영상이 포함된 WordPress: 핵심 웹 바이탈 테스트
이 문제를 해결하려면 무엇이 필요합니까?
요약

아, 전화 접속과 Edge(2G) 연결이 사치였고 YouTube에서 동영상을 보는 것이 인내심을 시험하는 것처럼 보였던 시절을 기억하십니까?

초고속 인터넷이 없다면 좋아하는 비디오의 재생 버튼을 클릭하고 일시 정지를 누른 다음 로드하고 버퍼링할 수 있습니다. 그 사이에 커피 한잔 마시러 갔는데, 돌아올 즈음에는 운이 좋으면 한 번에 끊김 없이 영상이 스트리밍되거나 버퍼링에 시달려야 할 수도 있었습니다.

하지만 이제 가장 좋은 점은 그런 일이 더 이상 일어나지 않으며 빠른 인터넷 연결이 새로운 표준이 되었다는 것입니다. 5G 기술 덕분에 사람들은 이제 4K 해상도에서도 YouTube 동영상을 원활하게 시청할 수 있습니다.

웹사이트에서 비디오를 사용하는 현재 시나리오

이러한 사실로 인해 웹사이트에 동영상을 삽입하는 것조차 널리 보급되었습니다. 결국, 비디오는 사용자 경험을 전달하고 향상시키는 보다 매력적인 방법을 제공합니다.

어떤 사람들은 웹 사이트 디자인에 역동적이고 시각적으로 매력적인 요소를 추가하기 위해 비디오를 웹 사이트의 전체 배경으로 사용하여 더욱 발전합니다.

이 전략은 방문자의 관심을 끌고 유지하는 데 더 효과적인 것으로 밝혀졌기 때문에 모든 개인이 자신의 WordPress 사이트에 비디오를 삽입하는 것이 표준 관행으로 판명되었습니다.

그러나 사실은 모든 사람이 올바르게 하고 있는 것은 아닙니다. 그들 중 대다수는 WordPress에 비디오를 삽입하는 올바른 방법을 모르기 때문에 결과적으로 웹 사이트 속도가 느려집니다.

이는 조작된 진술이 아닙니다. 우리는 숫자와 결과가 진실을 말하도록 하는 것을 선호합니다.


동영상이 포함된 WordPress: 핵심 웹 바이탈 테스트

더 이상 끌거나 자랑할 필요 없이 바로 테스트와 결과를 살펴보겠습니다.

먼저, 테스트 목적으로 비디오와 그래픽이 없는 간단하고 기본적인 WordPress 웹사이트를 가져와서 사용해 보았습니다.

결과는 다음과 같습니다.

image 8 The Most Efficient Method To Embed Videos On WordPress
  • 녹색 신호로 점수가 100%임을 확인할 수 있으며 모든 지표는 모바일과 데스크톱 모두에서 긍정적인 반응을 보여줍니다.

그런데 워드프레스 사이트 홈페이지에 유튜브 영상을 추가하고 다시 테스트를 해보니. 결과는 놀라웠습니다.

image 9 The Most Efficient Method To Embed Videos On WordPress
  • 단일 동영상에 대해서만 점수가 65%로 떨어졌고 다른 모든 지표도 마찬가지였습니다. 35%까지 대폭 낮아졌는데, 동영상이 추가될수록 추세는 더욱 악화될 수 있습니다.

이제 해결책이 무엇인지 생각할 수 있습니까?


이 문제를 해결하려면 무엇이 필요합니까?

여러분이 생각하고 있는 직접적인 접근 방식은 사이트에서 어떤 동영상도 사용하지 않는 것이지만 이는 올바른 접근 방식이 아닙니다. 비디오는 그 자체로 가치가 있으며 웹사이트의 사용자 경험을 향상시킵니다. 따라서 웹 사이트 속도를 높이기 위해 단순히 무시할 수는 없습니다.

1. 평판이 좋은 비디오 호스팅 플랫폼을 선택하세요

먼저, 웹 서버에 호스팅하는 것보다 YouTube, Vimeo, Wistia와 같은 무료 동영상 호스팅 플랫폼에 동영상을 호스팅하거나 업로드하면 좋을 것 같습니다. 서버 리소스를 절약할 뿐만 아니라 서버에 대한 부담을 줄여주고 서버 속도에 영향을 주지 않습니다.

이러한 비디오 호스팅 플랫폼은 비디오 전송에 최적화되어 있으며 비디오 스트리밍에 필요한 대역폭을 처리할 수 있습니다.

참고 : 무료 비디오 호스팅 플랫폼 외에도 WordPress를 사용하여 자신만의 비디오 튜브 웹사이트를 만들고 싶다면 다른 어떤 개인 비디오 호스팅 플랫폼도 거의 모든 측면에서 WPOven의 전용 비디오 호스팅 플랫폼을 능가할 수 없습니다.

2. 쿠키 없이 YouTube 동영상 삽입

표준 YouTube 삽입 외에 youtube-nocookie.com이라는 특별 버전도 있다는 사실을 알면 놀랄 수도 있습니다.

표준 버전에 YouTube 동영상을 삽입하면 쿠키, 스크립트 등과 같이 필요하지 않은 원치 않는 요소가 많이 발생합니다. 따라서 이를 보다 효율적으로 만들기 위해 YouTube는 더 가볍고 페이지 속도 점수에 큰 영향을 미치지 않는 youtube-nocookie.com 버전을 도입했습니다.

Youtube-nocookie.com에 대한 몇 가지 흥미로운 사실은 다음과 같습니다.

  • YouTube 동영상을 삽입하기 위한 대체 도메인입니다.
  • 이 도메인은 추적 목적으로 쿠키를 설정하지 않고 동영상을 삽입하는 데 사용됩니다.
  • 일반 YouTube 삽입(youtube.com)은 시청자의 브라우저에 쿠키를 설정할 수 있습니다.
  • 'youtube-nocookie.com' 도메인은 쿠키를 설정하지 않고 임베딩 플레이어를 제공합니다.
  • 이는 사용자 개인정보 보호를 우선시하고 쿠키 사용을 최소화하는 것을 목표로 하는 웹사이트에 유용합니다.
  • "youtube-nocookie.com"을 사용하면 삽입된 비디오가 사이트 방문자의 불필요한 추적에 영향을 미치지 않도록 할 수 있습니다.

"youtube.com"을 "youtube-nocookie.com"으로 바꿔서 YouTube 비디오의 URL을 수정하기만 하면 됩니다.

3. LazyLoad 플러그인 사용

지연 로딩은 단순히 웹 사이트의 특정 요소를 연기하여 웹 사이트 속도를 최적화하는 최고의 기술 중 하나입니다. 플러그인은 사용자가 스크롤하거나 보기에 나타날 때까지 이미지나 비디오와 같은 요소의 로드를 지연합니다.

이것이 일어나는 방법입니다:

  • 지연 로딩 플러그인은 초기화 시 웹페이지의 콘텐츠를 검사합니다.
  • 사용자에게 웹사이트의 보이는 부분을 지속적으로 모니터링합니다.
  • 지연 로딩으로 표시된 요소가 사용자의 뷰포트에 들어오려고 하면 플러그인이 해당 요소의 로딩을 트리거합니다.
  • 사용자가 뷰포트에 들어가면 전체 페이지를 다시 로드할 필요 없이 종종 JavaScript를 사용하여 요소가 동적으로 로드됩니다.
  • 지연 로딩 플러그인은 JavaScript를 사용하여 사용자가 웹페이지와 상호작용할 때 콘텐츠를 웹페이지에 동적으로 로드합니다.
  • 플러그인은 요소 위치나 중요도에 따라 로딩 우선순위를 지정하여 초기 로딩 시간과 대역폭 사용량을 줄이면서 원활한 사용자 경험을 보장합니다.

참고: 이 접근 방식에는 특정 제한 사항이 있습니다. 지연 로드 플러그인은 동영상이 첫 번째 접힌 부분에 있는 경우 작동하지 않지만, 동영상이 첫 번째 접힌 부분 아래에 표시되는 경우에는 가장 잘 작동합니다.


읽기: WordPress 성능 속도를 높이는 22가지 최고의 방법


4. 파사드 기법

Facade 접근 방식은 지연 로딩 기술을 구현하는 영리한 방법 중 하나입니다. 이 접근 방식에서는 처음에 비디오 대신 정적 이미지 자리 표시자를 사용합니다. 이 이미지는 일반적으로 재생 버튼 오버레이가 있는 동영상의 미리보기 이미지와 유사합니다.

사용자가 재생 버튼 오버레이를 클릭하면 팝업 창이 나타나고, 동일한 팝업 창에서 실제 동영상이 로딩되기 시작합니다.

참고와 이해를 돕기 위해 예를 들어 보겠습니다.

이 접근 방식은 매우 효과적이며 꼭 필요한 경우가 아니면 WordPress 사이트에 YouTube 동영상을 게재하는 데 부담을 주지 않습니다.

Lazy Load by WP Rocket

이 라이트박스 접근 방식이 귀하에게 적합하지 않다면 "LazyLoad Plugin"이라는 유명한 WordPress 플러그인을 활용하십시오. oEmbed와 함께 작동하며 삽입된 YouTube 및 Vimeo 비디오를 클릭 가능한 미리보기 이미지로 대체합니다.


요약

이제 위 게시물에서 언급한 내용을 요약해 보겠습니다. 의심의 여지 없이 비디오는 정보를 공유하는 가장 훌륭하고 상호작용적인 방법 중 하나입니다. 그러나 웹사이트 속도 저하로 인해 이 비용을 지불하고 싶어하는 사람은 아무도 없습니다.

하지만 다행스럽게도 우리가 이미 언급한 몇 가지 팁과 요령이 있습니다. 이를 통해 웹 사이트 속도와 성능을 저하시키지 않으면서 웹 사이트에 놀라운 효과를 줄 수 있습니다. 따라서 다음 팁을 따라 웹사이트 속도를 높여 100점에 도달하세요. 한 번 시도해 보고 경주에서 승리하세요.