Trì hoãn tải mã với plugin Flying Scripts: rất tốt, nhưng cần kiểm tra cẩn thận

Trong chuỗi các plugin của Gijo mà tôi đã thử, ngoài Flying Scrips còn có Flying PagesFlying Images. Tôi bất ngờ nhất với Flying Scripts. Vì nó đem đến khả năng cải thiện tốc độ tải trang hết sức ấn tượng, bằng một cách ít ai ngờ, và tôi cũng chưa bao giờ biết đến trước đây: đợi có tương tác người dùng thì mới tải các JS nặng nề về.

Hầu hết các JS của bên thứ ba gồm các app phổ biến như Facebook (bình luận, chat, fanpage, like, share…), Google maps, Google analytics, Google reviews vân vân đều không hề nhẹ chút nào. Và mỗi lần bật nó lên bạn sẽ thấy tốc độ trang giảm đi đáng kể cho dù chúng có defer đi chăng nữa (nếu không defer ảnh hưởng còn nghiêm trọng hơn).

Ngoại trừ một số app thì đa số không cần phải tải ngay lập tức, ví dụ Facebook bình luận thường ở cuối bài, Facbook fanpage hay ở cột phải ở tầm giữa- ít khi nằm trong màn hình đầu tiên, Google maps hay review cũng thường ở cuối. Chính điểm này giúp các ứng dụng trên dễ dàng được trì hoãn, đợi có tương tác người dùng thì mới tải mà không ảnh hưởng gì đến trải nghiệm người dùng.

Thế còn Google Analytics thì sao, đây là một app cần phải tải càng sớm càng tốt (theo khuyến nghị của Google), để các con số thống kế được chính xác, nếu bạn dùng Flying Scripts để trì hoãn GA chắc chắn sẽ ảnh hưởng độ chính xác trong thống kê nhưng không nhiều.

Tại sao?

Lý do nằm ở chỗ hiếm có người dùng nào truy cập trang mà không thực hiện tương tác, chỉ cần user di chuột, chạm màn hình hay click, nhập vào bất kỳ chỗ nào trên trang thì đều được coi như là có tương tác và ngay lập tức Flying Scrips sẽ tải mã trì hoãn về. Nếu người dùng không thực hiện tương tác nào, thì trong vòng 5s trang cũng sẽ tải các mã về.

Điều mà tôi muốn nói ở tiêu đề là đôi khi các thiết lập làm cho mã không tải về dù có tương tác hay hết 5s trì hoãn.

Đây là điều tôi đã trải nghiệm khi phối hợp plugin LiteSpeed cache với Flying Scripts. Khi bạn để phần Load Inline JS trong tab JS settings thuộc phần Page Optimization của LSCache khác với tùy chọn mặc định (Default). Cụ thể nếu tôi để:

  • After DOM ready thì các mã trì hoãn sẽ không tải về (dù có tương tác hay sau 5s)
  • Defferred thì các mã trì hoãn lại tải về như chưa hề được tối ưu (ý là không cần tương tác vẫn tải về)

Kết quả là sau vài ngày không để ý, các thống kê đã bị sai như thế này:

báo cáo Google Analytics bị sai

Vì thiết lập After Dom ready + Flyings Scripts nên GA không tải về, nên con số thống kê về sát zero (0)/còn bình thường trang có khoảng 800 – 1000 lượt truy cập. Sau khi phát hiện tôi đã sửa lại và mọi thứ đã ổn.

Các lựa chọn khác cần để ý

Để dùng tốt Flying Scripts bạn nên để ý cả những điều này nữa:

  • Việc trì hoẵn có thể dựa vào khớp một phần hoặc toàn phần nên bên cạnh sử dụng tên file cụ thể bạn có thể loại trừ ở cấp độ tên miền nếu tên miễn đó không trùng với các app khác mà bạn không muốn trì hoãn. Ví dụ Google maps có thể tải về rất nhiều JS nếu bạn dựa theo tên file có thể sẽ phải copy hơn 10 file, trong khi trì hoãn dựa theo tên miền chỉ cần có 3.
  • Mốc mặc định để timeout 5s là ổn trong phần lớn trường hợp, nếu để ít hơn tác dụng trì hoãn có thể không còn nữa. Ví dụ nếu bạn để 2s, và trang của bạn cần hơn 2s để tải thì việc trì hoãn không còn tác dụng, vì trang chưa kịp tải xong nó đã nhận được lệnh tải các JS bên thứ ba về.
  • Có thể có tranh chấp dữ liệu nhất là bạn kết hợp nó với lazy load ảnh. Các file JS có thể lên đến 300 – 500KB, và là lưu lượng đáng kể trên kết nối di động. Trong khi lazy load ảnh cũng có thể cần dung lượng cả 100KB/s để đáp ứng tốc độ lướt của người dùng. Cách khắc phục ở đây là bạn cần sớm tải ảnh thay vì để nó trong màn hình mới tải. Với Flying Scripts chỉ cần người dùng chạm màn hình là nó sẽ tải luôn mã trì hoãn nên trong vòng từ 1 – 2s là đa số sẽ tải xong, trong tình huống họ vuốt nhanh xuống dưới ngay khi truy cập để xem tiếp nội dung thì chỉ ảnh tải lười ngay dưới màn hình đầu tiên là có khả năng bị xảy ra tranh chấp dữ liệu, còn những cái khác sẽ không bị.

Leave a Comment