개발
퍼사드로 유튜브 지연 로딩 처리
52 views as of December 30, 2024.
유튜브 초기 로딩 느림
우연히 내 블로그 사이트를 뒤적거리다가 유튜브로 올린 페이지에서 페이지 로딩 시간이 오래걸려 컨텐츠가 느리게 뜬다는 구글 서치콘솔의 보고서를 받게되었다.
무슨내용인가하니 유튜브 영상을 내 페이지에 넣었더니 최초에 유튜브로부터 가져오는 iframe 등의 정보량때문에 내 페이지 랜더링이 늦어진다는 의미였다.
관련내용을 알아보니 퍼사드를 사용해서 서드 파티 리소스에 지연로딩을 걸라고한다.
퍼사드
나는 라라벨 퍼사드만 알고있었는데, 웹 최적화 용어에서도 퍼사드라는 용어를 쓰고있었다.
이쪽에서 말하는 퍼사드는 삽입된 서드 파티와 유사하게 보이지만 작동하지 않으므로 페이지 로드 시 부담이 훨씬 적은 정적 요소라고 한다.
쉽게말해 플레이스 홀더의 개념이지만 서드 파티 리소스를 가져올때 이를 지연로딩 하는 기술과 더불어 원래 서드 파티 리소스가 보여주어야할 페이지의 형태를 더욱 직접적으로 띄는 그런 형태를 말하는것 같다.
구글 크롬 개발자 커뮤니티 설명쉽게 말해 사용자의 인터렉션이 있기가지는 그냥 실행 트리거를 기다리는 스크립트만 담은 요소이며, 이 요소는 용량 최적화가 되어있어서 초기 로딩에 영향을 주지않는다.
그리고 사용자의 인터렉션이 있으면 그때 서드 파티 리소스를 가져와 화면에 랜더링 해주는 것이다.
우리가 흡사 아는 비동기 작업, 지연 로딩과 매우 비슷한 기능이다.
말그대로 여러 서드 파티에 적용 가능한 통념적인 단어이고, 여기서는 유튜브 iframe 지연 로딩을 위한 내용을 주로 다뤄보고자 한다.
@justinribeiro/lite-youtube
깃헙에서 가장 많이 사용되는 유튜브 퍼사드 프로젝트이다.
GitHub - justinribeiro/lite-youtube: The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed.
The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed. - justinribeiro/lite-youtube
https://github.com/justinribeiro/lite-youtube
간단하게 스크립트 로딩하는 한줄로만으로도 충분히 작동하며 위의 퍼사드로써의 역할을 충분히 수행해내는 라이브러리이다.
적용하는 방법은, 외부 스크립트 로딩방식으로 사용하려면 아래와 같이 간단하게 쓸 수 있다.
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1/lite-youtube.min.js"></script>Copy만약에 npm 방식으로 로컬에 올려두고 사용하고 싶다면 아래와 같은 설치 명령어로 설치할 수 있다.
npm i @justinribeiro/lite-youtubeCopy일반 노드 프로젝트의 경우에 스크립트를 아래와 같이 로드하면되고,
import '@justinribeiro/lite-youtube';Copy만약에 라라벨 웹팩을 사용하고있다면
resources/js/bootstrap.js 파일을 열어 이미 선언되어있는 try 문 안에 아래와 같이 로드 시키면된다.require('@justinribeiro/lite-youtube')Copy그리고 유튜브를 넣을 곳에 아래와 같은 태그로 내용을 기입하면된다.
<lite-youtube videoid="rYa_4AnsKis"></lite-youtube>Copy실제로 위의 코드도
lite-youtube 태그로 넣어서 퍼사드로 구현한 embed 이다.흡사 유튜브 재생용 iframe 같지만 실제로는 그렇지 않다.
성능 비교
단순히 브라우저에서 로딩속도만 가지고 비교할 수는 없지만 아래와 같이 유의미한 로딩 차이가 있다.
유튜브 iframe 방식
lite-youtube 퍼사드 방식기존에 전체 랜더링 및 스크립트 처리가 끝날때까지 4초정도 걸리던 런타임이 3초정도로 줄어들었다.
실제로 cpu 연산량/버스트수준도 최대 피크 88%에서 64%로 줄어들었다.
페이지 접근속도도 유의미하게 빨라졌고 정말 나쁘지않은듯하다.
끝
#JavaScript #문제해결
0
개의 댓글
개발 카테고리의 다른 글
12/31/2024
img 태그로 background-size: cover 적용하기
기존 이미지 채우기퍼블리싱을 하다보면 지정된 박스 크기에 이미지를 정확하게 끼워 넣고 싶을때,우리는 일반적으로 아래와 같...
12/27/2024
플로라 에디터 이미지 캡션 클릭 시 스크롤 초기화 되는 문제 해결 방법
문제아오오오.. 드디어 해결했다. 무슨소리냐 하면 플로라 에디터에서 이미지에 캡션을 달아둘때 그 캡션을 클릭하면 아래 처럼...
12/24/2024
블로그 작업노트 13: 파비콘 변경, 프로파일 추가
또 블로그를 이것저것 손대보았다. 파비콘 새로 제작 및 변경이번에 손댄것은 5년채 방치해둔 파비콘의 변경작업이다. 원래 파...
