Giới thiệu plugin Flying Scripts để tăng tốc website thông qua hạn chế ảnh hưởng của JavaScript nặng bên thứ ba

Mục đích của plugin này là tải (download) và thực thi (execute) JavaScript dựa trên tương tác của người dùng (user interaction).

Flying Scripts trì hoãn thực thi JavaScript cho đến khi có tương tác của người dùng. Bạn có thể chỉ định cụ thể từ khóa bao gồm tên các JavaScript cần trì hoãn. Nó cũng có thiết lập timeout (thời gian đợi) để tự động thực thi JavaScript sau một khoảng thời gian nào đó không có người dùng tương tác.


Tại sao bạn có thể cần plugin này?

JavaScript là tài nguyên rất nặng. Bằng cách trì hoãn thực thi các JavaScript không quan trọng (không cần cho lượt kết xuất ban đầu), bạn ưu tiên và cung cấp nhiều tài nguyên hơn cho các file JavaScript quan trọng khác.

Đây là cách giúp bạn giảm thời gian kết xuất, thời gian có khả năng tương tác (time to interactive), CPU nhàn rỗi đầu tiên (FCI), thời gian tối đa bị trì hoãn cho mục nhập đầu vào (FID), vân vân. Điều này cũng giúp giảm sức ép tải ban đầu cho trình duyệt bằng cách giảm số lượng kết nối.


Câu hỏi thường gặp

Các kiểu JavaScript nào nên được đưa vào mục này?

Bất cứ JavaScript nào không quan trọng cho lần kết xuất đầu tiên hoặc không nằm trên màn hình đầu tiên. Các loại mã script của bên thứ ba như các mã theo dõi (tracking), plugin chat, bản đồ đường đi, vân vân.

Tôi nên đưa từ khóa vào như thế nào?

Bất cứ từ khóa nào trong tên script của bạn giúp xác định duy nhất script đó. Ví dụ “fbevents.js” cho Facebook Pixel, “gtag” cho Google Tag Manager, “customerchat.js” cho plugin Facebook Customer Chat.

Nó khác với defer như thế nào?

defer nói với trình duyệt tải JS về khi trình duyệt thấy nó và thực thi JS khi quá trình phân tích cú pháp HTML hoàn thành xong xuôi. Khi bạn bao gồm script trong Flying Script, các đoạn mã này sẽ không được thực thi cho đến khi có tương tác của người dùng.

Tương tác của người dùng là gì?

Các sự kiện từ người dùng chẳng hạn như di chuyển chuột, cuộn trang, nhập vào từ khóa, chạm vào thiết bị di động, vân vân.

Timeout là gì?

Ngay cả khi không có tương tác người dùng, script sẽ được thực thi sau giới hạn thời gian được chỉ định trong timeout. Mặc định của plugin này là 5s.

(Dịch từ bài viết giới thiệu trên trang plugin chính thức của WordPress)


Hướng dẫn sử dụng plugin

1. Xác định website đang sử dụng các JS của bên thứ ba nào

Bạn có thể dùng công cụ trực quan như tools.pingdom.com (xem thêm hướng dẫn dùng ở đây) hoặc chuyên sâu như DevTools trên Chrome (bấm phím F12) để kiểm tra.

Với Pingdom bạn kéo xuống cuối (phần file requests) rồi lọc bằng cách gõ .js vào, bạn sẽ nhanh chóng thấy các JS tải từ nguồn bên ngoài (khác tên miền của bạn):

các file JS ngoài

Với DevTools của Chrome bạn nhấn phím F12 (hoặc Ctrl + Shift + I), chuyển sang tab Network > Disable cache > JS. Rồi tải lại trang, bạn sẽ thấy các file JS trên trang tải như thế nào.

công cụ devtools của Chrome

Bạn hover qua tên file để biết có phải nó đến từ nguồn bên thứ ba hay không.

2. Xác định xem JS nào không quan trọng

