Lazy Load YouTube Mempercepat Loading Website Plus SEO

Oye Digital Indonesia, Lazy Load YouTube Mempercepat Loading Website Plus SEO - Cara optimasi YouTube menggunakan teknik lazy, sangat penting dan baik untuk meningkatkan performa website. Ini sudah banyak di gunakan oleh para blogger, dan Oye akan bagikan kepada Anda plus sedikit racikan SEO agar kita sama-sama bersaing secara sehat. Dimana saat ini kecepatan Website sangat penting, terlebih lagi saat proses index di google.

Tutorial kali ini adalah mengoptimalkan video youtube, yang akan di tampilkan pada halaman website. Nah biasanya penggunaan embedded ini melalui script iframe yang telah tersedia dari YouTube sendiri. Dimana ketika kita membukanya, akan terdapat tiga url yang menyatu pada halaman, sehingga dapat mengurangi kecepatan situs web yang dilihat.

Tutorial Cara Optimasi Lazy Load Youtube

Teknik lazy load video YouTube, sama dengan lazy gambar, menggunakan beberapa script yang akan oye bagikan berikut tata cara atau tutorialnya. Script ini dapat berkerja di berbagai platform, dan juga framework, seperti blogger, wordpress, Laravel, bootsrap, CI, bahkan front-end sekalipun.

Apabila Anda tidak menggunakannya, padahal telah mengikuti tutorial lazy load, dapat bertanya di kolom komentar atau bisa memesan layanan jasa loading Website. Baiklah kita langsung saja praktek, dan apabila work, serta bermanfaat silahkan bagikan kepada rekan-rekan.

Pasang Script Pada Head Code

Silahkan Anda pasang script pertama tepat pada bagian atas kode </head>. Caranya ke tema blogger, atau ke tema website Anda, cari kode /head, kemudian Copy dan paste kode script di bawah ini:

Pasang Script Diatas Body

Selanjutnya ialah memasang script kedua, tepat diatas </body> pada template Anda, silahkan copy dan paste script nya.

<style> /* Youtube Lazy by oye.or.id */ .oye-youtube-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 0px; } .oye-youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .oye-youtube-player img { object-fit: cover; display: block; left: 0; bottom: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: 0.4s all; -moz-transition: 0.4s all; transition: 0.4s all; } .oye-youtube-player img:hover { -webkit-filter: brightness(75%); -moz-filter: brightness(75%); filter: brightness(75%); } .oye-youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("https://upload.wikimedia.org/wikipedia/commons/b/b8/YouTube_play_button_icon_%282013%E2%80%932017%29.svg") no-repeat; cursor: pointer; } </style> <script type='text/javascript'> //<![CDATA[ function labnolIframe(div) { var iframe = document.createElement("iframe"); iframe.setAttribute( "src", "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0" ); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); iframe.setAttribute( "allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ); div.parentNode.replaceChild(iframe, div); } function initYouTubeVideos() { var playerElements = document.getElementsByClassName("oye-youtube-player"); for (var n = 0; n < playerElements.length; n++) { var videoId = playerElements[n].dataset.id; var div = document.createElement("div"); div.setAttribute("data-id", videoId); var thumbNode = document.createElement("img"); thumbNode.src = "https://i.ytimg.com/vi/ID/hqdefault.jpg".replace( "ID", videoId ); div.appendChild(thumbNode); var playButton = document.createElement("div"); playButton.setAttribute("class", "play"); div.appendChild(playButton); div.onclick = function () { labnolIframe(this); }; playerElements[n].appendChild(div); } } document.addEventListener("DOMContentLoaded", initYouTubeVideos); //]]> </script> 

Embed Video YouTube

<iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/2jd95YfwIRs" width="320" youtube-src-id="2jd95YfwIRs"></iframe>

Pasang Script Di Postingan

Optimalkan Menggunakan SEO

Penutup