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

Plugin Perfmatters và Gonzales: không nổi tiếng nhưng xắt ra miếng

loại bỏ tài nguyên không dùng đến

Tôi biết đến 2 plugin tối ưu hóa này khá muộn, cỡ năm năm sau khi dùng WordPress và hai năm chú ý đến tốc độ và hiệu suất website.

Về cơ bản thì hai plugin có chức năng chính tương tự nhau: loại bỏ CSS và JS dư thừa trên trang. Chỉ là Perfmatters hay được biết đến và có nhiều chức năng râu ria hơn mà thôi, tôi nghe nói Gonzales mới là plugin triển khai ý tưởng này đầu tiên.

Gonzales mới là ý tưởng gốc
Trong cuộc thăm dò ý kiến trên group WPSpeedMatters, một thành viên hỏi mọi người vote cho Perfmatters hay Asset Clean Up Pro (không có Gonzales trong danh sách ứng cử viên). Anh Gulshan Kumar mới nhắc nhở mọi người rằng Gonzales đã tạo ra ý tưởng này từ năm 2015 rồi cơ.

Nếu kiểm tra bằng Google PageSpeed Insights một lỗi mà rất nhiều trang WordPress mắc phải là CSS và JS không dùng đến.

CSS và JS không dùng đến

Nó làm chậm trang vì người dùng vẫn phải tải nó về, phân tích cú pháp nhưng trang lại chẳng dùng- hệt như chuyện bạn có máy hút bụi mà cả 12 tháng không dùng đến nhưng vẫn không chịu cất lên kho gác xép cho đỡ chật chội.

Nguyên nhân một phần do theme, và chủ yếu là do plugin.

Nếu bạn sử dụng theme được tối ưu, viết mã cẩn thận, nắn nót thì vấn đề do theme hầu như không bao giờ xảy ra (thử GeneratePress mà xem).

Plugin thì lại khác: Website của bạn chỉ dùng một theme, và thường ổn định trong thời gian dài, còn plugin có thể lên đến 20 – 30 cái và thường xuyên thay đổi. Đâm ra rất khó để bạn chọn được plugin tối ưu, bạn sẽ gặp cả vấn đề về chi phí và kiến thức. Vì chọn được plugin tốt cần cả hai thứ đó- vốn chẳng phải là thứ khắc phục được trong một sớm, một chiều.


Tại sao plugin lại là vấn đề?

Điểm mạnh nhất của WordPress là plugin, các chức năng của website được bổ sung thông qua plugin thay vì một gói trọn bộ cứng như bê tông lúc ban đầu. Điều này làm cho nó có tính cơ động, mềm dẻo hơn rất nhiều.

Nhưng đây cũng là điểm yếu của nó nếu nhìn ở khía cạnh khác. Các rắc rối đi kèm bao gồm:

  • Quá nhiều lựa chọn: sự phổ biến của WordPress làm cho bạn với bất kỳ tính năng nào cũng có ít nhất vài plugin để chọn, còn thường thì lên đến cả tá (đôi khi là vài tá). Quá nhiều lựa chọn sẽ làm bạn căng thẳng & mất thời gian, dĩ nhiên rồi, ông nào cũng sẽ bảo mình hay mình tốt, biết chọn ai bây giờ. Không tin à? có hẳn một cuốn sách viết về điều đó: Nghịch Lý Của Sự Lựa Chọn của tác giả Barry Schwartz;
  • Chất lượng không đồng đều: thượng vàng hạ cám đều có đủ, người dùng thường dựa vào cơ chế đánh giá có sẵn của cộng đồng (xem số sao + lượt tải) và chi phí phải bỏ ra để ước chừng chất lượng của nó. Điều này có ích, thường đem lại kết quả khả quan, nhưng vẫn có nhiều trường hợp không đem đến điều mong đợi. Vì suy cho cùng mỗi website như một con người có nhu cầu rất riêng. Đâu phải cứ nhà mặt phố, điện thoại Vertu, xe phân khối lớn là bạn thích đâu (dù chắc chắn là rất nhiều người thích), có thể bạn lại thích nhà ở quê, điện thoại iPhone và xe dưới 50cc (đỡ phải lấy bằng) thì sao!

Một thực tế không hay là nhiều plugin không chú ý đến hiệu suất, vì làm điều đó chắc chắn buộc ông / bà lập trình phải viết code cẩn thận hơn rất nhiều.

Vấn đề thường gặp với các plugin như vậy là họ chèn CSS và JS ở tất cả các trang, không cần biết là trang đó có dùng đến tính năng họ đang cung cấp hay không.

