Giới thiệu
Trang chủ: https://instant.page
Github: https://github.com/instantpage/instant.page
[tip type="blue"]Làm cho trang web của bạn trở nên tức thì trong 1 phút và cải thiện đáng kể tỷ lệ chuyển trang của website.[/tip]
Cách sử dụng
Dán JS này trực tiếp vào website của bạn
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>JS này được lưu trữ trên Cloudflare worker, vì vậy tốc độ sẽ ổn hơn cho website.
Nguyên tắc
Khi người dùng di chuột qua liên kết, <head> nó sẽ tự động tạo một liên kết <link rel="prefetch" href="url"> để tải trước và lưu vào bộ nhớ đệm, và khi người dùng nhấp vào liên kết, nội dung được lưu trong bộ nhớ cache sẽ được load ngay lập tức.
Cấu hình
Cấu hình mặc định là tải trước sau khi người dùng di chuột qua liên kết trong 65mili/giây. Có thể thay đổi bằng cách sửa thẻ <body> thêm <body data-instant-intensity="mousedown".
<body data-instant-intensity="mousedown">
...
</body>Sửa đổi độ trễ tải trước mặc định
Sử dụng data-instant-intensity="tốc độ (đơn vị ms)", ví dụ:
<body data-instant-intensity="150">
...
</body>Điều chỉnh thời gian trễ thành 150ms.
Các liên kết được tải trước ngay khi click vào
Điều này sẽ chỉ hoạt động trên thiết bị di động và nó thường không được khuyến khích vì mức tiêu thụ lưu lượng quá lớn và gây lãng phí.
<body data-instant-intensity="viewport">
...
</body>Nếu bạn cần sử dụng nó trên tất cả các thiết bị thay vì chỉ thiết bị di động thì sửa thành data-instant-intensity="viewport-all", cần lưu ý rằng nếu người dùng đang sử dụng mạng 2G hoặc đã bật tính năng bảo vệ dữ liệu, nó sẽ không hoạt động.
Vấn đề phân trang
Nếu phân trang không hoạt động tốt, tải trước theo mặc định thì hãy sửa đổi các liên kết như sau:
<a href="articles?page=2" data-instant>Trang 2</a>Lời cuối
[tip type="green"]Nếu bạn cần trải nghiệm nhanh hơn và tốt hơn, mình khuyên bạn nên sử dụng pjax hoặc một vài cách khác. InstantPage chủ yếu là nhẹ và tiện lợi, đồng thời có khả năng tương thích tốt. Không giống như pjax, đòi hỏi nhiều điều chỉnh cấu hình và tương thích với các JS khác trên cùng một trang.[/tip]
Bình luận (0)