WordPress 사이트에서 JavaScript for YouTube 비디오 파싱을 연기하려면 어떻게 해야 합니까?

WordPress 사이트에서 JavaScript for YouTube 비디오 파싱을 연기하려면 어떻게 해야 합니까?

오늘 깨달은 것은 1.2MB 사이트(GTMetrix당) 중 550k가 YouTube 비디오라는 것입니다.

제 웹사이트는 WordPress 사이트이고, 현재 동영상은 iframe에 로딩되어 있습니다.

내 사이트를 더 빨리 로드하고 싶다...어떻게 해야 할지 모르겠어요클릭할 때까지 YouTube 비디오를 로드하지 않고, 대신 썸네일만 있으면 되는 건가요?

1. "scr"을 "data-src"로 바꿉니다.

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>

2. Javascript 추가

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

이제 사이트 로딩 속도가 이전보다 빨라집니다.

저는 이 블로그를 팔로우하고 있습니다.http://www.codecanal.com/defer-parsing-javascript-youtube-videos/

두 가지 간단한 단계로 이를 달성할 수 있습니다...

1. 플로우처럼 임베드 코드를 갱신합니다.

<iframe width="560" height="315" src="" data-src="generic_youtube_url" frameborder="0" allowfullscreen></iframe>

2. Java 스크립트 부분은 다음과 같습니다.

function init() { 
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } } window.onload = init;

레퍼런스 상세:

https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/

https://varvy.com/pagespeed/defer-videos.html

추신: 저는 개인적으로 이것을 사용하고 있고 효과가 있습니다.

Sabbir H 감사합니다.

가장 빠르고 최선의 방법은 비디오 iframe을 링크나 이미지 등으로 대체하고 클릭 시 또는 다른 이벤트로 iframe을 로드하는 것입니다.

Ahmed Essam은 솔루션을 링크했지만 워드프레스 설치에서 파일을 편집하는 방법을 모르거나 원하지 않는 경우 Embed Video Thumnail 플러그인으로 다음과 같은 작업을 수행합니다.

https://wordpress.org/plugins/embed-video-thumbnail/

언급URL : https://stackoverflow.com/questions/38864444/how-do-you-defer-parsing-of-javascript-for-youtube-video-on-a-wordpress-site