Smart Loader cho chương dạng ảnh: Tối ưu trải nghiệm đọc, giữ vững điểm hiệu suất

Vấn đề của lazyload mặc định

Trên các chương truyện dạng ảnh – đặc biệt là thể loại webtoon với chiều cao lớn – lazyload mặc định thường khiến người đọc gặp tình trạng giật, delay khi cuộn đến ảnh tiếp theo. Điều này làm giảm trải nghiệm đọc, đặc biệt trên các thiết bị di động có kết nối yếu.

Smart Loader cải thiện ra sao?

Smart Loader sử dụng chiến lược preload ảnh trước khi người dùng cuộn tới. Hệ thống quan sát cuộn trang và tự động tải trước ảnh kế tiếp, thậm chí tải trước hàng loạt nếu phát hiện người dùng đang cuộn nhanh. Điều này giúp hiển thị ảnh tức thì, loại bỏ độ trễ thường thấy ở lazyload truyền thống.

Không ảnh hưởng PageSpeed

Smart Loader vẫn giữ nguyên khả năng tối ưu hóa hiệu suất: không gây layout shift (CLS), không ảnh hưởng các chỉ số Core Web Vitals. Các ảnh đều có sẵn thuộc tính width và height, placeholder SVG đảm bảo không nhảy nội dung khi ảnh được tải.

Tự động thích ứng với chương được mã hóa

Nếu bạn bật chế độ mã hóa nội dung chương (dạng AES), Smart Loader sẽ đợi quá trình giải mã hoàn tất trước khi khởi tạo. Điều này đảm bảo rằng mọi hình ảnh đều được xử lý chính xác, bất kể nội dung ban đầu được ẩn hay không.

Chỉ áp dụng cho chương dạng ảnh

Smart Loader được xây dựng như một module độc lập, có tên smart-loader.js, và chỉ được nạp khi chương truyện có kiểu type = comic. Điều này giúp hệ thống giữ được gọn nhẹ, không ảnh hưởng đến chương tiểu thuyết (text-based).

Cấu trúc enqueue thông minh

if ($type === 'comic') {
    wp_enqueue_script(
        'init-smart-loader',
        "$theme_uri/assets/js/smart-loader.js",
        [],
        wp_get_theme()->get('Version'),
        true
    );
}

Hiệu ứng tải ảnh mượt mà

Hệ thống sử dụng trạng thái data-loading và data-loaded để điều khiển hiệu ứng hiển thị ảnh qua CSS. Điều này tạo cảm giác liền mạch khi cuộn mà không cần can thiệp thêm bằng JavaScript.

Tăng trải nghiệm người dùng, giữ chân độc giả

Bằng cách cải thiện tốc độ hiển thị ảnh, loại bỏ độ trễ khi cuộn, Smart Loader giúp người đọc có cảm giác mượt mà như đang sử dụng ứng dụng native. Kết quả là tăng khả năng giữ chân người dùng trên trang, đặc biệt với những chương có nhiều ảnh hoặc độ dài lớn.

Tóm tắt lợi ích

• Hiển thị ảnh mượt, không delay khi cuộn
• Preload ảnh kế tiếp trước khi người dùng tới
• Không ảnh hưởng PageSpeed hoặc CLS
• Chỉ hoạt động khi cần thiết (type = comic)
• Thân thiện với nội dung được mã hóa
• Dễ bảo trì, dễ mở rộng trong tương lai

Có gì mới trong 1.2.1

• Thêm lazyload thông minh cho chương dạng ảnh – preload sớm, mượt hơn khi đọc, không ảnh hưởng PageSpeed.
• Tách riêng smart-loader.js và chỉ tải khi type = comic, không ảnh hưởng tiểu thuyết.

Sẵn sàng nâng cấp

Nếu bạn đang sử dụng Init Manga và có nội dung chương dưới dạng ảnh, bản cập nhật 1.2.1 sẽ tạo ra sự khác biệt rõ rệt về trải nghiệm. Chỉ cần bật chế độ đọc dạng ảnh, mọi thứ sẽ tự động được tối ưu. Không cần cấu hình thêm.