Lưu trữ script của bên thứ ba (Facebook, Google, live chat…) ngay trên host giúp tăng tốc độ load cho website.
Trong bài viết trước đây, tôi đã từng hướng dẫn cho các bạn cách trì hoãn tải script của bên thứ ba trong WordPress rồi phải không nào? Mặc dù đây là một giải pháp rất hay để tăng tốc độ load cho website. Tuy nhiên, nó vẫn chưa thực sự hoàn hảo khi mà script vẫn được tải từ máy chủ của bên thứ ba. Điều này khiến cho tốc độ load của website vẫn phải phụ thuộc vào tốc độ tải script từ máy chủ bên ngoài. Hôm nay, tôi sẽ giới thiệu cho các bạn một phương án để khắc phục vấn đề kể trên.
Tham khảo thêm:
- Lưu trữ Google Fonts ngay trên host để tăng tốc độ load
- Khắc phục lỗi cache của Google Analytics trong WordPress
Điều kiện sử dụng
- Host của bạn phải sử dụng web server LiteSpeed Enterprise hoặc OpenLiteSpeed.
- Website của bạn phải đang cài đặt plugin LiteSpeed Cache.
Lưu trữ script của bên thứ ba với LiteSpeed Cache
1. Đầu tiên, các bạn cần phải truy cập vào LiteSpeed Cache => Page Optimization => [7] Localization rồi thiết lập như sau:
Trong đó:
- Localize Resources: các bạn chuyển sang trạng thái
ONđể kích hoạt. - Localization Files: các bạn điền link của script của bên thứ ba muốn lưu trữ vào khung.
Click vào nút Save Changes để lưu lại.
2. Chuyển sang tab [2] JS Settings => kiểm tra và đảm bảo mục JS Combine External and Inline đã được đặt ở trạng thái OFF.
Click vào nút Save Changes để lưu lại.
3. Chuyển sang tab [8] Tuning, điền link của script mà bạn muốn lưu trữ trên host vào các mục sau:
- JS Excludes:
- JS Deferred Excludes:
Click vào nút Save Changes để lưu lại.
4. Xóa cache của plugin LiteSpeed Cache và sử dụng Google PageSpeed Insights để kiểm tra kết quả. Chắc chắn các vấn đề liên quan đến script của bên thứ ba đã biến mất.
Thật đơn giản phải không nào? Chúc các bạn thành công!
Các bạn hoàn toàn có thể kết hợp việc lưu trữ script ngay trên host với kỹ thuật trì hoãn tải script (link tham khảo ở phần đầu bài viết) để đạt được hiệu quả cao hơn.
Nếu bạn thích bài viết này, hãy theo dõi 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 nhé. Cảm ơn rất nhiều. :)
Cảm ơn Hiếu anh đã tìm được liên kết bên thứ 3 và cài đặt theo hướng dẫn, đúng là cảm giác web nó load khác hẳn ban đầu.
Anh hỏi thêm nữa là khi thực hiện chia sẻ bài viết trên facebook nó thường load khá lâu, anh thường thấy nó có chạy 1 liên kết là static.fbcdn.net
Đây có phải là script của bên thứ ba không vì anh test trên GTmetrix thì không thấy nó load liên kết này.
Chỉ những file nào anh thấy xuất hiện trong mã nguồn khi view-source thì mới lưu trữ trên host được nhé. Còn view-source không thấy nghĩa là không lưu trữ được.
Thanks em
Hay quá nhiều khi anh thấy web chậm do khi vào nó cứ load 1 cái liên kết liên quan tới chia sẻ mạng xã hội.
Anh muốn hỏi cách để biết link của script của bên thứ ba.
Web của anh có cài đặt plugin Chia sẻ mạng xã hội: Shared Counts và Woocommerce Product Social Sharing anh thấy khi load web nó hay chạy nền cái này.
Sử dụng tính năng xem mã nguồn (view-source) để tìm anh nhé. Trước đó nhớ tắt plugin LiteSpeed Cache đi nếu không nó sẽ gộp, nén và mã hóa các file JS, CSS => khó xác định. Kể mà web của anh dùng host của bên em thì mấy cái này không cần phải nghĩ rồi. Mà sao anh không chuyển qua sử dụng plugin WPCB Social Share Buttons đi kèm theme Paradise nhỉ? Tham khảo bài viết “Tạo nút chia sẻ mạng xã hội siêu nhẹ cho WordPress” để biết thêm chi tiết.
A thấy cái plugin chia sẻ của Paradise nhanh thật nhưng a dùng cái Sharecount nó có đếm lượt Share.
Cảm ơn Hiếu để a nghiên cứu tiếp xem.
Đối với em thì tốc độ load là ưu tiên số 1 nên tất nhiên những tính năng không quá cần thiết như bộ đếm số lượt chia sẻ (sử dụng JS) sẽ bị loại bỏ. :D
A kiểm tra view source thì chỉ có 1 đoạn thế này là có liên kết của bên thứ 3:
Nhiều khi anh load web mà nó chậm chậm thì thấy nó báo Đang kết nối với static.addtoany.com…
Vậy link của script trong trường hợp này sẽ là gì vậy em.
Em đã nói với anh rồi. Anh phải tắt plugin LiteSpeed Cache đi. Sau đó view-source (Ctrl + U) của website để lấy link của file JS, CSS. Và một số file JS, CSS sẽ không hoạt động được nếu anh lưu trữ local, ví dụ như JS của Google AdSense. :D
Cảm ơn bài viết của Hiếu,
Mình muốn hiển thị Adsense lên web, mà tìm mãi ko thấy lỗi vì sao ko hiển thị, tìm ra một lúc thì thấy bài này và có liên quan đến Plugin LiteSpeed.
Mình đã làm theo hướng dẫn trên nhưng Google Ads vẫn ko hiển thị
Hiếu có biết là lỗi gì ko nhỉ?
Website của bạn đã được Google phê duyệt để hiển thị quảng cáo chưa nhỉ? Nếu rồi thì bạn thử vô hiệu hóa hết các plugin có khả năng can thiệp đến việc tải JS xem sao nhé. Chúng thường là các plugin hỗ trợ tối ưu tốc độ load.
Web mình đã được duyệt rồi, tài khoản Google Ads đã xác minh, và các web khác thì vẫn lên bình thường, có mỗi cái web có cài LiteSpeed Cache này là nó không lên, nó vẫn có khung quảng cáo của Adsense nhưng nó trắng tinh à.
Mình disable this plugin thì cũng chưa tìm ra lỗi. hix
Nếu bạn đã tắt plugin LiteSpeed Cache mà vẫn không hiện thì nó đâu có liên quan gì đến plugin LiteSpeed Cache nhỉ? :)
Mình tắt rồi mà vẫn bị, có thể do cache google chưa xóa, cái Adsense này mỗi lần thay đổi thì phải mất một lúc mới cập nhật nên có thể hơi chậm.
Mình google thì thấy nhiều người bị, mà họ làm cách này thì ko bị nữa, nhưng mình vẫn bị hic.
Họ làm như sau: vào Setting của LiteSpeed, vào 7 – Localization, sau đó vào Localization File và xóa cái dòng này đi: https://pagead2.googlesyndication.com/pagead/js/
Mình nghĩ dòng này là để load scrip quảng cáo của Google ngay trên host luôn mà sao lại disable nó đi Hiếu nhỉ?
Tính năng Localization chỉ nên dùng với các file JS của Facebook, Google Analytics… thôi. Không dùng cho Google AdSense. Và như đã nói ở trên, mình thấy nhiều site hiện tại đang không hiển thị quảng cáo AdSense kể cả khi họ không cài plugin LiteSpeed Cache chứ đừng nói là bật tính năng Localization.
P/s: Cái này hình như do Google AdSense thì phải. Mình vừa xem qua một số web cũng thấy quảng cáo không hiển thị, mặc dù họ không dùng plugin tối ưu nào.
Cảm ơn Hiếu, có thể một số trang update Wordpress bản 6.1 lỗi nữa thì phải. Bản 6.1 đang bị lỗi đó Hiếu
Lỗi gì thế bạn? WordPress 6.1 làm lỗi Google AdSense à?
Một số trang bị lỗi thôi Hiếu, chắc do xung đột plugin và php nữa,
Các lỗi mình thấy mọi người hay gặp như lỗi trắng trang, thông báo lỗi nghiêm trọng, lỗi 500 Internal Error
Web mình thì lỗi nghiêm trọng khi vào new/edit bài biết, nhưng tắt cái Rank Math Seo Pro là dc
Hiếu còn cung cấp dv hosting chứ?
Nếu thế thì là do các plugin hoặc theme quá cũ, chưa tương thích với phiên bản WordPress mới rồi. Bạn nên update theme, plugin lên phiên bản mới nhất xem sao. Bên mình vẫn đang cung cấp dịch vụ WordPress Hosting bình thường nhé.
Cảm ơn đồng hương, vậy giữa tháng này hết hạn gói cũ thì mình chuyển sang gói small bên Hiếu.
Okie bạn. Luôn rộng cửa chào đón. :)
Này chỉ áp dụng cho Litespeed thôi à bạn. WP Rocket làm được không nhỉ
Hình như WP Rocket không có bạn ạ. Mình bỏ WP Rocket chuyển qua dùng LiteSpeed Cache lâu lắm rồi nên cũng không rõ lắm. Trước đây thấy WP Rocket có hỗ trợ lưu trữ script của Google Analytics thôi.