Sử dụng lazysizes để lazyload ảnh

cập nhật thẻ picture trong lazysizes

Lazy load là chiến lược trong đó người ta chỉ tải các tài nguyên mà người dùng cần, chứ không tải tất cả trước trong lượt tải đầu tiên. Cách tiếp cận này giải phóng cho các tài nguyên chưa cần thiết trong lần tải đầu tiên (initial page load) và tránh phải tải một số tài nguyên mà có thể người dùng sẽ không bao giờ sử dụng đến.

Đọc thêmSử dụng lazysizes để lazyload ảnh

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 2)

các tùy chọn cho thư viện LazySizes

Bạn đọc có thể tham khảo phần 1 về thư viện lazysizes ở đây. JS API lazysizes tự động nhận diện các phần tử mới với class lazyload, vì thế bạn không cần thực hiện lời gọi hoặc cấu hình bất cứ điều gì trong phần lớn trường hợp. JS API – các tùy chọn Các tùy chọn có thể được thiết lập bằng cách sử dụng tùy chọn cấu hình toàn cục qua khai báo bằng đối tượng có tên lazySizesConfig. Đối tượng này phải được định nghĩa trước đoạn mã của lazysizes. Dưới đây là ví dụ căn …

Đọc thêmGiới thiệu thư viện lazysizes.js để lazy load ảnh (phần 2)

Giới thiệu LQIP – Ảnh giữ chỗ chất lượng thấp

ảnh LQIP

Với lời của người dịch (1): LQIP giống cầu thủ dự bị, ảnh chất lượng cao giống như cầu thủ chính. Khi bạn sử dụng lazy load ảnh, nếu ảnh chất lượng cao chưa kịp tải, LQIP là cách xoa dịu người dùng, giống như cầu thủ dự bị là giải pháp tình thế khi cầu thủ chính bị chấn thương, tuy chơi không hay bằng nhưng còn hơn là thi đấu thiếu người. LQIP kết hợp với tải trước ảnh khi nó đi vào khung nhìn trình duyệt (viewport) là bộ đôi hoàn hảo khi bạn muốn triển khai lazy load với ít ảnh hưởng tiêu cực đến trải nghiệm người dùng. OK, giờ chúng ta đi vào phần chính nhé.

Với các trang web ngày nay, ảnh là một thách thức thực sự.

Một mặt, ảnh chiếm đến hơn 60% dung lượng trang. Điều này có nghĩa là chúng chịu trách nhiệm chính trong tổng thời gian tải trang, vấn đề đó thúc đẩy các nhóm lập trình viên cố gắng tạo ra các ảnh càng nhỏ càng tốt (tính trên byte). Mặt khác, các thiết bị mới khoe khoang khả năng hiển thị retina và độ phân giải cao, còn các nhà thiết kế thì khát khao tận dụng các màn hình này để cung cấp các ảnh đồ họa đẹp mắt và hoành tráng. Với xu hướng trên, kết hợp với nhiều cái khác nữa, dẫn đến sự gia tăng trung bình 30 KB ảnh trên trang chỉ tính riêng vào năm ngoái (năm 2012, thời điểm bài gốc tiếng Anh được viết là năm 2013).

Đọc thêmGiới thiệu LQIP -- Ảnh giữ chỗ chất lượng thấp

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 1)

giới thiệu lazysizes phần 1

Vài lời của người dịch: Nhờ bài viết về cách lazy load ảnh và video (có nội dung rất căn bản) tôi biết đến công cụ lazysizes.js (của tác giả có nickname aFarkas), nó được khen ngợi nhiều (rất hay được nhắc tên trong các tài liệu hướng dẫn tăng tốc của Google), do đó tôi quyết định đầu tư thời gian tìm hiểu. Vì bài khá dài nên được chia làm ba phần. Một lần nữa thì bài viết dạng này chỉ dành cho những ai muốn đào sâu về lazy load và có ý muốn triển khai trên các ứng dụng mà bạn sẽ viết sau này. Nếu đơn thuần chỉ dùng WordPress bạn cứ dùng plugin cho nhẹ đầu. Ngoài phần dịch nội dung chính, tôi có đưa thêm các ví dụ vào cho dễ hiểu. OK, giờ chúng ta bắt đầu nhé.

Công cụ dùng để lazy load ảnh (gồm cả ảnh đáp ứng và thông thường), iframe (cho video) có hiệu suất cao, thân thiện với SEO. Nó xác định bất kỳ thay đổi nào trong khung nhìn trình duyệt (viewport) mà được kích hoạt bởi tương tác của người dùng (user interaction), CSS hoặc JavaScript mà không cần bạn phải can thiệp cấu hình (configuration).

