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 bài viết này tôi sẽ giải thích nó theo cách dễ hiểu nhất trong khả năng của mình.
Trước tiên bạn quan sát cách video trên YouTube được tải về:
Chính xác đó là cách lazy load trên web làm việc:
- Nó chỉ tải trước các thành phần quan trọng ban đầu
- Chủ động trì hoãn các thành phần còn lại
- Chờ tải phần còn lại trong khi bạn xem
- Hoặc kích hoạt tải khi bạn xem đến phần tương ứng
Trước đây, video trên web không theo kiểu như vậy, nó sẽ tải toàn bộ video rồi mới cho bạn xem. Tưởng tượng điều đó vào hoàn cảnh hiện tại, bạn xem video HD có độ dài 25 phút, nếu mạng có nhanh trong trường hợp lý tưởng, cũng phải mất vài phút để tải về toàn bộ, mà cũng chưa chắc bạn sẽ xem hết video đâu (bạn biết mà!). Trong khi giải pháp lazy load vừa giảm dữ liệu lãng phí, vừa cho tốc độ xem video rất nhanh, thường bạn chỉ mất vài giây để bắt đầu xem. Sự khác biệt giữa 2 – 3 giây và 2 – 3 phút là 60 lần.
Mặc dù có những ý kiến chỉ trích gay gắt về việc sử dụng lazy load, như của Johnny Nguyen, cả với ảnh lẫn critical CSS, thì với tôi, vấn đề chỉ là tùy trường hợp sử dụng mà thôi. Và trong bối cảnh công nghệ thay đổi theo hướng ủng hộ các biện pháp này, đặc biệt là từ Google với native lazy-loading, AMP, rồi các plugin hỗ trợ tiện lợi như Flying Images, rất nhiều vấn đề liên quan đến trải nghiệm người dùng được khắc phục.
Nói riêng về critical CSS, mặc dù về lý thuyết bạn sẽ không cần đến nó nếu có khả năng viết theme, khi ấy bạn chủ động tạo ra các giao diện tối ưu hóa về phân phối CSS, chẳng có CSS chặn hiển thị nữa. Nhưng tôi tự hỏi có bao nhiêu phần trăm người quản trị web có khả năng tự viết theme cho chính họ (và đủ trình độ để tạo ra trang tối ưu tốc độ)?!
Tình huống thực tế diễn ra với đa số là mua giao diện ở đâu đó, rồi cài các plugin có thể lên đến 30 cái. Hệ quả là CSS lẫn JS chặn hiển thị gần như 100% xuất hiện trên các website như vậy. Khi đó nếu bạn không áp dụng các cơ chế lazy load, chắc chắn website của bạn sẽ chậm trên di động (trên máy bàn ít bị ảnh hưởng hơn rất nhiều. Bạn có thể dễ dàng đạt điểm 95 trên máy bàn, trong khi di động chỉ 45 nếu có quá nhiều mã chặn hiển thị).
Điều tuyệt vời là hầu hết các cơ chế lazy load cho web nói chung và WordPress nói riêng đều có giải pháp miễn phí chất lượng cao. Ví dụ với WP, bạn có thể sử dụng các plugin sau để làm việc này:
- Autoptimize: lazy load JS và CSS, tạo critical CSS
- Flying Images: lazy load ảnh
- WP YouTube Lyte: lazy load video
- Async JavaScript: can thiệp sâu hơn vào cơ chế lazy load cho JS, bao gồm cả jQuery, với các giải pháp như async và defer
Dù sao bạn hãy thử và kiểm tra lại thật kỹ, tôi tin bạn sẽ không thấy tiếc đâu! Giờ là lúc chào tạm biệt.
