Hướng dẫn cách trì hoãn tải Script bên thứ 3 trong wordpress

Trì hoãn tải Script bên thứ 3 trong wordpress

Lý do cần trì hoãn tải script của bên thứ ba?

Một trong những yếu tố ảnh hưởng lớn đến tốc độ tải trang là các script của bên thứ ba, chẳng hạn như Google Ads, Google Analytics, Google Tag Manager, Facebook Pixel hay các tiện ích chat trực tuyến như Tawk.to, uhChat… Những tập lệnh này được tải từ máy chủ bên ngoài, khiến chúng ta không thể tối ưu bằng cách nén, gộp hay thiết lập bộ nhớ đệm như đối với các tài nguyên nội bộ. Điều này dễ dẫn đến tình trạng website bị chậm, làm giảm trải nghiệm người dùng và ảnh hưởng đến hiệu suất tổng thể.

Để kiểm chứng mức độ tác động, bạn có thể sử dụng các công cụ như Google PageSpeed Insights hay GTmetrix. Khi website có quá nhiều script bên ngoài được tải ngay lập tức, điểm hiệu suất sẽ bị ảnh hưởng đáng kể. Tuy nhiên, thay vì loại bỏ hoàn toàn các công cụ này, một giải pháp hữu hiệu giúp giảm thiểu tác động tiêu cực là trì hoãn việc tải chúng.

Trì hoãn tải script có nghĩa là chúng chỉ được thực thi sau khi các tài nguyên quan trọng khác của website đã được tải hoàn tất. Điều này khác với các thuộc tính async và defer của JavaScript. Nếu như async và defer giúp tải script ngay sau khi nội dung chính được tải xong, thì phương pháp trì hoãn (delay) sẽ tạo ra một khoảng thời gian chờ trước khi kích hoạt tập lệnh. Khoảng thời gian này có thể được tùy chỉnh theo giây, phút hoặc thậm chí lâu hơn tùy vào nhu cầu cụ thể.

Chẳng hạn, nếu bạn muốn tích hợp Facebook Messenger vào website nhưng không muốn ảnh hưởng đến tốc độ tải, bạn có thể thiết lập để tiện ích này chỉ hiển thị sau vài giây kể từ khi toàn bộ nội dung chính của trang đã sẵn sàng. Nhờ cách này, website vẫn duy trì tốc độ tối ưu mà không bị ảnh hưởng bởi các script bên thứ ba. Khi kiểm tra với Google PageSpeed Insights, những tập lệnh được trì hoãn thường không xuất hiện trong danh sách các yếu tố làm chậm trang, giúp bạn đạt điểm số tối đa mà vẫn giữ được đầy đủ các tính năng cần thiết.

Xem thêm bài viết: Lưu Trữ Script Của Bên Thứ Ba Trực Tiếp Trên Máy Chủ

Cách trì hoãn tải script của bên thứ ba trong WordPress

Việc trì hoãn tải script giúp giảm thiểu tác động của các tài nguyên bên ngoài đến tốc độ website, giữ cho trang web hoạt động mượt mà mà vẫn đảm bảo đầy đủ chức năng. Có hai phương pháp phổ biến để thực hiện điều này, dù cách triển khai khác nhau nhưng về nguyên lý thì đều hướng đến việc tối ưu hóa thời gian tải trang.

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

Đây là một trong những giải pháp hiệu quả để trì hoãn việc tải các script của bên thứ ba. Sau khi cài đặt và kích hoạt plugin, bước đầu tiên là kiểm tra tốc độ trang web bằng các công cụ như Google PageSpeed Insights hoặc GTmetrix. GTmetrix thường cung cấp danh sách chi tiết hơn về các tài nguyên đang được tải từ máy chủ bên ngoài, giúp xác định chính xác các script cần trì hoãn.

Trong phần kiểm tra của GTmetrix, bạn có thể vào tab Waterfall để xem danh sách các tài nguyên đang được tải. Những tài nguyên có tên miền khác với tên miền của website chính là các script bên thứ ba. Sau khi xác định được các tài nguyên này, bạn có thể sao chép tên miền hoặc đường dẫn của chúng để thiết lập trong plugin.

Khi truy cập vào phần cài đặt của Flying Scripts, bạn sẽ thấy các tùy chỉnh quan trọng như:

• Include Keywords: Nhập từ khóa hoặc tên miền để plugin nhận diện các script cần trì hoãn. Ví dụ, Facebook Pixel có thể được nhận diện qua tệp fbevents.js , Google Tag Manager là gtag, còn Facebook Customer Chat là customerchat.js. Để đơn giản hơn, có thể nhập trực tiếp tên miền của các tài nguyên đã xác định từ GTmetrix.
• Timeout: Thiết lập thời gian chờ trước khi script được tải khi không có sự tương tác của người dùng. Giá trị mặc định là 5 giây, nhưng có thể điều chỉnh tùy theo nhu cầu.
• Disable on pages: Nhập URL của các trang mà bạn muốn loại trừ khỏi việc trì hoãn tải script.

Sau khi hoàn tất cài đặt, lưu lại thay đổi và kiểm tra kết quả. Nếu website đang sử dụng LiteSpeed Cache, cần truy cập vào phần tối ưu JavaScript và đảm bảo rằng tùy chọn JS Combine External and Inline đang tắt và Load Inline JS được đặt về mặc định. Điều này giúp tránh xung đột giữa hai plugin khi tối ưu hóa script.