워드프레스 뿐만이 아니라 다른 CMS의 웹 페이지에 유튜브를 삽입하면 속도가 상당히 느려집니다.

오늘은 유뷰브 임베딩에 따르 느려지는 속도 문제를 어떻게 해결할지 방법을 찾아보고, 관련 플러그인을 소개해 봅니다.

1. 유튜브 임베딩에 따른 속도 문제

유튜브 영상을 임베딩하면 그만큼 속도 지연이 있을 수 밖에 없는데요.

더우기 한 페이지에 유튜브 영상을 여러개 임베딩하는 경우 관련 파일을 전부 로딩하는 동안(유튜브는 자바 스크립트를 사용하기 때문에 이 작업이 진행되는 동안 다른 작업은 순서를 기다리며 멈추게 됩니다.) 페이지가 먹통된것처럼 반응이 없을 수 있습니다.

잠깐 1~2초정도지만 이용자는 사이트가 느리다는 낙인을 찍고 사이트를 이탈할 가능성이 커지겠죠.

그런데 속도가 느려진다고 유튜브 임베딩을 않할수는 없죠. 보다 효율적으로 관리할 수 있는 방법은 없을까요?

2. 유튜브 영상 임베딩에 따른 속도 차이

워드프레스에 유튜브 동영상을 임베드했을 시 얼마나 다운로딩 속도가 증가하는지를 간단히 테스트 해보았습니다.

테스트는 간단하게 같은 내용의 포스팅이되 유튜브 영상을 임베딩한 페이지의 로딩 속도와 유튜브 영샹을 임베딩하지 않은 경우의 로딩 속도를 비교해 보았습니다.

유튜브 영상 임베딩하지 않았을 시

워드프레스 웹 페이지에 유튜브 영상 임베딩하지 않았을 시 문서 로딩 타임은 3.561초로 측정되었습니다.

• 렌더링 시작 : 1.4초
• 문서 로딩을 위한 요청(Request) 건수 : 72개
• 문서 로딩 용량 : 1.341KB
• 문서 로딩 시간 : 3.561초
• 전체 요청(Request) 건수: 117개
• 전체 로딩 시간(구글 광고 등 포함) : 7.289초

유튜브 영상 1개 임베딩 시

워드프레스 웹페이지에 유튜브 영상 1개를 임베딩 시 요청 건수 86건 및 문서 로딩 시간은 4.477초로 다소 증가했습니다.

• 렌더링 시작 : 1.4초
• 문서 로딩을 위한 요청(Request) 건수 : 86개(14건 증가)
• 문서 로딩 용량 : 1.929KB (588KB 증가)
• 문서 로딩 시간 : 4.477초(0.916초 증가)
• 전체 요청(Request) 건수: 131개
• 전체 로딩 시간(구글 광고 등 포함) : 8.255초

이러한 측정 결과로 판단해보면 유뷰브 1개를 임베딩시키는 경우 요청 건수가 14건이 증가하며, 로딩 용량도 588KB늘어나고 로딩 시간은 1초정도 지연되었습니다.

이러한 증가는 유튜브 영상을 여러개 임베딩하는 경우 요청수와 로딩 시간은 그에 비례해서 늘어납니다.

3. Lazy Loading 플러그인, WP YouTube Lyte 사용

유튜브 동영상을 임베딩하드라도 속도 저하를 최소화하는 방법으로 Lazy Loading 기법을 생각할 수 있습니다.

유튜브 동영상이 임베딩된 페이지 로딩 시 모든 유튜브 영상을 로딩하지말고 유튜브 영상 플레이 버튼이 눌러지면 바로 로딩을시작하도록 만드는 Lazy Loading 기법을 적용할 수 있습니다.

이런 방법으로 사이트 속도를 높여주는 플러그인중에 널리 알려진 것이 WP YouTube Lyte라는 플러그인입니다.

이 플러그인을 적용하면 Lazy Loading 기능이 작동하면서 뒷부분에 있는 유튜브 영상 로딩을 홀딩시켜 놓습니다.

그러면 사용자 입장에서는 사이트가 빠르게 로딩되고 이용할 수 있다는 인상을 받을 수 있습니다.

3.1. 플러그인 세팅

이 플러그인을 제대로 사용하려면 Google Youtube API를 등록하는 것이 좋습니다.

플러그인은 Youtube API로 접속해 유튜브 동영상 관련 정보를 가져와 이미지 등을 cache에 저장하는 등 최적화 작업을 합니다.

Youtube API 사용관련 제 경험을 공유하자면, Youtube API는 신규 프로젝트로 새로 만들어 사용하는 것이 좋을 것 같아요.

저는 처음에는 기존 구글 API를 사용했는데 자꾸 에러 메세지가 나와서 기존 것을 무시하고 새로운 project를 만들고 여기서는 오직 Youtube API 사용하도록 만들었습니다. 그랬더니 이상한 에러 메세지가 더 이상 나타나지 않더군요.

플러그 개발자도 신규로 만드는 것을 제안하고 있습니다. (9For your site to use that API, you will have to register your site as a new application,)

아래는 저의 플러그인 세팅 사항이니 참고하시기 바랍니다.

3.2. 로딩 속도 테스트

이 플러그인을 적용 후 webpagetest.org에서 테스트해보니 요청 건수는 75개로 변동이 없고 속도도 크게 느려지지 않았습니다.

3.3. 유튜브 동영상이 여러개 임베딩된 경우

앞에서도 잠깐 이야기했지만 유튜브 임베딩은 각기 작동하기 때문에 관련 이미지와 자바 스크립트를 별도로 로딩합니다.

그렇기 때문에 수많은 유튜브 동영상을 임베딩했다면 전부 따로 따로 다운로딩하면서 속도가 느려지기 마련이죠.

그러나 WP YouTube Lyte 플러그인을 적용하면 순차적으로 로딩하므로 속도 개선 효과가 크게 나타납니다.

아래 포스팅은 유튜브 동영상을 6개나 임베딩한 글인데요. 광고관련 포스팅이다보니 많은 유튜브 영상을 인용하게 된 포스팅입니다.

이글에 이렇게 유튜브 영상이 많이 임베딩되어 있기 때문에 요청 건수 125개에 3MB가까운 용량을 로딩하면서 6.7초정도 걸립니다.

WP YouTube Lyte 플러그인을 적용 시

그러나 WP YouTube Lyte 플러그인을 적용 시 요청 건수 120개로 줄고 로딩 용량도 1.6MB로 줄어들어 로딩 시간도 5.44초로 줄어드네요.

4. 유튜브 관련 읽어볼 만한 글