Delay script bên thứ 3 Facebook, Google, live chat…không dùng plugin

Có nhiều công cụ của bên thứ ba giúp nâng cao chức năng hoặc khả năng hiển thị của trang web WordPress. Các công cụ của bên thứ ba này sử dụng JavaScript để thêm chức năng của chúng vào trang web WordPress.

Nhược điểm của JavaScript bên thứ ba được bổ sung này là trong hầu hết các trường hợp, nó sẽ làm tăng thời gian tải trang của mỗi URL mà tập lệnh tồn tại.

Điều này có nghĩa là bất cứ nơi nào bạn có tập lệnh trên trang của mình và một khách truy cập đang cố gắng truy cập trang đó, thời gian tải trang đầy đủ sẽ tăng lên do tập lệnh.

Tốc độ tải trang được đánh giá là một yếu tố quan trọng trong SEO khi các công cụ tìm kiếm xếp hạng website của bạn. Tuy nhiên, website xuất hiện một vài lý do làm giảm tốc độ tải trang đi đáng kể, một trong số đó là các tài nguyên chặn hiển thị trên WordPress. Việc này không những ảnh hưởng đến trải nghiệm người dùng mà còn có tác động tiêu cực đến thứ hạng SEO của website.

Các script của bên thứ ba có thể trì hoãn

Dưới đây là danh sách một số script bên ngoài được sử dụng phổ biến nhất trên trang web WordPress:

Facebook Page Widget (Facebook Like Box)
Facebook Messenger (Facebook Chat)
Facebook Comments
Facebook Pixel (Facebook Ads)
Embedded Video
Embedded Forms
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.

Tại sao cần delay 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.

Kích thước tải trọng của các tập lệnh của bên thứ ba đóng một vai trò quan trọng ở đây, nhưng vẫn còn một yếu tố quan trọng khác cần xem xét.

JavaScript chiếm nhiều tài nguyên CPU để thực thi. Ngay cả khi bạn tối ưu hóa các tập lệnh của bên thứ ba để giảm tác động đến thời gian hiển thị, chúng vẫn có thể ảnh hưởng đến chỉ số Thời gian tương tác. Nó đo lường mức độ nhanh chóng mà người dùng có thể tương tác với một trang web.

Nó càng chậm, người dùng của bạn sẽ càng thất vọng và khả năng họ từ bỏ trang web của bạn càng cao.

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.

Cách Delay script bên thứ 3 Facebook, Google, live chat…không dùng plugin

Đoạn script dưới đây là mẫu mặc định mà bạn có thể sử dụng để delay script WordPress.

Chỉ có hai chỗ trong mẫu này cần được thay đổi.

URL cho tập lệnh bên ngoài mà bạn muốn sử dụng
Thời gian delay khi bạn muốn tập lệnh chạy

<script>
setTimeout(function() {
    var head_ID = document.getElementsByTagName("head")[0];       
    var script_element = document.createElement('script');
    script_element.type = 'text/javascript';
    // SET EXTERNAL SCRIPT PATH BELOW
    script_element.src = 'URL_FOR_EXTERNAL_SCRIPT';
    head_ID.appendChild(script_element);
}, 2500); // TIME DELAY YOU CAN ADJUST
</script>

Ví dụ Tải script gốc trong WordPress
Đoạn script dưới đây là đoạn mã nhúng mặc định cho tiện ích TrustPilot

<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script>
<!-- End TrustBox script -->

<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="5b7de8733448bc00017ef8cc" data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en">
  <a href="https://www.trustpilot.com/review/flatsomelite.com" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget -->

Delay script trong WordPress
Đoạn script dưới đây là Delay script cho tiện ích TrustPilot

<!-- TrustBox script -->
<script>
setTimeout(function() {
    var head_ID = document.getElementsByTagName("head")[0];       
    var script_element = document.createElement('script');
    script_element.type = 'text/javascript';
    // SET EXTERNAL SCRIPT PATH BELOW
    script_element.src = 'https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js';
    head_ID.appendChild(script_element);
}, 2500); // TIME DELAY YOU CAN ADJUST
</script>
<!-- End TrustBox script -->

<!-- TrustBox widget - Carousel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="5b7de8733448bc00017ef8cc" data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en">
</div>
<!-- End TrustBox widget -->

Tóm lại là

Chúng tôi thực sự hy vọng rằng bài đăng này hữu ích và hiểu được cách trì hoãn tải tập lệnh trong WordPress.

Bạn thực sự nên sử dụng điều này cho bất kỳ tập lệnh bên ngoài nào của bên thứ ba mà bạn đang sử dụng trên trang web WordPress của mình và bạn sẽ thấy thời gian tải trang giảm ngay lập tức, điều này sẽ có lợi cho xếp hạng công cụ tìm kiếm và trải nghiệm tổng thể của khách truy cập.

Wordpress

Delay script bên thứ 3 Facebook, Google, live chat…không dùng plugin