Loại bỏ CSS không sử dụng trong WordPress: nói dễ hơn làm

Khi bạn phân tích trang thông qua công cụ Google PageSpeed Insights, bạn có thể thấy lỗi như thế này về “Loại bỏ CSS không sử dụng / Remove unsued CSS”:

CSS không sử dụng

Tạm dịch phần chụp màn hình phía trên: Loại bỏ các quy tắc không dùng đến trong CSS và trì hoãn tải CSS không sử dụng trong màn hình đầu tiên để giảm dữ liệu tiêu thụ bởi hoạt động mạng.

Xem xét việc giảm hoặc chuyển đổi số lượng các plugin WordPress tải CSS không sử dụng trong trang của bạn. Để xác định plugin nào đang thêm CSS không liên quan, bạn hãy thử chạy code coverage trong Chrome DevTools. Bạn có thể xác định được theme/plugin tương ứng từ URL của CSS. Để ý đến các plugin có nhiều CSS trong danh sách được đánh dấu đỏ trong code coverage. Một plugin chỉ nên gọi ra CSS nào đấy nếu nó thực sự được sử dụng trên trang.

OK. Vậy plugin nào có thể giúp tôi loại bỏ CSS không sử dụng?!

À vâng, chuyện này không dễ đâu ạ.

CSS không sử dụng là gì?

Người lập trình viết giao diện theo cách nó cần có khả năng hỗ trợ được cho hầu kết các kiểu website như blog, WooCommerce (trang thương mại điện tử), diễn đàn, vân vân.

Tất cả các kiểu website này có thể yêu cầu một số thành phần HTML (với các biến thể của riêng chúng), chẳng hạn như:

  • Typography (kiểu chữ)
  • Icons
  • Bảng biểu
  • Form và Nút bấm (button)
  • Widgets (ví dụ bài viết gần đây, bài xem nhiều, lượt xem, dự báo thời tiết)
  • Thanh điều hướng (navigation bar)
  • WooCommerce
  • Hộp tác giả (thường ở cuối bài viết để cung cấp thêm thông tin về tác giả bài viết)
  • Thanh tìm kiếm (mặc định của WP hoặc plugin hoặc app của bên thứ ba như Google)
  • Bình luận
  • Galleries (cho ảnh)
  • Các nút mạng xã hội (như nút like, share)

Danh sách này cứ kéo dài mãi…

99% thời gian, các nhà phát triển giao diện viết mọi mã CSS họ cần vào trong file duy nhất có tên style.css. Dù bạn có sử dụng hay không, người dùng của bạn sẽ phải nhận CSS áp dụng cho tất cả các phần tử (element).

Nếu bạn không sử dụng tất cả các phần tử này thì sao?

Trong blog của tôi, tôi không cần WooCommerce, bình luận (vì tôi sử dụng ứng dụng của bên thứ ba là Disqus), và nhiều thành phần tương tự khác. Ngoài ra, một số thành phần như bảng, form, hộp tác giả, nút chia sẻ chỉ cần trong trang dạng bài post, không cần thiết trong trang chủ.

Vâng, đây chính là “CSS không sử dụng“.

P/S: Không chỉ có các giao diện, các plugin cũng có thể chèn (injecting) nhiều CSS bên ngoài vào.

Tại sao việc loại bỏ CSS không sử dụng lại rất khó?

Các class động

Bạn có thể nghe nói về critical CSS. Nó là những CSS quan trọng cần thiết cho việc render nội dung thuộc màn hình đầu tiên (above the fold). Phần CSS còn lại sẽ được tải trong chân trang (footer) để loại bỏ CSS chặn hiển thị. Có một số công cụ và plugin giúp trích xuất critical CSS trong WordPress.

Dù vậy thì việc trích xuất “CSS không sử dụng” không dễ dàng như việc trích xuất critical CSS. Lý do nằm ở chỗ file JS có thể chèn thêm class CSS khi có thao tác click vào button hoặc hành động tương tác nào đó.

Khi bạn thử click vào icon tìm kiếm trên phần đầu blog của tôi (trang WP Speed Matters – tác giả gốc bài viết này), một div và class mới sẽ được chèn thêm vào bằng JavaScript.

CSS và class động

Class CSS cần thiết cho các hiệu ứng này nằm trong JavaScript và rất khó để tìm thấy tên những class đó. Trường hợp tương tự cũng xảy ra với trang giỏ hàng (cart page), các trang bắt buộc phải đăng nhập (account restricted pages), vân vân.

