페이지 속도를 개선하기 위해 Youtube iframe 방지

10857 단어 pagespeedyoutubejavascripthtml
간단한 자바스크립트로 Core Web Vitals 페이지 속도를 개선하세요! HTML 변경이 필요하지 않습니다.

Google에서 웹 사이트 속도를 측정하기 위해 Core Web Vitals를 도입한 후 좋은 점수를 얻으려면 몇 가지 사항을 변경해야 합니다.

큰 문제는 YouTube iframe입니다! 페이지를 로드하자마자 그들은 외부 요청을 할 것입니다. 한편으로는 플레이어 설정에 따라 일부 kb/mb를 로드하지만 다른 한편으로는 GDPR/DSGVO로 인해 방지해야 할 수 있는 외부 요청입니다!

문제



따라서 다음과 같은 간단한 페이지가 있습니다.

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <script src="main.js"></script>
</head>

<body>
    <main>
        <iframe id="ytplayer" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/RNuUgbUzM8U?autoplay=1&origin=http://example.com" frameborder="0" />
    </main>
</body>

</html>


DevTools 네트워크 탭에서 다음과 같이 표시됩니다.
요청 32개/2.92MB(3.47MB)

외부 요청이 많고 이미 비디오를 미리 로드하고 있습니다.

그것을 고치는 방법



HTML 코드를 변경하지 않고 이 간단한 JavaScript 파일을 사용하여 자동 로드를 방지할 수 있습니다.

function updateElements(elements) {
    // loop through all elements
    for (var i = 0; i < elements.length; i++) {
        const currentNode = elements[i].addedNodes;

        for (var j = 0; j < currentNode.length; j++) {
            if (currentNode[j].nodeName.toLowerCase() == "iframe") {
                const myLink = currentNode[j].src;

                // create local HTML code with Youtube link - replace ___data___ with data - dev.to's markdown parser won't let me use it :)
                const localHtml = '<html><body style="background:rgb(200,200,200)"><a href="' + myLink + '" style="font-size:14px;text-align:center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"><img src="___data___:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMuOTJtbSIgaGVpZ2h0PSIyMy42Mm1tIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMy45MiAyMy42MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04OC4wNCAtMTM2LjcpIj4KICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKC4yNjQ2KSIgZD0ibTM0MS43IDUxNi42Yy00Ljk0NiAwLTguOTI4IDMuOTgxLTguOTI4IDguOTI4djcxLjQzYzAgNC45NDYgMy45ODEgOC45MjggOC45MjggOC45MjhoMTEwLjRjNC45NDYgMCA4LjkyOC0zLjk4MSA4LjkyOC04LjkyOHYtNzEuNDNjMC00Ljk0Ni0zLjk4MS04LjkyOC04LjkyOC04LjkyOHptNDcuMzIgMjkuNTYgMjYuNTIgMTUuMDktMjYuNTIgMTUuMDl6IiBmaWxsPSIjZjAwIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjMuMDM0cHgiIHN0eWxlPSJwYWludC1vcmRlcjpzdHJva2UgZmlsbCBtYXJrZXJzIi8+CiA8L2c+Cjwvc3ZnPgo=" width="80" height="55"/><br/>play video</a></body></html>';

                currentNode[j].setAttribute("data-src", myLink);

                // set local HTML
                // replace ___data___ with data - dev.to's markdown parser won't let me use it :)
                currentNode[j].src = "___data___:text/html;charset=utf-8," + localHtml;
            }
        }
    }
    // remove listeners at the end
    removeEventListener(document, updateElements);
}

function removeEvents(obj, callback) {
    if (window.__obs) {
        window.__obs.disconnect();
    }
}

function registerEvents(obj, callback) {
    const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    if (MutationObserver) {
        const obs = new MutationObserver(function(mutations, observer) {
            callback(mutations)
        });
        obs.observe(obj, {
            childList: true,
            subtree: true
        });
        window.__obs = obs;
    }
}

// register events
registerEvents(document, updateElements);


Attention: please replace all ___data___ with data. The markdown parser will throw an error when I just use data



이것은 MutationObserver를 등록하고 DOM에 추가될 때 iframe 소스를 제거합니다.

이렇게 하면 원본 iframe 소스 로드가 중지되고 대신 로컬 HTML 파일이 표시됩니다.
외부 요청이 없습니다!

링크를 클릭하자마자 원본 소스로 이동하고 사용자 상호 작용이므로 비디오를 재생합니다.


개량



물론 localHtml 페이지를 보기 좋게 변경하거나 이미지를 표시하는 등의 작업을 할 수 있습니다. 개념 증명을 위해 간단하게 유지하기로 결정했습니다 😉
게이지
【DP】 ZOJ 2561 Order-Preserving Codes

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage