Tăng Tốc Website Với Instant Page


Thủ Thuật136 lượt xem0 bình luận

Giới thiệu

Trang chủ: https://instant.page
Github: https://github.com/instantpage/instant.page

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.

instantclick.jpeg

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

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.


  • Tác giả: Đặng Minh Đông
  • Liên kết: https://dangminhdong.name.vn/thu-thuat/17.html
  • Bản quyền: Mọi thắc mắc về bản quyền, hãy để lại bình luận.
  • Sửa lần cuối: 10-12-2023
    Bình luận ( 0 )
    OωO
    Riêng tư