SPA-LIKE cho wordpress
Quá trình SPA-LIKE của shopcon.vn được thiết kế để tối ưu hóa tốc độ tải trang và trải nghiệm người dùng bằng cách sử dụng cache HTML, tải trước nội dung, và hiển thị tức thời. Mình đã xây dựng hệ thống xử lý preload nội dung thông minh và chuyển trang mượt mà. Dưới đây là các bước chính:
- Tạo cache HTML (Swift Performance):
- Plugin Swift Performance 2 tạo tệp HTML tĩnh cho các trang (desktop/mobile) và lưu tại /wp-content/cache/swift-performance/shopcon.vn.
- Ví dụ: desktop/unauthenticated/index.html.
- Đồng bộ cache lên Redis (Cron job ):
- Đồng bộ cache HTML từ ổ đĩa lên Redis.
- Node tải URL từ json hoặc sitemap ( sitemap_index.xml), làm sạch HTML và lưu vào Redis với TTL 24 giờ.
- Xử lý hàng đợi (Cron job mỗi phút):
- Kiểm tra hàng đợi, đẩy URL vào Redis queue (prerender_queue), và gọi Node để prerender.
- Cập nhật tiến độ vào prerender manager.
- Tải trước nội dung khi hover (Prerender):
- Khi người dùng hover vào liên kết:
- Kiểm tra thiết bị và loại bỏ URL không hợp lệ (như /gio-hang/…).
- Gửi yêu cầu tới /api/prerender?url=<URL> để lấy HTML từ Redis.
- Làm sạch HTML, và lưu vào cache cục bộ (JavaScript Map).
- Tải trước CSS và hình ảnh bằng <link rel=”preload”>.
- Khi người dùng hover vào liên kết:
- Hiển thị nội dung khi click (Prerender):
- Khi click, nội dung từ cache cục bộ được hiển thị ngay:
- Thay thế <body> và .site-content#content.
- Cập nhật history.pushState để thay đổi URL.
- Tải CSS/JS cần thiết.
- Nếu không có cache, tải lại trang thông thường.
- Khi click, nội dung từ cache cục bộ được hiển thị ngay:
- Quản lý cache (Prerender Manager):
- Plugin Prerender Manager cập nhật URL từ sitemap, thêm URL vào hàng đợi, xóa cache Redis, và theo dõi trạng thái/log.
- Phục vụ HTML từ Redis nếu có, hoặc chuyển tiếp yêu cầu tới WordPress.
