Lazy load

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

Bởi

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êm

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

Bởi

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 …

Đọc thêm

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

Bởi

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 thêm

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

Bởi

Bạn có thể xem phần 1 về lazySizes ở đây: kiencang.net/lazysizes-js-lazy-load-anh-p1/ Còn đây là phần 2: 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êm

YouTube tải nặng như thế nào?

Bởi

Trong bài viết tăng tốc video YouTube nhúng trong WordPress, chúng ta đã biết YouTube tải nặng như thế nào rồi, nhưng đó chỉ là mô tả tổng quan mà thôi. Trong bài này chúng ta sẽ đi vào chi tiết, để biết cụ thể YouTube tải về những file gì, dùng làm gì và nó nặng bao nhiêu (tính theo KB). Cách thử nghiệm là tôi tạo một trang HTML đơn giản, và trong trang đó tôi chỉ nhúng video YouTube, nhờ vậy công việc kiểm tra sẽ đơn giản hơn rất nhiều so với việc kiểm tra trên …

Đọc thêm

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

Bởi

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 …

Đọc thêm

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

Bởi

Tôi đã có bài viết (dịch) đá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 độ. …

Đọc thêm

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

Bởi

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 …

Đọc thêm

Một lý giải đơn giản về lazy load, và tại sao nó lại quan trọng đến thế trong tăng tốc Website

Bởi

Lazy loading là ý tưởng cốt lõi trong tăng tốc website, thường gắn nhiều với ảnh và video, tuy nhiên ứng dụng của nó nhiều hơn như thế. Nếu quen với các ứng dụng đánh giá tốc độ web, như Google PageSpeed Insights, bạn chắc hẳn là không lạ các khái niệm như: Chặn hiển thị của CSS và JS Màn hình đầu tiên Critical CSS Trì hoãn tải ảnh Trì hoãn tải video vân vân Về bản chất, tất cả những thứ trên đều gắn chặt với khái niệm lazy loading (tải lười, tải chậm, trì hoãn). Và trong …

Đọc thêm

Cách tăng tốc tải video YouTube và Vimeo nhúng trong WordPress

Bởi

Gần đây tôi có cơ hội làm việc với một website rất nặng video (compare.parts), các video này được host (lưu trữ) trên Vimeo, và được đặt trong màn hình đầu tiên, tại những vị trí thu hút của website (hero section). Yêu cầu của họ là chúng cần tải nhanh và bật tự động (autoplay). Bạn có thể xem video đó ở đường link website mà tôi trích dẫn ở trên (cập nhật: hiện trang trên không nhúng video làm background nữa). Với cách tối ưu hóa thích hợp, tôi đã đạt được số điểm 100/100 trên Google PageSpeed …

Đọc thêm