Categories Tối ưu CSS Tối ưu JavaScript

Cách loại trừ ảnh hưởng xấu của mã CSS & JS dư thừa do Contact Form 7 chèn vào trên các trang không liên quan

Contact Form 7 (CF7) là plugin form rất phổ biến, chắc nhiều anh chị em đang dùng, tuy nhiên nó có nhược điểm về mặt hiệu suất, tốc độ đó là chèn CSS và JS trên tất cả các post, page dù trang đó có nhúng form hay không!

Nếu trang web của bạn có cài CF7 thì để kiểm tra vấn đề này bạn làm như sau.

Bạn tạm thời vô hiệu hóa tính năng gộp (combine) và minify JS và CSS (ví dụ của các plugin cache như LiteSpeed, WP-Rocket hoặc Autoptimize), việc này giúp bạn nhận diện các file dễ dàng hơn.

Tiếp đó trên trình duyệt Chrome, bạn vào một trang không có form của CF7, nhấn Ctrl + Shift + I > Network > Disable cache > JS rồi tải lại trang. Bạn sẽ thấy tất cả các file JS mà trang phải tải về.

Di chuột qua từng file JS bạn sẽ nhanh chóng nhận ra trang tải JS của CF7 về:

file JS của Contact Form 7

Nó nằm ở đường dẫn:

tên-miền-của-bạn.com/wp-content/plugins/contact-form-7/includes/js/scripts.js

và nặng khoảng 14KB.

Tương tự, CSS cũng vậy, nhưng may mắn hơn là CSS rất nhẹ chưa đến 1KB.

Vậy làm sao để loại được CSS và JS dư thừa này?

Cách đỡ tốn kém nhất là sử dụng plugin khác có cách chèn mã thông minh hơn (tức là chỉ chèn CSS & JS vào trang nào có form). Ví dụ như WPform.

Cách thứ hai, nếu vì lý do nào đó bạn vẫn phải xài Contact Form 7 thì có thể dùng plugin kiểu như Perfmatters để vô hiệu hóa CF7 trên các trang không liên quan.

Nên dùng tính năng vô hiệu hóa trên tất cả các trang (Disable > Everywhere) và chỉ bật trên những trang nào cần dùng bằng câu lệnh Regex.

Tính năng này sẽ tiện vì đa số chúng ta chỉ dùng form trên vài trang mà thôi. Cách làm như sau:

Trong đó page1 và page2 là đường dẫn (URL slug) của trang, ví dụ như:

(\/contact-us\/)

Tuy nhiên Perfmatters là plugin có phí. Anh chị em nào có giải pháp miễn phí với Contanct Form 7 không (mà không phải dùng plugin form khác)?

PS: tôi đăng câu hỏi lên nhóm WordPress Việt Nam, có người trả lời luôn, bạn nào không muốn dùng plugin để chặn JS & CSS của CF7 tải trên tất cả các trang có thể dùng giải pháp này: https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/

Comments are closed.

Back to Top