Phương pháp tách mã (code-splitting)

Một cách tiếp cận để làm giảm CSS không sử dụng trong giao diện đó là chia file CSS lớn style.css thành nhiều file nhỏ như base.css, form.css, typography.css, table.css, comment.css, vân vân và chèn các file cần thiết trong các trang tương ứng (tức là trang A cần CSS nào thì chèn CSS đó vào, các trang B không cần thì không chèn).

Việc chia nhỏ tệp CSS như thế không khó khăn gì, tuy nhiên để biết được trang nào sử dụng mã CSS nào là vô cùng khó khăn trong WordPress. Nguyên nhân là vì có nhiều plugin khác, nhiều phần tử HTML tùy chỉnh có thể sử dụng nó.

Plugin chèn CSS vào trang không cần thiết/mong muốn

Một số người viết plugin chèn tất cả file CSS và JS vào các trang không cần sử dụng chúng!

Một ví dụ tiêu biểu là plugin Contact Form 7. Nó chèn các file CSS và JS vào tất cả các trang mà không quan tâm đến việc liệu trang có bao gồm form nó tạo ra hay là không. Nhưng có một số plugin làm điều này khôn ngoan hơn, chẳng hạn như WP Forms.

Người lập trình thật lười biếng đúng không?!

Nhưng thậm chí nếu người viết plugin chèn nó vào tất cả mọi nơi, có một số cách loại bỏ chúng trên các trang không cần thiết. Chúng ta sẽ tìm hiểu điều đó ngay sau đây.

Liệu “CSS không sử dụng” có phải là số liệu phù phiếm trong Google PageSpeed?

Trong WordPress, loại bỏ 100% CSS không sử dụng là cực kỳ khó khăn (mặc dù không phải là không thể được).

Điều này chỉ có khả năng nếu bạn để ý xây dựng website ngay từ lúc ban đầu (kể cả khi bạn sử dụng các thư viện CSS như Bootstrap hoặc Tailwind). Có một số công cụ như Purge CSS có thể giúp bạn “purge / thanh lọc” CSS trong quá trình xây dựng này. Rất dễ để cài đặt nó.

Dưới đây là một số website không có CSS không sử dụng:

Làm thế nào để loại bỏ CSS không sử dụng trong WordPress?

Các công cụ để tìm CSS sử dụng/không sử dụng

Mặc dù chúng có thể giúp bạn tìm các CSS “không sử dụng” hoặc loại bỏ CSS “không sử dụng”, nó có thể không hiệu quả với tất cả các trang vì lý do “class động” mà tôi đã đề cập ở trên.

Nếu website của bạn phần lớn là nội dung tĩnh và không bao gồm nhiều phần di chuyển thông qua hành vi click button, bạn có thể thử các công cụ trên.

Sử dụng Unused-css.com

Unused-css.com là một công cụ khác có thể dùng để trích xuất css không sử dụng từ website. Công cụ này tỏ ra thông minh hơn các công cụ bên trên. Unused-css quét các file JavaScript của bạn để xem có bất kỳ class nào được chèn vào hay không, điều này giúp khắc phục vấn đề “class động” mà tôi đã đề cập ở trên.

unused-css.com đáng tin cậy đến mức nào?

Trong trường hợp của tôi, nó đã bỏ lỡ nhiều class CSS trong các file JS. Ngoài ra, các tính năng kiểm tra theo lịch trình, tải xuống CSS sử dụng, vân vân có giá đến 25$/tháng và họ không hỗ trợ các vấn đề mà tôi gặp phải. Vì thế cuối cùng tôi không dùng dịch vụ của họ.

Nhưng đó là trường hợp của tôi, nếu bạn muốn loại bỏ 100% CSS không sử dụng, hãy dùng thử xem thế nào!

Một khi bạn xuất CSS “sử dụng”, tạo một child theme, thêm CSS vừa xuất này và loại bỏ tất cả CSS còn lại!

Cách tiếp cận tốt hơn, đáng tin cậy hơn để loại bỏ CSS không sử dụng trọng WordPress

Loại bỏ 100% CSS không sử dụng là điều gần như không thể trong WordPress. Dù vậy thì bạn có thể giảm bớt và tối thiểu hóa ảnh hưởng của nó bằng một số kỹ thuật.

Dưới đây là các bước tôi áp dụng:

1. Phân tích các file CSS không sử dụng

Trước tiên, bạn cần phân tích trang để xem file cụ thể nào có khả năng là CSS không sử dụng nhất với trang tương ứng.

