Trì hoãn tải script của bên thứ ba trong WordPress

Trì hoãn tải script của bên thứ ba (các dịch vụ của Facebook, Google, live chat…) trong WordPress để tăng tốc độ load web.

Trước đây, tôi đã từng rất nhiều lần phải giải thích với khách hàng rằng website của họ load chậm hay điểm test tốc độ thấp là do họ chèn quá nhiều script của bên thứ ba (Google, Facebook, live chat…). Những dữ liệu này không thể tối ưu được, chỉ có 1 trong 2 lựa chọn là dùng và chấp nhận chậm hoặc bỏ chúng đi. Tuy nhiên, giờ đây, mọi chuyện đã khác. Sau một thời gian dày công nghiên cứu, tôi đã tìm ra cách để giải quyết được vấn đề.

Tham khảo thêm:

• Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin
• Chuyển tất cả JavaScript xuống footer trong WordPress

Tại sao cần trì hoãn tải script của bên thứ ba?

Những dữ liệu tải từ server của bên thứ ba như Google (Google Ads, Google AdSense, Google Analytics, Google Tag Manager…), Facebook (Facebook Page Widget, Facebook Messenger, Faceboom Comments, Facebook Pixel…), hay các dịch vụ live chat (Tawk.to, uhChat…)… là những dữ liệu không thể tối ưu được. Bạn không thể nén, gộp hay thiết lập cache cho chúng. Nguyên nhân đơn giản vì chúng không nằm trên host của bạn. Những dữ liệu này thường rất nặng và gây ra các vấn đề nghiêm trọng liên quan đến tốc độ load của website. Để thấy rõ điều này, các bạn có thể dùng Google PageSpeed Insights, GTmetrix hay các công cụ test tốc độ.

Và vì không thể tối ưu được nên giải pháp duy nhất để tích hợp các dịch vụ kể trên vào website của bạn mà không gây ảnh hưởng tới tốc độ load chính là trì hoãn việc tải của chúng. Hiểu một cách đơn giản thì script của chúng chỉ được thực thi một khi các thành phần khác của website đã tải hoàn tất. Nghe đến đây nhiều bạn sẽ nghĩ ngay đến các kỹ thuật như async hay defer JS. Tuy nhiên, cái mà tôi đang nói đến là delay (trì hoãn). Chúng khác nhau ở chỗ async và defer JS được thực hiện ngay sau khi các thành phần khác được tải, còn delay thì có quãng thời gian nghỉ. Khoảng thời gian này có thể tính theo giây, theo phút, thậm chí là… theo giờ tùy theo nhu cầu của bạn.

Ví dụ: bạn chèn Facebook Messenger vào website của mình và thiết lập cho nó chỉ bắt đầu hiển thị sau 5 giây kể từ khi website đã hoàn tất việc tải những dữ liệu khác. WP Căn bản cũng đang chèn widget Facebook Messenger.

Tuy nhiên, khi test tốc độ với Google PageSpeed Insights, site của tôi vẫn đạt điểm gần như tuyệt đối và không có bất cứ lỗi nào liên quan đến Facebook được đề cập trong báo cáo. Widget Facebook Messenger cũng không xuất hiện trong ảnh chụp màn hình của Google.

• Mobile:

• Desktop:

Chúng ta cũng có thể làm điều tương tự với các dịch vụ khác, miễn là chúng sử dụng script để nhúng dữ liệu vào website.

Trì hoãn tải script của bên thứ ba trong WordPress

Có 2 cách khác nhau để làm điều này. Tuy nhiên, về mặt nguyên lý thì chúng hoàn toàn giống nhau.

Sử dụng plugin Flying Scripts by WP Speed Matters

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin Flying Scripts by WP Speed Matters.

