Giải thích các tùy chọn của plugin perfmatters (phần 5)

Bạn tham khảo phần 4 của chuỗi bài viết giới thiệu plugin perfmatters ở link vừa dẫn.

1. CDN rewrite

Tùy chọn CDN rewrite cho phép bạn sử dụng dễ dàng dịch vụ CDN của bên thứ ba trên trang WordPress. Chẳng hạn như:

Để bật CDN rewriting, bạn chỉ cần click vào khu vực setting của perfmatters, tiếp đến chọn tab CDN, và bật “Enable CDN Rewrite”. Cần đảm bảo là bạn đã thiết đặt địa chỉ CDN của website.

Bật Enable CDN rewrite
Bật Enable CDN rewrite

P/S: Tính năng CDN rewrite thường cũng được tích hợp sẵn trên nhiều plugin cache như WP Rocket, LiteSpeed, WP Super Cache. Nên nếu bạn đã bật tính năng này ở plugin cache rồi thì phân này nên bỏ trống. Ngoài ra WordPress có plugin chuyên để làm nhiệm vụ CDN rewrite mà tôi thấy thích, đó là CDN Enabler, tôi thường dùng nó kèm với Cache Enabler.

2. Password strength meter

Trình kiểm tra độ mạnh của mật khẩu được giới thiệu và tích hợp trong các phiên bản gần đây của WooCommerce và WordPress, đây là công cụ bắt buộc người dùng phải sử dụng mật khẩu mạnh. Nó tải các file sau:

  • /wp-includes/js/zxcvbn.min.js (cái có kích cỡ xấp xỉ 400KB)
  • /wp-admin/js/password-strength-meter.min.js

Nếu bạn sử dụng WooCommerce, file trên đôi khi cũng được đặt ở đây: /wp-content/plugins/woocommerce/assets/js/frontend/password-strength-meter.min.js

Phụ thuộc vào theme và cách lập trình viên enqueue mọi thứ, chúng tôi để ý thấy đôi khi các file này tải trên toàn bộ trang WordPress. Vì lý do hiệu suất, nó chỉ nên tải trên các trang “account/tài khoản”, “checkout/thanh toán”, và “password reset/đặt lại mật khẩu”.

Vô hiệu hóa trình kiểm tra độ mạnh mật khẩu

Để loại bỏ đoạn mã của trình kiểm tra độ mạnh mật khẩu trên các trang không liên quan, bạn chỉ cần click vào khu vực setting và bật tùy chọn “Disable Password Strength Meter” như hình bên dưới:

Vô hiệu hóa password strength meter trong WordPress

Sửa lỗi, giải quyết rắc rối liên quan đến Disable Password Strength Meter

Nếu bạn đã vô hiệu hóa trình kiểm tra độ mạnh của mật khẩu và vẫn thấy các đoạn mã tải về, điều đó có khả năng cao là do giao diện WordPress của bạn. Lấy ví dụ, nếu bạn có một liên kết đăng nhập thực hiện bằng cách bật popup, lập trình viên thường tải script của form trong phần chân trang. Điều đó có nghĩa là mọi trang trên trang thương mại điện tử của bạn về mặt kỹ thuật được coi là một trang tài khoản, và vì thế đoạn mã kiểm tra độ mạnh được tải trên trên tất cả các trang.

Dưới đây là một số giải pháp:

  1. Nếu giao diện WordPress của bạn có tùy chọn vô hiệu hóa form đăng nhập kiểu popup và thay bằng một trang đăng nhập riêng thì bạn hãy làm ngay, điều này thường là cách giải quyết dễ nhất.
  2. Bạn có thể yêu cầu người phát triển giao diện sử dụng một số thứ như AJAX, nhờ thế mà các đoạn mã của form đăng nhập chỉ tải về khi nó được click. Kết quả là không phải mọi trang trên website của bạn sẽ tải về các mã dành cho trang đăng nhập/tài khoản.

3. Vô hiệu hóa Google Fonts

Google Fonts là dịch vụ tuyệt vời, nhưng có một số kịch bản mà sẽ tốt hơn khi bạn vô hiệu hóa Google Fonts. Dưới đây là một số lý giải cho nhận định đó:

  • Bạn muốn chuyển sang dùng font chữ hệ thống và giao diện WordPress của bạn không có sẵn tùy chọn vô hiệu hóa Google fonts.
  • Bạn muốn tự host Google font trên hosting riêng của bạn.
  • Bạn muốn sử dụng dịch vụ font tùy chỉnh cao cấp thay vì dùng Google fonts.

Cách vô hiệu hóa Google fonts trong WordPress

Để vô hiệu hóa Google fonts bạn click vào phần cài đặt của Perfmatters và bật tùy chọn “Disable Google Fonts”.

Vô hiệu hóa Google fonts
Vô hiệu hóa Google fonts

Giải quyết rắc rối khi vô hiệu hóa Google fonts

Nếu bạn vẫn thấy Google fonts tải về sau khi bật tính năng vô hiệu hóa thì bạn nên làm gì? Điều này có khả năng cao là do giao diện WordPress hoặc plugin từ bên thứ ba. Tính năng trên chỉ hoạt động nếu font được enqueue chính xác trong WordPress. Nếu chúng được tải theo cách khác, bạn sẽ cần liên hệ với nhà phát triển giao diện hoặc plugin để hỏi họ cách loại bỏ fonts.

