Cara Menambahkan Lazy Loading Video YouTube di Blogger
Penggunaan video YouTube didalam postingan blog akan meningkatkan SEO on page anda, namun yang menjadi masalah terbesar adalah akan mempengaruhi kecepatan halaman. Solusi untuk mengatasi hal itu adalah menggunakan lazy loading video YouTube diblogger.
Untuk menggunakannya, Ikuti langkah-langkah di bawah ini dengan hati-hati untuk Memuat Video YouTube di Blogger, dan nikmati situs web yang lebih lancar dan lebih cepat.
Apa itu Lazy Loading Video?
Lazy Loading video prinsip dasarnya adalah sama dengan lazy loading untuk gambar atau iframe, adalah pola yang biasa digunakan untuk mempercepat pemuatan halaman web dengan dengan menunda memuat video, setelah halaman web penuh dimuat. Jika Anda menggunakan Lazy loading di situs Anda, hanya gambar di atas yang akan dimuat, Saat pengguna menggulir halaman, sisa gambar akan dimuat.
Selain itu, situs web memuat dengan sangat cepat untuk lazy load dan pada saat yang sama memberikan kepuasan kepada pelanggan. Jenis skrip pemrograman ini secara langsung membantu dalam meningkatkan kecepatan pemuatan situs web dan membuat situs web tersebut lebih memungkinkan pengguna untuk tetap berada di situs web tersebut dan akibatnya tingkat konversi meningkat.
Mengapa menambahkan Lazy Load Video YouTube di Blogger?
Iframe YouTube default yang disematkan di halaman web memperlambat kecepatan pemuatan dengan memuat banyak sumber daya di ujung depan.
Iframe tersemat dari video YouTube akan memakan waktu sekitar 500-700 kb dengan kontribusi sekitar 50-60 persen dari keseluruhan ukuran halaman. Jadi, betapapun melelahkannya Anda mengoptimalkan pemuatan gambar, CSS, dan Javascript, bertindak sebagai hambatan dalam kinerja kecepatan.
video YouTube juga memblokir postingan utama saat Anda menguji situs web Anda menggunakan page speed insights.
Ini memicu banyak kesalahan lain dalam wawasan kecepatan halaman seperti:-
- Kurangi dampak kode pihak ketiga
- Beberapa sumber daya pihak ketiga dapat dimuat dengan lazyload dengan fasad
- Tidak menggunakan pemroses pasif untuk meningkatkan kinerja pengguliran
- Kurangi waktu eksekusi JavaScript
- Hapus JavaScript yang tidak digunakan
Semua kesalahan ini menurunkan kecepatan situs web, jadi menggunakan teknologi Lazy Load akan memperbaiki kesalahan dan meningkatkan kecepatan pemuatan situs web Anda.
Bagaimana Lazy Load Video YouTube bekerja?
Jika Anda menyematkan video YouTube dengan metode defaultnya, itu akan memuat sumber yang diperlukan segera setelah halaman dimuat, meskipun pengguna memutar video atau tidak. Hal Ini sangat memperlambat kecepatan situs web.
Untuk mengatasi kesalahan ini, digunakan teknologi lazy loading yang menunda waktu pemuatan video YouTube. Jadi, ketika pengguna menggulir halaman, sumber akan dimuat secara otomatis.
Ini menghemat bandwidth server dan memuat halaman web lebih cepat. Itu juga tidak akan memblokir tugas utas utama di wawasan kecepatan halaman dan memuat halaman hanya jika diperlukan.
Dengan cara ini, browser hanya akan memuat thumbnail video dan saat pengguna mengklik tombol putar, video akan dimuat dan diputar. Sekarang kita telah memahami Cara Kerja Lazy Load Video YouTube.
Mari selami bagian implementasi sehingga Anda dapat melakukan hal yang sama pada situs web Anda dan menjadikannya lebih cepat dan lancar.
Langkah Menerapkan Lazy Loading Video YouTube di Blogger
Langkah 1. Pertama, Anda harus masuk ke dasbor Blogger yaitu Blogger.com .
Langkah 2. Buka Bagian Tema dan Klik Tombol Edit HTML.
Langkah 3. Salin kode CSS dibawah ini dan pastekan diantara <head> </head>
<style>
.youtube-player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 0px;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.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;
}
.youtube-player img:hover {
-webkit-filter: brightness(75%);
-moz-filter: brightness(75%);
filter: brightness(75%);
}
.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>nLangkah 4. Temukan tag </body> dan rekatkan kode Javasceipt dibawah ini tepat di atasnya.
<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("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>
Langkah 5. Sekarang buka Tampilan HTML dari Posting Blog dan pastekan Kode HTML yang diberikan di bawah ini.
<div class="youtube-player" data-id="VIDEO_ID"></div>Ingatlah untuk mengganti " VIDEO_ID " dengan ID Video YouTube Anda.
Sekarang Anda telah berhasil menerapkan Lazy Load Video YouTube di Blogger.
Kesimpulan
Terakhir, lazyload adalah strategi hebat yang sangat mengurangi waktu pemuatan awal aplikasi web. Namun, untuk menggunakan strategi ini, sebagai perancang web, penting untuk menyadari dengan baik efek negatifnya saat mengembangkan pemrograman apa pun.
Aplikasi yang tepat dan bermanfaat akan memastikan pengalaman pengguna yang lebih baik. Penting untuk memiliki konten web yang terorganisir dengan baik untuk pengalaman menjelajah yang baik. Teknologi Lazy Loading mempercepat pemuatan situs web, sekaligus menghemat bandwidth.
Terima kasih telah membaca