Categories Tối ưu JavaScript

Giới thiệu instant.page: đoạn JS ngắn gọn giúp bạn tăng tốc website & bạn chỉ mất 1 phút để làm điều đó

Amazon và các website khác nhận thấy rằng: việc loại bỏ chỉ 100 mili giây độ trễ thôi cũng đã giúp cải thiện doanh số bán hàng thêm 1% rồi. Nhưng độ trễ trên web không dễ gì khắc phục.

Video giới thiệu:

Mẹo giảm độ trễ

Instant.page sử dụng tính năng tải trước ngay trong thời gian (just-in-time preloading) – nó tải trước một trang ngay trước khi người dùng nhấp vào liên kết của trang đó.


Trên máy tính để bàn

Trước khi người dùng nhấp vào một liên kết, họ sẽ di chuột (hover) qua liên kết đó. Khi người dùng di chuột trong ít nhất 65 mili giây, có 50% cơ hội là họ sẽ thực sự nhấp vào liên kết đó, do vậy, Instant.page bắt đầu tải trước ngay tại thời điểm này, cải thiện trung bình hơn 300 mili giây dành cho việc tải trước trang.

Một tùy chọn khác là tải các trang khi người dùng bắt đầu nhấn chuột (mà không cần tải trước khi hover). Điều này giúp bạn tránh hoàn toàn các yêu cầu không cần thiết (loại bỏ 50% trường hợp hover trên 65ms nhưng không click), trong khi vẫn cải thiện thời gian tải trang trung bình 80 mili giây.

Bạn cũng có thể tải trước trang khi người dùng di chuột hoặc ngay khi liên kết hiển thị hoặc kích hoạt nhấp chuột khi người dùng bắt đầu nhấn chuột, giúp trang của bạn có tốc độ nhanh nhất có thể.


Trên điện thoại di động

Khi click liên kết trên di động, người dùng bắt đầu chạm vào màn hình di động của họ trước khi thả nó ra, thời gian tiết kiệm được trung bình là 90 mili giây để tải trước trang.

Một tùy chọn khác là tải trước các liên kết ngay khi chúng hiển thị trong khung nhìn trình duyệt (viewport – lựa chọn tải ngay khi liên kết mới vào khung nhìn trình duyệt tuy cho tốc độ cải thiện lớn nhất nhưng cũng gây lãng phí lớn nhất).


Mẹo với não người dùng

Bộ não con người xem các hành động diễn ra dưới 100 ms là ngay lập tức. Kết quả là: Instant.page làm cho các trang của bạn có cảm giác tải nhanh tức thì ngay cả trên 3G (giả sử các trang của bạn hiển thị đủ nhanh).


Không làm nặng gánh máy chủ của bạn & gói dữ liệu của người dùng

Các trang chỉ được tải trước khi có khả năng cao là người dùng sẽ truy cập chúng và chỉ HTML được tải trước mà thôi, công cụ này tôn trọng băng thông và CPU của người dùng cũng như máy chủ của bạn.

Nó sử dụng trình xử lý sự kiện thụ động (passive event listeners) và requestIdleCallback để các trang của bạn luôn hoạt động trơn tru. Nó tôn trọng chế độ tiết kiệm dữ liệu (data save mode). Nó cũng rất nhẹ, chỉ có dung lượng 1 KB và tải sau mọi tài nguyên khác trên trang. Không chỉ có thế, công cụ này miễn phí và được cấp phép mã nguồn mở (giấy phép MIT).


Cách làm:

Bạn chỉ cần đặt đoạn mã dưới đây ngay trước thẻ đóng </body>:

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

Thông số kỹ thuật

Theo mặc định, Instant.page tải trước tại thời điểm 65 mili giây sau khi người dùng di chuột qua một liên kết trên máy bàn hoặc khi người dùng di động bắt đầu chạm vào màn hình của họ. Nhưng chúng tôi có các lựa chọn khác cho bạn trong trường hợp bạn muốn tùy chỉnh các đặc tính kỹ thuật trên (ý là thay đổi con số 65 thành giá trị khác theo ý muốn của bạn).


Tải trước khi nhấn chuột

Để tải trang khi người dùng bắt đầu nhấn nút chuột của họ, ngay trước khi thả ra, hãy thêm data-instant-intensity="mousedown" dưới dạng thuộc tính vào thẻ <body>.

