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. :)
Cái này hôm trước có một anh chia sẻ 1 plugin giải quyết tự động được tất cả rồi mà nhĩ, mà giá dịch vụ như thế nào vậy, mình làm cho web phim wordpress có oke không?
Bên mình chưa từng chia sẻ plugin nào có chức năng tương tự bạn nhé. :) Site của bạn ngoài Google Analytics ra thì cũng đâu có script nào tải từ server bên ngoài? Mà xử lý vấn đề với Google Analytics thì bên mình đã chia sẻ giải pháp rồi. :)
Bảo sao tốc độ web của bác Hiếu lại tương đương với tốc độ ánh sáng đến vậy!
Thực ra site của mình hiện tại có thể load nhanh hơn thế này nhiều, nhưng sẽ tốn thêm chi phí. Ví dụ như sử dụng server Singapore, Hong Kong hoặc Việt Nam (rút ngắn khoảng cách); đăng ký CloudFlare APO ($5/tháng) để cache toàn bộ dữ liệu website lên CloudFlare hoặc đổi qua sử dụng QUIC.Cloud CDN ($1/100GB) cũng có tính năng cache toàn bộ dữ liệu website lên server của họ. Tuy nhiên, mình cố gắng sử dụng nhiều dịch vụ miễn phí nhất có thể để khách hàng có thể thấy được chất lượng thực tế của các dịch vụ do bên mình cung cấp (WordPress Hosting, theme Paradise…). Chỉ cần mua theme, mua host là site của khách hàng cũng sẽ được thiết lập tối ưu tương tự như wpcanban.com mà không phải bỏ thêm tiền cho các dịch vụ phát sinh.
Cài này có plugin flying scripts và wp rocket từ bản 3.8 trở lên, làm về khoản này rất tốt. Em thích gọi nó là lazy load JavaScript hay delay JavaScript thì hợp lý hơn là gọi trì hoãn thì nghe giống dễ nhầm với defer (trì hoãn)
Chính xác ở đây là delay nhé. Trong bài viết mình có chú thích rồi. Còn lazy load (cuộn trang đến đâu tải đến đấy) là kỹ thuật hoàn toàn khác. :)
Anh cho em hỏi một chút ạ. Là em có sử dụng thêm 2 file thư viện Js để chèn lên web nhưng do mới đầu e không tìm được thư mục js riêng nên e đã tạo 1 thư mục khác trong phần Include để đưa lên rồi dẫn link ra để sử dụng và đến khi e check speed thì e có thấy 1 file khác tên giống y hệt file e tải nên nhưng nội dung thì lại khác nhau và speed cũng báo là file ấy thuộc file js không sử dụng. Vậy e có nên kết hợp 2 file đấy lại hay là xóa luôn 1 file đi không ạ. nếu kết hợp thì có cách nào kết hợp nhanh không ạ.
Nếu trùng tên mà khác nội dung thì tốt nhất nên đổi tên cái file bạn upload nhé. Đừng xóa linh tinh (đặc biệt là file hệ thống của WordPress) kẻo lại lỗi web.
Dạ vâng ạ. Nhưng khi mình để nhiều tệp ở nhiều chỗ như vậy thì nó có bị ảnh hưởng
là tăng thời gian xử lý file và làm chậm web nhiều không ạ. vì có nhiều file js nó biến thành file chặn hiển thị ấy ạ. có phải là mình nên tối ưu lại không ạ.
Dùng plugin để tối ưu đi bạn. Rất nhiều plugin hiện tại có thể xử lý vấn đề chặn hiển thị của JS mà. WP Rocket, LiteSpeed Cache, Autoptimize, Swift Performance…
Cực kỳ chất lượng.
Sau khi cài đặt trong Wp-rocket thì web đã xanh lè :D
Cảm ơn ku em nhiều!!!
Sử dụng Host bên Hiếu quá ok, site load nhanh. Chỉ có điều google speed khá thấp. Mặc dù không quan tâm lắm chỉ về GG pagespeed nhưng vẫn muốn tìm nguyên nhân vì sao nó lên 90 điểm nổi :D
Chắc là script của DMCA, nhưng gỡ ra vẫn chỉ tăng rất ít :)
Site của bạn lên điểm dễ lắm:
1. Bỏ Google Fonts đi.
2. Xử lý cache của Google Analytics.
3. Lưu cái ảnh DMCA kia lên host, đừng load từ website của DMCA nữa.
4. Nén ảnh và tạo ảnh WebP.
cái này mình biết fix mới đau :(
Tối ưu dc mục 1,2,3 rồi (còn cái 4 tạo ảnh webP t chưa làm). Có lẽ mạng đang chậm mấy nay nên GG speed thấ ko thay đổi gì nhiều? :)
Cái Google PageSpeed là nó dùng máy của bạn để test điểm luôn đấy. Cáp AAG lại vừa đứt nhé. Ngày 17 sửa xong thì ngày 19 lại đứt tiếp. :P
mà Hiếu xem thấy ok chưa nè? (chỉ còn cái tạo ảnh webP là T chưa làm dc thôi :d). Đợi cáp quang bình thường lại sẽ check lại. Hy vọng :)
Test vẫn thấy Google Analytics và Google Fonts. :))
hic, kỳ vậy, qua zalo gửi thông tin bác tối ưu 2 cái đó giúp t dc ko, trước mua Host bên H rồi đó :d
1. Lỗi cache của Google Analytics có thể xử lý theo bài viết “Khắc phục lỗi cache của Google Analytics trong WordPress“. Nhớ xóa bỏ code Google Analytics mà bạn đã chèn vào web trước đó.
2. Google Fonts có thể loại bỏ thông qua trang thiết lập của theme (nếu có) hoặc truy cập LiteSpeed Cache => Page Optimization => [3] Optimization => Chuyển mục Load Google Fonts Asynchronously sang trạng thái OFF, chuyển mục Remove Google Fonts sang trạng thái ON => Save Changes => Xóa LSCache và kiểm tra lại.
Tính năng này dùng trên theme flatsome + wprocket không dc.
Bạn đang sử dụng WP Rocket phiên bản mấy nhỉ? Đã update lên 3.9.0.5 mới nhất chưa?
Bản mới nhất rồi bác, kết hợp với plugin meteor thì ok.
Ơ. Mình tưởng nó hiện cảnh báo khi bạn bật tính năng delay JS của WP Rocket song song với plugin WP Meteor mà? Vẫn dùng chung được?
Vẫn dùng dc nha bác. bác thử các bài viết site xem điểm sẽ biết ạ, trừ trang chủ vì e nhúng youtube. nó báo thì báo nhưng e cứ kệ vậy
anh ơi em cài vào những lúc được lúc không anh ạ.
lúc test thì 90 điểm, lúc test thì 40 điểm và báo “giảm javascript không dùng đến.
mình nên sửa như thế nào được ạ?
Bạn delay script của dịch vụ gì vậy?
E dùng plugin Flying Scripts như trên ạ.
Mình hỏi bạn delay script gì chứ không hỏi bạn sử dụng plugin gì để delay script. :P
em delay google tag manager, google analytics, với mấy cái quảng cáo google kiểu googlesyndicate.com, page2.googlesyndicate.com, partnergooogle.com, googleservice.com… ấy ạ.
làm xong e xóa cache litespeed rồi test thử thấy 90đ.
nhưng 1 lúc sau lại trở về 40đ google báo lỗi y như cũ.. nó cứ bị như vậy không ổn định a ạ.
Mấy cái script đó bạn chèn thủ công hay chèn thông qua plugin nào nhỉ?
google analytics thì e vừa đọc bài flying ga của a và đưa lên host rồi ạ, còn mấy cais code quảng cáo thì e chèn thủ công. e dùng custom html tạo widget để chèn code adsense, còn quảng cáo trong bài thì e để quảng cáo tự động của gg. ngoài ra e ko chèn facebook hay mess gì cả,
em cảm ơn a ạ!
Mấy cái code yêu cầu chèn vào mã nguồn HTML thì bạn chèn hết vào footer xem sao. Đừng chèn trên header hay body.
E hiện chỉ còn có code GA, code đơn vị quảng cáo adsense và code quảng cáo tự động thôi.
code GA thì e bỏ vào flying analytic rồi. e sẽ thử đưa code quảng cáo tự động xuống foooter xem sao. cơ mà code quảng cáo tự động lúc đăng ký adsense ấy thì mình xóa đi được ko ạ? :)
Xóa được bạn nhé.
Hi anh Hiếu, em xóa nó đi rồi, vẫn chưa ổn định lắm nhưng cũng ok hơn trước. em cảm ơn anh nhé!