Cách preload dữ liệu bằng AJAX thông minh để tăng tốc trang

Việc tải sẵn (preload) dữ liệu qua AJAX có thể giúp trang web của bạn phản hồi nhanh hơn, cải thiện trải nghiệm người dùng và giảm áp lực lên server trong giờ cao điểm. Bài viết này sẽ hướng dẫn bạn tạo hệ thống preload thông minh, chỉ kích hoạt khi thật sự cần thiết.

Cách preload dữ liệu bằng AJAX thông minh để tăng tốc trang

Ý tưởng chính

Tải sẵn một phần dữ liệu ở hậu trường ngay sau khi người dùng truy cập trang, rồi lưu vào bộ nhớ tạm (memory, DOM, localStorage…). Khi người dùng nhấn nút hoặc cuộn đến phần đó, dữ liệu sẽ được hiển thị ngay mà không cần chờ tải.

1. Chuẩn bị endpoint để trả về dữ liệu AJAX

// functions.php
add_action('wp_ajax_nopriv_load_more_posts', 'ajax_load_more_posts');
add_action('wp_ajax_load_more_posts', 'ajax_load_more_posts');

function ajax_load_more_posts() {
    $query = new WP_Query([
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => 1
    ]);

    $result = [];

    while ($query->have_posts()) {
        $query->the_post();
        $result[] = [
            'title' => get_the_title(),
            'link'  => get_permalink()
        ];
    }

    wp_send_json_success($result);
}

2. Viết JavaScript để preload và lưu tạm

// preload.js
document.addEventListener("DOMContentLoaded", function () {
    // Bắt đầu preload 3 giây sau khi trang load
    setTimeout(() => {
        fetch("/wp-admin/admin-ajax.php?action=load_more_posts")
            .then((res) => res.json())
            .then((data) => {
                if (data.success) {
                    window._preloadedPosts = data.data;
                }
            });
    }, 3000);
});

Lưu ý: Không preload ngay lập tức, nên có delay vài giây để tránh ảnh hưởng hiệu suất load ban đầu.

3. Khi cần hiển thị, lấy từ bộ nhớ tạm

// show-posts.js
document.querySelector("#show-posts").addEventListener("click", function () {
    const list = document.querySelector("#post-list");

    if (window._preloadedPosts) {
        window._preloadedPosts.forEach(post => {
            const li = document.createElement("li");
            li.innerHTML = '<a href="' + post.link + '">' + post.title + '</a>';
            list.appendChild(li);
        });
    } else {
        list.innerHTML = "<li>Dữ liệu đang được tải...</li>";
    }
});

4. HTML mẫu để hiển thị

<button id="show-posts">Xem thêm bài viết</button>
<ul id="post-list"></ul>

Ưu điểm của preload thông minh

  • Giảm độ trễ cảm nhận khi người dùng cần dữ liệu.
  • Tăng tốc các tương tác tiếp theo.
  • Không gây tải nặng lúc đầu vì có thể trì hoãn preload.
  • Có thể kết hợp với IntersectionObserver để preload khi sắp cuộn đến phần cần.

Gợi ý nâng cao

  • Dùng localStorage nếu muốn giữ lại preload giữa các lần chuyển trang.
  • Kết hợp preload với lazy-loading hình ảnh hoặc block content (ví dụ comment).
  • Tích hợp preload vào plugin hoặc theme để tái sử dụng dễ dàng.

Kết luận

Preload thông minh bằng AJAX là cách tuyệt vời để làm cho trang web của bạn phản hồi mượt mà hơn mà không tốn quá nhiều tài nguyên. Bạn có thể dùng phương pháp này để tải bài viết, bình luận, sản phẩm, gợi ý tìm kiếm… miễn sao có chiến lược preload rõ ràng và hợp lý.

Bình Luận


  • Không có bình luận.