2. Test tốc độ load website bằng Google PageSpeed Insights hoặc GTmetrix. Chúng tôi khuyên bạn nên sử dụng GTmetrix vì đôi lúc Google PageSpeed Insights không hiển thị đầy đủ danh sách các tài nguyên của bên thứ 3 đang load trên website của bạn. Mở tab Waterfall => xem cột Domain để biết tài nguyên nào được tải từ server của bên thứ ba (tên miền không giống với tên miền website của bạn) => click vào dấu + tương ứng => copy tên miền của tài nguyên đó.

3. Truy cập Settings => Flying Scripts, các bạn sẽ thấy một số thiết lập như sau.

Trong đó:

• Include Keywords: điền từ khóa định danh cho các script. Ví dụ Facebook Pixel là fbevents.js, Google Tags Manager là gtag, Facebook Customer Chat là customerchat.js. Hoặc đơn giản nhất là các bạn điền tên miền (nơi load script) vào mục này. Danh sách tên miền các bạn có thể copy ở bước 2. Mỗi từ khóa/ tên miền nằm trên 1 dòng.
• Timeout: tự động tải script sau một khoảng thời gian chờ khi không có tương tác của người dùng. Các bạn để mặc định là 5 giây.
• Disable on pages: điền URL của các trang mà bạn muốn vô hiệu hóa tính năng trì hoãn tải script.

Click vào nút Save Changes để lưu lại.

Lưu ý: trong trường hợp bạn đang sử dụng plugin LiteSpeed Cache, hãy truy cập LiteSpeed Cache => Page Optimization => [2] JS Settings.

Hãy đảm bảo:

• JS Combine External and Inline: ở trạng thái OFF.
• Load Inline JS: ở trạng thái Default.

Click vào nút Save Changes để lưu lại. Xóa cache và kiểm tra kết quả.

Sử dụng plugin WP Rocket

Nếu bạn đang sử dụng plugin WP Rocket để tối ưu tốc độ load cho website, hãy truy cập Settings => WP Rocket => File Optimization => tick vào mục Delay JavaScript execution.

Nếu bạn muốn loại trừ một script nào đó khỏi bị delay, hãy điền URL của nó vào khung Excluded JavaScript Files ở ngay bên dưới.

Click vào nút Save Changes để lưu lại. Xoá cache và kiểm tra kết quả.

Dịch vụ tối ưu website WordPress của WP Căn bản

Nếu bạn không có thời gian để nghiên cứu hoặc đã thử làm theo hướng dẫn nhưng không có tác dụng thì tại WP Căn bản, chúng tôi nhận làm dịch vụ (trả phí) cho những khách hàng có nhu cầu.

• Đối với các khách hàng có website đang sử dụng dịch vụ WordPress Hosting do WP Căn bản cung cấp: các bạn sẽ vẫn được hỗ trợ tối ưu website WordPress miễn phí theo danh sách được ghi trong phần nội dung công việc. Tuy nhiên, nếu các bạn muốn trì hoãn script của bên thứ 3 để tăng tốc độ load web và điểm số thì chúng tôi sẽ phải phụ thu thêm chi phí.
• Đối với các khách hàng khác: chúng tôi chỉ nhận xử lý vấn đề trì hoãn script của bên thứ ba, không nhận tối ưu các vấn đề khác.

Các script của bên thứ ba mà chúng tôi có thể trì hoãn bao gồm:

• Facebook Page Widget (Facebook Like Box)
• Facebook Messenger (Facebook Chat)
• Facebook Comments
• Facebook Pixel (Facebook Ads)
• Google AdSense
• Google Ads (Google AdWord)
• Google Analytics
• Google Tags Manager
• Các dịch vụ live chat (Tawk.to, uhChat, Zendesk…)
• Các script hỗ trợ chạy quảng cáo, marketing
• Các script hỗ trợ thống kê số người truy cập

Và tất tần tật các thể loại script của bên thứ ba khác, miễn là chúng được nhúng vào website WordPress của bạn thông qua file .js hoặc inline script.

Số tiền mà khách hàng phải trả sẽ phụ thuộc vào số lượng script cần trì hoãn. Vui lòng liên hệ với chúng tôi để nhận được báo giá chi tiết. Xin cảm ơn!

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)