Lưu ý: Để làm điều này dễ dàng hơn bạn nên tắt chế độ gộp CSS (ngược lại cách plugin Autoptimize thường làm).

Mở Chrome Dev tools > Coverage.

CSS coverage

Click vào “Start Instrumenting coverage and reload page” và bạn sẽ nhận được báo cáo tương tự như thế này:

CSS không sử dụng qua báo cáo của Coverage trên Chrome

Bạn có thể click vào từng file và xem các đoạn mã nào được sử dụng và không sử dụng.

2. Sử dụng plugin Asset CleanUp để loại bỏ các file CSS không sử dụng

Plugin Asser CleanUp giúp bạn chặn tải các file từ plugin và giao diện trên các trang cụ thể (hoặc dựa vào kiểu trang).

Plugin Asser CleanUp

Ví dụ, tôi không cần tải các file từ Contact Form 7 cho trang chủ. Tương tự, loại bỏ tuần tự từng file mà bạn nghĩ rằng không cần thiết.

Đảm bảo là bạn kiểm tra kỹ lại sau khi làm để tránh bất kỳ sai sót nào (sai sót ở đây có nghĩa là có thể bạn tắt nhầm file CSS cần thiết và hậu quả là trang sẽ trông lộn xộn!).

3. Tạo critical CSS

Critical CSS là CSS quan trọng cần thiết cho việc render nội dung thuộc màn hình đầu tiên của trang. Điều này được khuyến khích để cải thiện FCP (First Contentful Paint) và FMP (First Meaningful Paint).

Tạo critical CSS dễ dàng hơn nhiều so với tạo CSS “sử dụng”. Có một số plugin giúp bạn làm điều này.

Plugin ưa thích của tôi là WP-Rocket. Bạn có thể tìm hiểu kỹ hơn về critical CSS trong hai bài tương ứng tôi dẫn ở phần đầu.

P/S: Plugin LiteSpeed Cache hoặc Autoptimize cũng có khả năng tạo được critical CSS.

4. Sử dụng CDN để phân phối file CSS

CDN có thể giúp giảm đáng kể độ trễ của mạng và thời gian tải các file CSS (không chỉ CSS, mà còn bao gồm bất kỳ file tĩnh nào). Dù cho CSS không sử dụng của bạn là 100 KB hay 500 KB, CDN có thể phân phối nó trong vòng chưa đầy 50ms.

Một trong các CDN ưa thích của tôi là BunnyCDN.

Kết luận

Loại bỏ hoàn toàn từng bit CSS không sử dụng phải nói là gần như không thể trong WordPress.

Nhưng với các bước trên, bạn có thể giảm ảnh hưởng của CSS không sử dụng với tỷ lệ tốt và cải thiện thời gian tải trang cũng như trải nghiệm người dùng.

Nếu bạn có thể cải thiện FCP, FMP và TTI (Time to Interactive), Google PageSpeed Insights cũng sẽ ngừng cảnh báo các lỗi này. Hãy xem trang của tôi trên di động (trên máy bàn, lỗi này hầu như không bao giờ xuất hiện):

điểm Google Speed Insights trên di động

(Dịch từ bài viết: The Tale of Removing Unused CSS from WordPress, tác giả: Gijo Varghese, website: WPSpeedMatters)

Ý kiến của người dịch: Vậy là qua bài viết này, ý tưởng loại bỏ hoàn toàn CSS không sử dụng gần như là bất khả thi, bạn cùng lắm chỉ hạn chế được hiện tượng này. Và nếu triển khai theo phương án tách mã, bạn sẽ phải hy sinh phần nào lợi ích của việc gộp mã lại thành một file duy nhất, tất nhiên trong bối cảnh có http/2 việc này có thể không ảnh hưởng gì. Và dù sao bạn cũng có thể tách mã chỉ khi kiểm tra CSS không sử dụng thôi, sau khi hoàn thành xong bạn có thể gộp lại cũng được.

Cách duy nhất để không phải lo lắng chút nào về CSS không sử dụng, critical CSS, CSS chặn hiển thị, JS chặn hiển thị, jQuery đó là tự thiết kế theme của bạn ngay từ lúc ban đầu, và sử dụng plugin vô cùng khéo léo (biết chọn các plugin không chèn CSS vô tội vạ). Tuy nhiên đây chẳng phải là chuyện có thể làm một sớm một chiều. Bạn cần thời gian không nhỏ để làm được việc này một cách tinh tế.

Leave a Comment