4. Tự pingbacks

Pingback về cơ bản là một bình luận tự động được tạo ra khi một blog khác link đến trang của bạn. Tự pingbak được tạo ra khi bạn liên kết đến một bài viết trong chính blog của bạn. Pingbacks về cơ bản không khác gì spam và đơn giản là làm lãng phí tài nguyên.

Bạn có thể dễ dàng loại bỏ chúng trong plugin perfmatters bằng cách bật tùy chọn “Disable Self Pingbacks”.

Vô hiệu hóa việc tự pingbacks
Vô hiệu hóa việc tự pingbacks

5. Bổ sung mã vào header, body và footer

Sẽ có những thời điểm mà bạn cần thêm mã tùy chỉnh vào header, body hoặc footer của trang WordPress. Một ví dụ tốt đó chính là favicon của bạn. Chúng tôi luôn luôn khuyến khích bạn tải favicon từ dịch vụ CDN, và với hầu hết các giao diện, bạn sẽ phải chỉ định điều này theo cách thủ công.

Trên trang web của chúng tôi, chúng tôi tải đoạn mã sau trong header:

<link rel="icon" href="https://cdn.perfmatters.io/wp-content/uploads/2017/08/favicon.png" type="image/x-icon" />

Với plugin Perfmatters, bạn có thể dễ dàng thực hiện bất kỳ đoạn mã tùy chỉnh nào để đưa vào header, body và footer.

Các kiểu mã nào được chấp nhận?

Các hộp dưới đây trực tiếp đẩy mã vào trong front-end, vì thế nó cần là đoạn HTML hợp lệ. Điều này có thể bao gồm CSS nội tuyến bên trong các thẻ <style> hoặc JS nội tuyến bên trong các thẻ <script>. Bạn cũng có thể tải file CSS hoặc JS.

Các hộp này không chấp nhận ngôn ngữ phía máy chủ, chẳng hạn như PHP. Để bổ sung đoạn mã PHP tùy chỉnh, chúng tôi luôn luôn khuyến khích bạn sử dụng plugin Code Snippets.

Cách thêm mã vào phần header của WordPress

Bạn có thể thêm mã vào phần header của WordPress bằng cách đi vào phần “Settings → Perfmatters → Extras” trong bảng điều khiển admin của WordPress.

Cuộn chuột xuống phần “Add Header Code.”

Thêm mã vào phần head của WordPress
Thêm mã vào phần head của WordPress

Đoạn mã được thêm vào ở đây sẽ được sao chép y nguyên vào khu vực:

<head> </head>

trên tất cả các trang của website.

Cách thêm mã vào phần body của WordPress

Bạn có thể thêm mã vào phần body của WordPress bằng cách đi vào phần “Settings → Perfmatters → Extras” trong bảng điều khiển admin của WordPress.

Cuộn chuột xuống phần “Add Body Code.”

Thêm mã vào phần body của WordPress
Thêm mã vào phần body của WordPress

Đoạn mã được thêm vào ở đây sẽ được sao chép y nguyên bên dưới thẻ mở <body> trên tất cả các trang trên website.

Lưu ý: Hộp trên chỉ được hỗ trợ và hiển thị trên WordPress 5.2 hoặc cao hơn.

Cách thêm mã vào phần footer của WordPress

Bạn có thể thêm mã vào phần footer của WordPress bằng cách đi vào phần “Settings → Perfmatters → Extras” trong bảng điều khiển admin của WordPress.

Cuộn chuột xuống phần “Add Footer Code.”

Thêm mã vào phần body của WordPress
Thêm mã vào phần footer của WordPress

Đoạn mã được thêm vào ở đây sẽ được sao chép y nguyên bên trên thẻ đóng </body> trên tất cả các trang trên website.

PS: Một plugin tương tự có chất lượng tốt để thực hiện nhiệm vụ này là Insert Headers and Footers.

6. Blank favicon

Nếu bạn thường xuyên kiểm tra điểm chuẩn (benchmarking) của trang WordPress mới, đặc biệt là trang vừa mới cài đặt, bạn có thể bắt gặp than phiền về việc thiếu favicon làm xuất hiện lỗi 404 trong các công cụ kiểm tra tốc độ.

Nhưng chúng tôi có tin tốt cho bạn! Nếu bạn đã cài đặt plugin perfmatters như một phần của quy trình làm việc thông thường, chúng tôi có tùy chọn đơn giản để tạo ra favicon kiểu blank trên trang của bạn chỉ cần dùng mã mà thôi. Bạn có thể tìm hiểu thêm về vấn đề này trong bài viết chuyên sâu về cách tạo blank favicon thủ công.

Thêm blank favicon

Để thêm blank favicon bạn chỉ cần click vào phần setting của perfmatters, click tiếp vào tab “Extras”, và bật tùy chọn “Add Blank Favicon”.

Tạo blank favicon
Tạo blank favicon

Thao tác này sẽ tạo tự động đoạn mã dưới đây và đưa nó vào phần header của trang WordPress để sửa lỗi 404:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

Bạn có thể xem tiếp phần 6 ở đây.

Leave a Comment