Thời gian trung bình tiết kiệm được là 80 mili giây để tải trước trang.

Để bật tính năng này chỉ trên máy tính để bàn và không tải trước trên thiết bị di động, hãy sử dụng thuộc tính data-instant-intensity="mousedown-only".


Điều chỉnh độ trễ khi di chuột

Đối với một số trang web có số lượng nhấp chuột lớn, chẳng hạn như một số trang thương mại điện tử, quy tắc 65 mili giây có thể không phải là lựa chọn tốt: vì quy tắc này sẽ làm số lượt yêu cầu tăng gấp đôi so với số lượt truy cập thực tế sẽ diễn ra.

Để tăng độ trễ khi di chuột (qua đó giảm tỷ lệ tải không diễn ra), hãy thêm số mili giây vào thuộc tính, chẳng hạn như 100 mili giây: data-instant-intensity="100".

Ngoài ra, nếu bạn không quan tâm đến việc đưa ra nhiều yêu cầu tới máy chủ gốc (ý là máy chủ của bạn khỏe), bạn có thể giảm nó để tăng khả năng liên kết được preload lên tối đa.


Tải trước các liên kết ngay khi chúng hiển thị

Trên các thiết bị di động nhỏ (chẳng hạn như điện thoại thông minh), nếu bạn muốn các trang của mình hiển thị tức thì trong nhiều tình huống hơn, bạn có thể tải trước các liên kết ngay khi chúng hiển thị trong màn hình của người dùng.

Để làm như vậy, hãy thêm data-instant-intensity="viewport" làm thuộc tính cho <body>.

Bạn cũng có thể làm như vậy trên các dạng khác bằng cách sử dụng "viewport-all", chỉ làm điều này nếu bạn không lo lắng về việc sẽ có nhiều yêu cầu hơn tới hosting gốc của bạn.

Lưu ý rằng nếu người dùng đang sử dụng mạng 2G hoặc đã bật trình tiết kiệm dữ liệu, công cụ sẽ quay trở lại sử dụng các tùy chọn mặc định.


Kích hoạt click khi có nhấp chuột

Nếu bạn muốn kích hoạt nhấp chuột nhanh hơn, hãy thêm data-instant-mousedown-shortcut dưới dạng thuộc tính vào <body>. Lưu ý rằng điều này có thể xung đột với các tập lệnh hiện có.

(Tính năng này được tích hợp sẵn kể từ phiên bản 5.1, trong phiên bản 5.0, nó được bật theo mặc định và bạn cần sử dụng data-instant-no-mousedown-shortcut để tắt nó đi.)


Plugin WordPress

Để cài đặt instant.page trên trang WordPress của bạn:

  • Đi tới trang tổng quan của bạn > Plugin > thêm mới;
  • Tìm kiếm “Instant.page” trong thanh tìm kiếm ở trên cùng bên phải;
  • Nhấp vào “Cài đặt ngay bây giờ”;
  • Nhấp vào “Kích hoạt”;

Như vậy là xong!

Ngoài ra, bạn có thể tải xuống từ thư mục plugin WordPress.


Cách thêm thuộc tính vào thẻ <body>

Nếu bạn muốn thêm các thuộc tính vào thẻ <body> như được nêu chi tiết trong Trang không được tải trước, hãy chuyển đến bảng điều khiển của bạn > giao diện > trình chỉnh sửa theme > header.php ở bên phải. Bạn có thể thêm các thuộc tính vào <body> ở đó.


Kết luận từ Kiến càng

Instant.page là cách hay để bạn cải thiện tốc độ trang mà chỉ phải đầu tư rất ít công sức, các tùy chọn mặc định của nó cũng đủ tốt, giúp bạn tránh phải tìm hiểu sâu về kỹ thuật.

Các công cụ khác thay thế cho tính năng này bao gồm:

PS: để tăng khả năng chịu tải HTML cho hosting gốc bạn nên dùng QUIC cloud, nó là CDN có khả năng cache HTML nên bạn sẽ không phải lo lắng về khả năng chịu tải, tuy nhiên để dùng nó bạn cần dùng plugin LiteSpeed cache. Tùy chọn thứ hai là bạn dùng APO của Cloudflare.

(Biên tập từ bài giới thiệu chính thức trên trang instant.page)

Back to Top