Ví dụ điển hình trong chuyện dư thừa CSS, JS mà nhiều người có thể đang cài, đó là plugin Contact Form 7. Bạn thường chỉ cần tính năng này trên một vài trang cho mục đích liên hệ, nhưng CF7 đẩy CSS và JS trên tất cả các trang khác, cái này chính là nguyên nhân gây tình trạng JS, CSS không dùng chủ yếu nhất.


Perfmatters và Gonzales nhảy vào cuộc chơi

Hai plugin này chữa cháy cho bạn bằng cách vô hiệu hóa các plugin, CSS, JS không dùng đến trên trang không cần dùng, cơ chế đơn giản vậy thôi.

Có 3 lựa chọn khi thực hiện vô hiệu hóa:

  • Vô hiệu hóa chỉ trên URL bạn đang thao tác;
  • Vô hiệu hóa trên tất cả các trang (có thể kèm thêm tùy chọn là trừ URL bạn đang thao tác);
  • Sử dụng Regex cho bạn các tùy chọn phong phú hơn, đỡ mất công thao tác, nhưng bạn cần tìm hiểu cẩn thận cú pháp của nó. Lúc nào thích hợp tôi sẽ viết một bài riêng.

Chúng ta cần lựa chọn chức năng và plugin thông minh hơn!

Sử dụng tính năng và plugin không tính toán cẩn thận khiến bạn phải trả một cái giá rất lớn. Đôi khi chỉ vì một vài thứ hoa lá cành mà chúng ta làm toàn bộ trang gánh thêm sức nặng không cần thiết.

Một quy trình tốt hơn nên được tiến hành như thế này:

  • Chọn thật cẩn thận theme cho trang, để nó nhẹ nhàng ngay từ ban đầu;
  • Xác định thật rõ ràng chức năng trang cần, mức độ quan trọng của từng cái, và cái nào có thể lược bỏ;
  • Phân biệt chức năng nào dùng trên tất cả các trang (ví dụ như bài viết liên quan, bình luận), chức năng nào chỉ dùng trên một số ít trang (ví dụ như form liên hệ, một bài quiz);
  • Lựa chọn cẩn thận plugin. Trong một nhóm plugin cùng chức năng, luôn có plugin nhanh hơn các cái khác, thậm chí có plugin được thiết kế với sự để ý cao độ đến tốc độ (thường là có phí, ví dụ plugin share lên mạng xã hội có tên novashare).
  • Không dễ với bất cứ ai khi phải mua cả tá plugin chất lượng cao, nhưng hãy luôn cân nhắc đầu tư khi có thể, vì lợi ích đem lại về lâu dài thường lớn hơn chi phí phải bỏ ra rất nhiều, nhất là với trang có nguồn thu (ví dụ cài adsense, trang bán hàng).

Bảng so sánh giữa Perfmatters vs Gonzales

Perfmatters Gonzales
Tác giả Brian Jackson vs Brett Jackson Tomasz Dobrzyński
Chức năng chính Vô hiệu hóa CSS, JS dư thừa Vô hiệu hóa CSS, JS dư thừa
Chức năng phụ Nhiều, nhưng có thể không quan trọng với một số người Không có
Giá cho 1 site/năm 24,95 $ 29 $
Giá không giới hạn site/năm 124,95 $ 199 $
Chức năng chính của 2 trang có giao diện rất giống nhau. Perfmatters có tài liệu hướng dẫn tốt hơn, nhưng chủ yếu là vì họ có nhiều chức năng phụ cần giải thích rõ. So sánh giá dựa vào bảng giá công khai vào tháng 6/2020

Vậy bạn nên chọn plugin nào?

Khó trả lời ghê, Perfmatters nhiều tính năng lại rẻ hơn chút, nhưng Gonzales mới là ý tưởng gốc, lại đơn giản, dùng không phải đọc nhiều tài liệu. Về chất lượng tôi thấy ngang nhau. Nhiều chức năng râu ria mà Perfmatters đưa ra thường được các plugin cài trước đó giải quyết hầu hết rồi, đặc biệt là các plugin cache.

PS: cá nhân tôi cuối cùng chọn Perfmatters, vì hoá ra các chức năng râu ria có họ thú vị ra phết. Lưu ý cuối cùng là để loại bỏ CSS, JS không dùng một cách hiệu quả, bạn nên bỏ tính năng gộp & nén CSS, JS. Với công nghệ của http/2 & lợi ích của cache trình duyệt, bỏ gộp nén có khả năng cao có lợi hơn cho bạn.

Comments are closed.

Back to Top