Thứ tự tải về của các file JS đã giúp định hình phần nào tầm quan trọng của chúng. File JS tải càng sớm thì nhìn chung nó càng quan trọng với trang. Tuy nhiên ở đây để cho chính xác hơn, bạn cần biết cụ thể file JS đó phục vụ cho chức năng nào, nó có cần tải ngay hay không, hay có thể đợi được. Có ở sâu bên dưới nội dung hay nằm ngay trong màn hình đầu tiên.

Ví dụ các file JS cho Google Maps, Facebook chat, comment, likebox thường không cần phải tải ngay và bạn có thể trì hoãn các tài nguyên như vậy.

3. Lấy tên các file này rồi đưa vào plugin Flying Scritps

nhập tên file vào plugin Flying Scripts

Timeout bạn cứ để như mặc định là 5s, nếu thấy cần mới điều chỉnh. Sau đó nhấn Save Changes để lưu.

Ngoài cách lấy tên file theo kiểu trên, bạn có thể sử dụng cấp độ tên miền để trì hoãn, ví dụ đưa facebook.com để trì hoãn tất cả các file JS lấy từ Facebook. Tôi sẽ nói điều này kỹ hơn ở phần câu hỏi phụ.

Làm sao tôi biết được là đã triển khai thành công: Nếu trang web đang sử dụng Cache bạn xóa cache của nó đi rồi tiến hành kiểm tra. Bạn cũng vào DevTools như ở mục một trong phần này rồi nhấn F5. Bạn sẽ thấy các file bị loại trừ không tải ngay lập tức, khoảng 5s sau khi trang tải xong, các file này mới được tải về.

Chú thích của người dịch: Plugin này được phát triển bởi Gijo Varghese. Anh này còn hai plugin khác mà tôi rất thích là Flying ImagesFlying Pages.


Các câu hỏi phụ

Để thời gian timeout là 5s có ảnh hưởng gì đến các con số thống kê không khi tôi trì hoãn thực thi các mã tracking?

Chắc chắn là có, nhưng không nhiều. Vì hiếm người dùng nào truy cập trang nhưng không làm gì trong vòng hơn 5s. Cả trên thiết bị di động lẫn trên máy bàn, thường sau khi truy cập vào trang nào đó, thấy được màn hình đầu tiên là người dùng bắt đầu cuộn chuột.

Cách nhanh hơn để thêm các mã JS

Đôi khi trang của bạn sử dụng rất nhiều tài nguyên bên ngoài, bạn thấy việc copy từng file JS rất phiền và dễ nhầm lẫn. Có cách khác nhanh hơn, nếu các file .js cần trì hoãn đó đều đến từ cùng nguồn, bạn có thể lấy tên miền chung chứa chúng cho tiện. Như cách tôi làm dưới đây:

trì hoãn đồng loạt

Ưu điểm khác của cách trên là tôi thấy trên một số website, đôi khi việc sử dụng tên file.js lại không làm trì hoãn được các file đó, sử dụng tên miền thì lại được.

Tương thích với plugin cache

Tính năng của plugin Flying Scripts sẽ không hoạt động bình thường nếu bạn can thiệp vào cách thức tải của inline Scripts trong phần JS Settings của plugin LiteSpeed cache.

  • Nếu bạn để là After DOM ready: các file trì hoãn sẽ không được tải dù cho có tương tác của người dùng.
  • Nếu bạn để là Deferred: các file trì hoãn vẫn tải dù cho không có tương tác của người dùng.

Chỉ khi bạn để là Default thì việc sử dụng Flying Scripts mới diễn ra bình thường.

Bạn dễ dàng kiểm tra điều này khi kiểm tra cách tải scripts của bên thứ ba thông qua trình duyệt Chrome (Ctrl + Shift + I > Network > Disable cache > JS).

Lưu ý trên rất quan trọng vì plugin cache LiteSpeed rất phổ biến, và Flying Scripts cũng là cách tối ưu tải JS của bên thứ ba hiệu quả nhất hiện nay mà tôi biết, chúng rất hay được dùng cùng nhau trên các dự án tối ưu hóa phức tạp.