Link chính thức của thư viện nằm ở đây: https://github.com/aFarkas/lazysizes

Lazysizes là thư viện có tốc độ cao, tối ưu SEO và tự khởi tạo (self-initializing) cho mục đích lazy load ảnh (bao gồm cả ảnh đáp ứng picture / srcset), iframe, script/widget và nhiều thành phần khác nữa. Nó cũng ưu tiên các tài nguyên dựa trên sự khác biệt về tầm mức quan trọng, trong đó lazysizes ưu tiên các phần tử nằm trong khung nhìn và gần khung nhìn trình duyệt (near view elements) để tối ưu tốc độ tải nhận thức (perceived performance) nhanh hơn.

Đọc thêmGiới thiệu thư viện lazysizes.js để lazy load ảnh (phần 1)

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 3)

lazySizes phần 3

Bạn có thể xem phần 1 về lazySizes ở đây: https://kiencang.net/lazysizes-js-lazy-load-anh-p1/ Còn đây là phần 2: https://kiencang.net/lazysizes-js-lazy-load-anh-p2/ Trình duyệt hỗ trợ lazysizes hỗ trợ tất cả các trình duyệt mà có hỗ trợ document.getElementsByClassName (== tất cả trình duyệt ngoại trừ IE8). Trong trường hợp bạn cần hỗ trợ IE8, hãy xem tiện ích mở rộng noscript (hoặc sử dụng một mẫu điều chỉnh cho noscript hoặc mẫu LQIP). Các plugin hỗ trợ Bạn nên kết hợp (concat) tất cả plugin cùng với lazySizes. Trong trường hợp bạn không concat thì lời khuyên là hãy để các đoạn mã của …

Đọc thêmGiới thiệu thư viện lazysizes.js để lazy load ảnh (phần 3)

Lazy load là gì: Cách triển khai lazy load ảnh và video trên website

lazy load ảnh và video

Ý của anh mèo: Tôi đang thư giãn nhé, các chú đừng làm phiền!

Vài lời của người dịch: Bài viết này chủ yếu dành cho những ai muốn tìm hiểu sâu hơn về lazy load, nó đòi hỏi bạn phải có hiểu biết nhất định về HTML, JavaScript, CSS. Với những ai đơn thuần chỉ muốn áp dụng lazy load lên trang WordPress, có thể tìm hiểu các plugin sẵn có chất lượng như Flying Images, a3 Lazy Load, vân vân. Nhìn chung tôi ủng hộ tính năng lazy load, nhưng như một cách tự phản biện, tôi chủ động tìm hiểu các điểm yếu của nó, chẳng hạn ở đâyở đâycả đây nữa.

Lưu ý: Hiện bạn đã có thể sử dụng lazy load cấp độ trình duyệt (native lazy loading)! Bạn có thể tham khảo link vừa dẫn để biết cách sử dụng thuộc tính loading và tận dụng thư viện của bên thứ ba đóng vai trò như một dự phòng (fallback) cho các trình duyệt vẫn chưa hỗ trợ thuộc tính này.

Đọc thêmLazy load là gì: Cách triển khai lazy load ảnh và video trên website

Giới thiệu plugin WP YouTube Lyte để lazyload video

Lazyload video

Mô tả

WP YouTube Lyte cho phép bạn “lazy load / tải lười” các video của bạn bằng cách chèn “Mã nhúng YouTube nhỏ gọn” có khả năng phản hồi nhanh (responsive). Điều này trông giống như khi bạn nhúng YouTube theo cách thông thường, nhưng khác biệt ở đây là nó chỉ gọi các trình bật YouTube nặng nề (“fat”) khi người dùng click vào, vì thế giảm được dung lượng và thời gian kết xuất đáng kể, nhất là khi bạn có nhiều video trên cùng một trang. Plugin có thể được cấu hình để cache ảnh đại diện (thumbnails) của YouTube theo kiểu cục bộ, cải thiện cả hiệu suất và tính riêng tư. Bằng cách sử dụng Lyte để nhúng video từ YouTube, nó giúp bạn không phải gửi yêu cầu tới các máy chủ của YouTube, vì thế có thể tuân thủ GDPR tốt hơn (dù tôi không phải luật sư).

Đọc thêmGiới thiệu plugin WP YouTube Lyte để lazyload video

Hướng dẫn sử dụng plugin WP YouTube Lyte để tăng tốc độ tải trên trang có video YouTube

cách dùng WP YouTube Lyte

Tôi đã có bài viết đánh giá tổng quan về các biện pháp tăng tốc tải video nhúng trong website, bạn có thể tham khảo ở link vừa dẫn.

