Bạn có muốn tải video YouTube một cách lười biếng trong Blogger không? Hãy làm theo các bước dưới đây một cách cẩn thận để Lazy Load YouTube Videos trong Blogger, đồng thời tận hưởng một trang web mượt mà và nhanh hơn.
Lazy Load là gì?
Lazy Loading là một mẫu thường được sử dụng để làm cho trang web tải nhanh hơn bằng cách tải hình ảnh và video sau khi trang web đầy đủ được tải. Nếu bạn sử dụng Lazy loading trên trang web của mình, chỉ những hình ảnh ở trên mới được tải. Khi người dùng cuộn trang, những hình ảnh còn lại sẽ được tải.
Từ góc độ kỹ thuật, Lazy loading hoạt động tốt hơn đối với JavaScript kiểm tra chế độ xem hiện tại của khách truy cập của bạn và chỉ tải những hình ảnh hiển thị cho họ.
Tải chậm chỉ có tác dụng khi nhiều khách truy cập tiếp cận hình ảnh của bạn hoặc họ cuộn xuống trang. Nếu họ không truy cập hình ảnh, chúng không cần phải được tải.
Tải chậm là một tập lệnh được nhập vào mã của trang, do đó các tệp hình ảnh và video không được tải ngay khi người dùng mở trang, nhưng chúng bắt đầu mở khi người dùng đang ở trong phần đó của trang web. nơi đặt ảnh hoặc video.
Ngoài ra, trang web tải rất nhanh khi tải chậm và đồng thời mang lại sự hài lòng cho khách hàng. Loại tập lệnh lập trình này trực tiếp hữu ích trong việc cải thiện tốc độ tải trang web và làm cho trang web có nhiều khả năng người dùng ở lại trang web đó hơn và kết quả là tỷ lệ chuyển đổi tăng lên.
Điều này giúp tiết kiệm băng thông cho người dùng vì họ không phải tải xuống tất cả các hình ảnh của bạn; Ngoài ra, người dùng có thể duyệt trang web của bạn nhanh hơn nhiều.
Lazy load là một cách tuyệt vời để tối ưu hóa cả hiệu suất cảm nhận và thực tế.
Tại sao lại thêm Video YouTube Lazy Load trong Blogger?
Khung nội tuyến YouTube mặc định mà chúng tôi có xu hướng nhúng vào trang web của mình làm chậm tốc độ tải do tải nhiều tài nguyên trong giao diện người dùng.
Một iframe được nhúng của video YouTube sẽ chiếm khoảng 500-700 kb, đóng góp khoảng 50-60 phần trăm kích thước toàn bộ trang. Vì vậy, dù bạn có mệt mỏi khi tối ưu hóa việc tải ảnh, CSS và Javascript, nó sẽ đóng vai trò như một nút thắt cổ chai trong hiệu suất tốc độ.
Nó cũng chặn luồng chính khi bạn kiểm tra trang web của mình bằng cách sử dụng thông tin chi tiết về tốc độ trang .
Nó gây ra nhiều lỗi khác trong thông tin chi tiết về tốc độ trang như: -
- Giảm tác động của mã bên thứ ba
- Một số tài nguyên của bên thứ ba có thể được tải chậm với một mặt tiền
- Không sử dụng trình nghe thụ động để cải thiện hiệu suất cuộn
- Giảm thời gian thực thi JavaScript
- Xóa JavaScript không sử dụng
Tất cả những lỗi này làm giảm tốc độ của trang web và vì vậy chúng tôi sử dụng công nghệ Lazy Load để sửa lỗi và nâng cao tốc độ tải trang web của bạn.
Cách thức hoạt động của Lazy Load of YouTube Videos?
Nếu bạn nhúng video YouTube bằng phương pháp mặc định, nó sẽ tải các tài nguyên cần thiết ngay khi tải trang, ngay cả khi người dùng có phát video hay không. Điều này làm chậm tốc độ trang web rất nhiều.
Để giải quyết lỗi này, công nghệ tải chậm được sử dụng để làm chậm thời gian tải của video YouTube. Vì vậy, khi người dùng cuộn trang, các tài nguyên sẽ được tải tự động.
Điều này giúp tiết kiệm băng thông máy chủ và tải trang web nhanh hơn. Nó cũng sẽ không chặn tác vụ chủ đề chính trong thông tin chi tiết về tốc độ trang và chỉ tải trang nếu cần.
Bằng cách này, trình duyệt sẽ chỉ tải hình thu nhỏ của video và khi người dùng nhấp vào nút phát, video sẽ được tải và phát. Bây giờ chúng ta đã hiểu Cách hoạt động của Lazy Load Video YouTube.
Hãy đi sâu vào phần triển khai để bạn có thể thực hiện tương tự với trang web của mình và làm cho trang web nhanh hơn và mượt mà hơn.
Làm cách nào để tải video YouTube một cách lười biếng trong Blogger?
Bước 1. Đầu tiên, bạn cần đi tới bảng điều khiển Blogger, tức là Blogger.com .
Bước 2. Đi tới Phần Chủ đề và Nhấp vào Chỉnh sửa Nút HTML.
Bước 3. Sao chép mã CSS & JS bên dưới.
<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>
<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>
Bước 4. Tìm thẻ </body> và dán mã JS & CSS lên trên thẻ đó.
<div class="youtube-player" data-id="VIDEO_ID"></div>Hãy nhớ thay thế " VIDEO_ID " bằng ID video YouTube của bạn.
Bước 5. Bây giờ hãy mở Chế độ xem HTML của Bài đăng trên Blog và dán Mã HTML được cung cấp bên dưới.
Bây giờ bạn đã triển khai thành công Lazy Load YouTube Videos trong Blogger.
Lời kết
Cuối cùng, lazy load là một chiến lược tuyệt vời giúp giảm đáng kể thời gian tải ban đầu của các ứng dụng web. Tuy nhiên, để sử dụng chiến lược này, với tư cách là một nhà thiết kế web, điều quan trọng là phải nhận thức đúng về những tác động tiêu cực của nó trong khi phát triển bất kỳ chương trình nào.
Một ứng dụng phù hợp và có thể sử dụng được sẽ đảm bảo trải nghiệm người dùng tốt hơn. Điều quan trọng là phải có nội dung web được tổ chức tốt để có trải nghiệm duyệt web tốt. Công nghệ Lazy Loading giúp tăng tốc độ tải trang web, đồng thời tiết kiệm băng thông.
Cảm ơn bạn đã đọc !