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)

Ảnh JPEG progressive là gì? Nó giúp gì trong việc cải thiện trải nghiệm người dùng?

ảnh progressive là gì

Định dạng ảnh JPEG là một trong các định dạng ảnh phổ biến nhất trên thế giới web (các định dạng còn lại gồm PNG, GIF, SVG). Định dạng JPEG thường được sử dụng cho các ảnh phức tạp, nhiều màu sắc, thí dụ như ảnh chụp thiên nhiên, con người. Đặc tả của JPEG bao gồm một loạt các phần mở rộng hợp lệ, tuy nhiên phổ biến nhất vẫn là .jpg.jpeg

Không thành vấn đề đuôi mở rộng là gì, tất cả các ảnh JPEG sẽ được đối xử ít nhiều giống nhau, mặc dù không phải tất cả các ảnh JPEG đều được tạo ra như nhau. Trong đặc tả định dạng ảnh tồn tại một cài đặt ít được biết đến. Cài đặt này được gọi là Progressive Mode (chế độ lũy tiến), có thể đem đến khả năng cải thiện mạnh trải nghiệm sử dụng ảnh JPEG trên website.

Đọc thêmẢnh JPEG progressive là gì? Nó giúp gì trong việc cải thiện trải nghiệm người dùng?

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

Tối ưu kích thước ảnh để tăng tốc website

kích cỡ ảnh tối ưu

Khu vực cơ hội của Lighthouse báo cáo danh sách tất cả các ảnh trên trang của bạn không có kích thước ảnh tối ưu, cùng với tiềm năng tiết kiệm tính theo kilobyte (KB). Thay đổi kích cỡ các ảnh này giúp bạn tiết kiệm dữ liệu và cải thiện thời gian tải trang. Cách Lighthouse tìm ra và đánh giá các ảnh quá cỡ Với từng ảnh trên trang, Lighthouse so sánh kích cỡ của ảnh đã được kết xuất (render) so với kích cỡ ảnh thực tế. Kích cỡ đã được kết xuất cũng được tính toán …

Đọc thêmTối ưu kích thước ảnh để tăng tốc website

Sử dụng CDN để tối ưu hóa ảnh

ảnh cá đẹp

Nước xa không cứu được lửa gần, nên đôi khi phải bán anh em xa là vì vậy đấy ạ.

Tại sao bạn nên sử dụng CDN cho ảnh?

Mạng phân tán nội dung ảnh là giải pháp tuyệt vời để tối ưu hóa phân phối ảnh. Chuyển sang sử dụng CDN ảnh có thể đem đến khả năng tiết kiệm từ 40-80% về khía cạnh kích cỡ file ảnh. Trên lý thuyết, điều đó có thể đạt được chỉ cần nhờ vào việc xây dựng mã khéo léo, nhưng nó hiếm khi xảy ra trong thực tế.

Đọc thêmSử dụng CDN để tối ưu hóa ảnh