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”:
Tạm dịch phần chụp màn hình phía trên:
Loại bỏ các quy tắc/thuộc tính 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.
Bạn cần 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. Để 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 ạ.
#1. CSS không sử dụng là gì?
Người lập trình viết giao diện theo cách mà 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 hay Algolia)
- 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.
#2. 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 tiếng Anh), một div và class mới sẽ được chèn thêm vào bằng JavaScript.
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.
#3. 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 file 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ó.
#4. 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, vẫn 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.
#5. 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:
#6. 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
- Tìm các selector (bộ chọn) không sử dụng: https://www.jitbit.com/unusedcss/
- Tìm CSS không sử dụng: https://purifycss.online/
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!
#7. 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.
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:
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).
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!).
PS: hai plugin thương mại có tính năng tương tự là Perfmatters và Gonzales.
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.
PS: Plugin LiteSpeed Cache, Swift Peformance hoặc Autoptimize cũng có khả năng tạo critical CSS rất tốt.
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. Xem thêm: các dịch vụ CDN tốt cho WordPress.
#8. 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):
(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.
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ối ưu hoá khâu thiết kế theme của bạn ngay từ lúc ban đầu, và sử dụng plugin 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ế.
Comments are closed.