Hướng dẫn thêm hiệu ứng Lazyload Video tăng tốc độ tải Website

Trong biên tập nội dung website thì hình ảnh là một trong những loại nội dung tối quan trọng. Để nội dung bài viết trở nên sinh động, chúng ta thường phải sử dụng nhiều hình ảnh. Tuy nhiên việc dùng quá nhiều hình ảnh sẽ gây ảnh hưởng nặng nề tới tốc độ tải trang web. Một thống kê thực hiện bởi HTTP Archive cho biết hình ảnh chiếm khoảng 45% dung lượng mỗi trang web. Bài này sẽ hướng dẫn các bạn áp dụng kỹ thuật lazy load cho Blogger để tối ưu việc tải hình ảnh trên web.

Lazy load là gì?

Lazy load là một kỹ thuật trong lập trình web, dùng để trì hoãn việc tải tài nguyên cho đến khi cần thiết. Việc áp dụng kỹ thuật này giúp cải thiện đáng kể hiệu năng của các trang web lớn. Về cơ bản, với một trang web nhiều nội dung, các tài nguyên được chia thành nhiều phần, người dùng xem tới phần nào thì các tài nguyên đó mới được nạp thêm vào. Việc áp dụng kỹ thuật Lazy loading sẽ giúp tăng tốc độ tải trang web (vì chúng ta sẽ chỉ tải 1 phần nội dung trang).

Áp dụng lazyload cho Blogger

Việc áp dụng kỹ thuật lazy load cho blogger sẽ giúp cho blog của bạn tải nhanh hơn, đem lại trải nghiệm mượt mà có người dùng. Trước khi tiến hành chỉnh sửa giao diện, các bạn hãy sao lưu lại template để phòng trường hợp có lỗi.

Bước 1: Thêm script vào trước thẻ đóng </body>

function wikianowLazyVideo(div) {
    var video = document.createElement('video');
    video.setAttribute(
      'src',
      '[url hosting]' + div.dataset.id); //edit link hosting
    video.setAttribute('controls', ''); //properties can be changed or deleted
    div.parentNode.replaceChild(video, div);
  }
  function initVideos() {
    var playerElements = document.getElementsByClassName('video-player');
    for (var n = 0; n &amp;amp;amp;lt; 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 = playerElements[n].dataset.image;
      div.appendChild(thumbNode);
      var playButton = document.createElement('div');
      playButton.setAttribute('class', 'play');
      div.appendChild(playButton);
      div.onclick = function () {
        wikianowLazyVideo(this);
      };
      playerElements[n].appendChild(div);
    }
  }
  document.addEventListener('DOMContentLoaded', initVideos);

Bước 2: Thêm mã HTML vào vị trí muốn chèn video.

<div class="video-player" data-id="[id link]" data-image="[url image thumbnail]"></div>
Cách thêm link như sau:
  • [url hosting][id link]: ví dụ liên kết đến video có dạng https://www.example.com/video-example.mp4 thì thay [url hosting] = https://www.example.com/[id link] = video-example.mp4. Một ưu điểm của dạng này là ẩn thông tin địa chỉ máy chủ data của bạn trước sự tấn công của hacker. Nếu bạn show code dưới dạng view-source:https://... thì sẽ chỉ hiển thị phần video-example.mp4, hoàn toàn không thấy được https://www.example.com/. Tuy nhiên nếu nhấn chuột phải để kiểm tra phần tử thì có thể thấy liên kết đầy đủ.
  • Thay [url image thumbnail] thành liên kết đến hình ảnh thumbnail sẽ hiển thị trước khi tải video.

Bước 3: Thêm mã CSS sau để việc hiển thị tốt hơn.

.video-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .video-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .video-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;
  }

  .video-player img:hover {
    -webkit-filter: brightness(75%);
  }

  .video-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url(&#39;//i.imgur.com/TxzC70f.png&#39;) no-repeat;
    cursor: pointer;
  }
Lưu ý vị trí bôi đậm video là để thay đổi thành ifarme nếu bạn có nhu cầu load video Youtube. Mình sẽ không hướng dẫn trong bài viết này. Nếu bạn có nhu cầu có thể để lại comment bên dưới.{alertSuccess}

BÌNH LUẬN

Mới hơn Cũ hơn

DANH SÁCH KHÓA HỌC

Nhãn

  • khóa học dựng phim
  • khóa học lập trình
  • khóa học thiết kế
  • khóa học tiếng anh