Vài lời: bài viết này ra đời cách đây khá lâu, tôi mới cập nhật lại một chút. Ở thời điểm hiện tại nhìn chung lazy load ảnh triển khai được trên hầu hết kiểu website vì nó ngày càng ít rủi ro (công nghệ thay đổi chóng mặt thật!). Nội dung bên dưới vẫn có giá trị ở khía cạnh là nó sẽ cho bạn biết kiểu trang nào sẽ nhận được lợi ích lớn nhất và bạn cần thêm hỗ trợ gì để lazy load ảnh mượt mà hơn. Lazy load ảnh là một trong các công nghệ …
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, hoặc sẵn có trong plugin cache, 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ó, …
Trong bài viết này tôi hướng đến mục tiêu tối đa hóa tốc độ tải ảnh tốt nhất có thể được. Đây là việc không thể không làm khi muốn tăng tốc website. Các trang sử dụng WordPress sẽ được hưởng lợi nhiều nhất, tuy nhiên các trang web sử dụng CMS khác cũng có thể thấy có ích vì bộ khung lý thuyết vẫn giống hệt nhau, chỉ công cụ là khác. A. Tại sao tối ưu tốc độ tải ảnh lại quan trọng? Ảnh chiếm phần lớn dung lượng của trang web, với mức độ dao động tùy …
Plugin lazy load ảnh có rất nhiều phương án để bạn chọn lựa, tất cả đều miễn phí, vì đây là tính năng không khó triển khai, mà cũng không làm người phát triển tốn tài nguyên duy trì. Ngoài ra bạn có thể dùng tính năng này trên hầu hết plugin cache, tối ưu tốc độ khác (có thể có phí). Hiện có nhiều hình thức lazy load ảnh: Đợi ảnh vào khung nhìn trình duyệt (viewport) rồi mới tải: ưu điểm là tiết kiệm tài nguyên tối đa, vì chỉ ảnh thực sự được nhìn mới được tải …
Vài lưu ý trước: Bài viết này chủ yếu là phần lý thuyết về việc loại bỏ CSS chặn hiển thị. Nó có ích nhất cho những ai làm lập trình web, viết giao diện tối ưu cho tốc độ hơn. Nếu bạn đơn thuần đang sử dụng các CMS sẵn có như WordPress, bài viết này không cung cấp các plugin cụ thể để bạn tối ưu, nhưng nó cũng có ích để bạn hiểu được cơ chế căn bản. Nếu thuộc dạng người dùng này, các mẹo để giảm các CSS chặn hiển thị bao gồm (nhưng không …
Video giới thiệu về mục đích & một số phương thức lazy load ảnh (PS: video không nói nhiều về plugin, nội dung văn bản bên dưới sẽ nói rõ về điều đó): Với các website nhiều ảnh, lazy load ảnh là một trong các chiến thuật tăng tốc WordPress tốt nhất, bên cạnh việc tạo cache và loại bỏ tài nguyên chặn hiển thị. Điều tốt với lazy load ảnh là bạn có nhiều plugin chất lượng và hoàn toàn miễn phí. Các cài đặt phần nhiều cũng không phức tạp. Nói sơ qua về lazy load ảnh (sơ …
Thường thì tôi sẽ dùng luôn tính năng lazy load ảnh, iframe (video, hộp like facebook,…) của plugin cache như LiteSpeed cache, WP-Rocket, Swift Performance. Tuy nhiên vì một lý do nào đó mà việc sử dụng tính năng sẵn có này không làm bạn hài lòng hoặc plugin cache của bạn không có (ví dụ Cache Enabler) thì việc cân nhắc sử dụng plugin chuyên cho lazy load ảnh là lựa chọn rất dễ tìm & còn miễn phí nữa. Hôm nay chúng ta sẽ tìm hiểu về a3 Lazy Load– một trong các plugin chuyên tốt nhất về …
Trái với suy nghĩ ban đầu của tôi, trong quá trình làm việc với khách hàng, tôi nhận thấy hầu hết các website bán hàng với nhiều hình minh họa sản phẩm ngay màn hình đầu tiên (dạng cụm hình slide, với một hình lớn đại diện và các hình nhỏ chụp các góc độ khác) vẫn rất thích dùng kỹ thuật lazy load ảnh? Ví dụ về cụm hình slide trông giống như thế này: Vậy điều đó có nên hay không? Câu trả lời thực sự khó, vì có nhiều vấn đề liên quan chi phối chuyện này. …
Ảnh là thành phần chiếm dung lượng lớn trên website nên có nhiều biện pháp chủ động can thiệp vào nó để giảm ảnh hưởng đến tốc độ tải trang. Một số biện pháp đó bao gồm: Nén ảnh: gồm nén ảnh mất chất lượng và không mất chất lượng để giảm dung lượng ảnh. Có rất nhiều plugin WordPress có thể làm được công việc này Sử dụng định dạng ảnh mới WebP: cho ảnh có chất lượng tương đương nhưng dung lượng giảm tốt hơn so với nén thông thường. Bản thân WebP cũng là một dạng ảnh …
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ác ảnh ở dưới màn hình đầu tiên (offscreen*) trong lần tải đầu tiên là ứng cử viên lý tưởng để áp dụng kỹ thuật này. Thư viện có chất …