Trong bài viết đó có phân tích: cách tốt nhất là sử dụng CDN để tối thiểu hóa các file JavaScript và CSS mà YouTube hoặc các nền tảng video bên thứ ba khác phải tải về (ví dụ Vimeo). Tốc độ tải tăng lên nhờ chỉ cần sử dụng thẻ video mà thôi, tuy nhiên đây chỉ là cách tốt nhất khi xét thuần túy về mặt tốc độ.

Tại sao?

Lý do nằm ở chỗ CDN không phải là biện pháp rẻ tiền khi áp dụng vào video (nếu không muốn nói là đắt, nhất là khi lượt xem video nhiều- trừ khi web của bạn là trang thương mại, đủ kinh phí để đầu tư), thứ nữa, nó yêu cầu tìm hiểu kỹ lưỡng để có hiệu quả sử dụng tốt nhất.

Hệ quả là, xét phần đa người dùng, cách sử dụng plugin sẽ hợp lý hơn nhiều mặt so với dùng CDN. Plugin vừa miễn phí mà cài đặt lại dễ hơn.

Đọc thêmHướng dẫn sử dụng plugin WP YouTube Lyte để tăng tốc độ tải trên trang có video YouTube

Tại sao Lazy load ảnh không hấp dẫn như mong đợi

lazy load ảnh

Lazy load ảnh là một trong các công nghệ tăng tốc web đã được biết đến từ lâu. Nó có nhiều ưu điểm:

  • Giảm tải cho máy chủ nhờ hạn chế số lượng kết nối đồng thời
  • Giảm thời gian tải trang do không phải tải các ảnh dưới màn hình đầu tiên ngay lập tức
  • Không phức tạp về mặt kỹ thuật, chỉ cần 1KB JS để triển khai, thậm chí trình duyệt Chrome còn giúp bạn có được công nghệ này mà không cần mã JS nào vì nó được tích hợp sẵn (bắt đầu từ phiên bản 76)
  • Và vì đơn giản nên nhiều công cụ chất lượng cao hỗ trợ cho nó hoàn toàn miễn phí

Đọc thêmTại sao Lazy load ảnh không hấp dẫn như mong đợi

Các tính năng cải tiến đáng giá của Plugin Flying Images by WP Speed Matters

Flying Images by WP Speed Matters

Plugin Flying Images by WP Speed Matters mới nâng cấp lên phiên bản mới (cuối tháng 12 năm 2019) có nhiều tính năng thú vị. Bao gồm:

  • [Mới] – Dịch vụ CDN cho ảnh (miễn phí) thông qua Statically – tôi sẽ bàn kỹ về nó sau
  • [Mới] – Chuyển ảnh sang định dạng .webp giúp tối ưu hơn nữa dung lượng ảnh (với rất nhiều tiện lợi)
  • [Mới] – Vẫn nén ảnh miễn phí với các định dạng khác nếu cần
  • [Mới] – Cho phép lazy load cả ảnh background
  • [Cập nhật] – Ảnh co giãn theo màn hình (responsive / adaptive)
  • [Cập nhật] – Phương thức mặc định cho lazy load chuyển sang JavaScript (trước đây là Native + JavaScript). Tất nhiên bạn vẫn có khả năng chọn Native + JavaScript nếu muốn, và đây là lựa chọn tôi cho là tốt hơn
  • [Cập nhật] Giới hạn mặc định cách viewport để khởi động tải ảnh là 500px (trước đây là 200px)
  • [Cập nhật] Tùy chỉnh giới hạn cách viewport được nới rộng từ 0 đến 1000px (trước đây chỉ từ 0 đến 500px). Giới hạn tăng lên này sẽ giúp hạn chế bớt tình trạng ảnh bị load trễ, nhờ ảnh được load sớm hơn. Cá nhân tôi thường để tối đa, tức 1000px
  • [Cập nhật] Đổi tên plugin từ “Flying Images” thành “Flying Images by WP Speed Matters“, có lẽ để tác giả plugin tăng tính nhận diện thương hiệu riêng
  • [Cập nhật] Bổ sung thêm class “lazyloaded” vào ảnh khi lazy loaded (chỉ cho phương pháp lazy load dựa trên JS)
  • [Mới] – Tab các câu hỏi thường gặp (FAQ)
  • [Mới] – Tab hỗ trợ (Support Us)
  • [Mới] – Tab tối ưu thêm (Optimize More – giống kiểu plugin Autoptimize để tác giả plugin giới thiệu các dịch vụ tăng tốc khác và có thêm thu nhập)

Đọc thêmCác tính năng cải tiến đáng giá của Plugin Flying Images by WP Speed Matters