Bạn muốn xóa CSS không dùng trong WordPress và làm trang web nhanh hơn?
Mục tiêu chính của tối ưu hóa trang web là loại bỏ code không cần thiết. Điều này giảm tổng dung lượng trang và dẫn đến tải trang nhanh hơn, trải nghiệm người dùng tốt hơn.
Một lĩnh vực có thể giảm dung lượng trang web đáng kể là styling (phong cách). Styling trang web được kiểm soát qua ngôn ngữ dựa trên quy tắc gọi là Cascading Style Sheets (CSS), một trong những khối xây dựng cốt lõi của World Wide Web cùng HTML và Javascript.
Thường viết tắt là CSS, stylesheet dùng để định nghĩa màu trang, font, nền, styling hình ảnh, margin, padding, và hơn thế nữa. Trong ví dụ dưới, code CSS đảm bảo tiêu đề căn giữa và hiển thị màu đỏ.
h1 { text-align: center; color: red; }Một trang WordPress điển hình sẽ cần nhiều stylesheet để hiển thị trang đúng. Ngoài CSS dùng trong WordPress core, lời gọi CSS được thực hiện bởi theme và plugin WordPress đã kích hoạt. Do đó, trang WordPress có thể cần một chục tệp CSS để styling đúng.
Cascading Style Sheets có thể làm tăng thời gian tải trang nếu tệp quá lớn hoặc quá nhiều tệp CSS được gọi. Một số kỹ thuật có thể dùng để giải quyết như Defer (Trì hoãn), Minify (Rút gọn), và Combine (Kết hợp).
Dưới đây là tóm tắt các kỹ thuật này.
| Kỹ Thuật Tối Ưu CSS | Cách Dùng |
|---|---|
| Defer | Trì hoãn thực thi tệp CSS không quan trọng cho đến khi trang đã tải xong |
| Minify | Xóa khoảng trắng, tab, xuống dòng, và comment |
| Combine | Giảm tổng số yêu cầu HTTP bằng cách gộp nhiều tệp CSS thành một |
Nếu muốn giảm trọng lượng CSS hơn nữa, tôi khuyên xóa quy tắc CSS không dùng trong WordPress để chỉ styling cần thiết được tải bởi người truy cập. Bằng cách ngăn trình duyệt tải code CSS không cần thiết, bạn có thể tăng tốc tải trang và mang lại trải nghiệm tốt hơn.
Hãy xem kỹ hơn về CSS không dùng và cách xóa code CSS không dùng khỏi trang WordPress.
CSS Không Dùng Trong WordPress Là Gì & Tại Sao Xảy Ra?
CSS không dùng (Unused CSS) là bất kỳ quy tắc CSS nào không được gọi trên trang hiện tại. Điều này xảy ra thường xuyên vì trang hiếm khi cần gọi mọi quy tắc CSS từ stylesheet. Ví dụ, stylesheet có quy tắc hiển thị tiêu đề màu đỏ, nhưng sẽ được phân loại là CSS không dùng nếu nó không thực sự được yêu cầu.
Vì trình duyệt không cần quy tắc CSS không dùng, code này làm tăng dung lượng tệp CSS một cách không cần thiết. Bạn do đó có thể cải thiện thời gian tải trang bằng cách xóa code CSS không dùng trong WordPress.
Theme WordPress bắt buộc dùng styles.css làm stylesheet chính, dù thường dùng stylesheet thêm cho font, skin theme, và yếu tố thiết kế khác. Nhiều quy tắc CSS trong tệp CSS theme chỉ cần trong tình huống cụ thể. Dù vậy, các tệp CSS này thường được tải trên mọi trang trang web.
Plugin WordPress đặc biệt tệ cho việc chèn CSS không dùng vào trang vì nhà phát triển thường tải stylesheet trên tất cả trang mặc định.
| Loại Plugin WordPress | Ví Dụ CSS Không Dùng |
|---|---|
| Page Builder | Chèn styling cho khối nội dung chưa dùng trên trang |
| Content Slider | Gọi stylesheet slider khắp trang web, dù chỉ cần trên trang chủ |
| Contact Form | Gọi stylesheet form khắp trang web, dù chỉ cần trang liên hệ |
Việc xóa CSS không dùng trong WordPress là thói quen tốt, nhưng nếu xóa code CSS quan trọng cho thiết kế trang web, thiết kế sẽ bị hỏng.
Critical CSS Là Gì?
Thuật ngữ khác bạn thường nghe là Critical CSS. Nó chỉ bất kỳ styling nào cần để hiển thị nội dung cho người dùng ngay lập tức mà không cần cuộn. Khu vực này gọi là Above the Fold (Trên gấp) và thời gian trình duyệt tải nội dung above the fold gọi là First Contentful Paint (FCP).
Google khuyến nghị Critical CSS được trích xuất, minify, và hiển thị inline trong phần tử HEAD để đảm bảo FCP tải nhanh. Defer có thể dùng để tải tệp CSS không quan trọng sau để đảm bảo tệp CSS kém quan trọng không làm chậm tải trang ban đầu.
Cách Tìm CSS Không Dùng
Cách nhanh khám phá CSS không dùng trên trang là nhập URL vào công cụ báo cáo hiệu suất như GTmetrix, Google PageSpeed Insights hoặc Pingdom Website Speed Test. Báo cáo sẽ làm nổi bật CSS không dùng và khuyên xóa hoặc trì hoãn quy tắc không dùng.
Trình duyệt hiện đại cung cấp công cụ phát triển giúp phân tích thiết kế và code trang web. Tùy chọn phát triển trong Google Chrome gọi là Chrome DevTools và tab Coverage có thể dùng tìm code Javascript và CSS không dùng. Đây là cách nhanh và hiệu quả tìm tệp CSS có nhiều quy tắc không dùng.
Để mở Chrome DevTools, chỉ cần chuột phải trên trang và chọn Inspect (Kiểm tra). Sau đó nhấp tab Coverage để thấy URL mỗi tệp và tệp là Javascript, CSS, hoặc cả hai. Bên phải, thấy tổng dung lượng tệp tính bằng byte và tổng byte không dùng. Thanh hình ảnh hiển thị code không dùng màu đỏ và code cần thiết màu xanh lam. Điều này được tóm tắt ở panel dưới, nhưng nếu nhấp vào tệp cụ thể, bạn sẽ thấy quy tắc CSS không dùng được làm nổi bật màu đỏ ở panel trên.
Xem trang Chrome Developers Coverage để biết thêm chi tiết Coverage tab hoạt động như thế nào.
Nhiều công cụ CSS không dùng miễn phí và trả phí khác có thể tìm thấy trực tuyến.
- JitBit Unused CSS tool – Dịch vụ miễn phí crawl mọi trang trang web và làm nổi bật CSS selector không dùng ở đâu
- PurifyCSS Online – Công cụ miễn phí hữu ích làm nổi bật code không dùng và cung cấp tệp CSS sạch
- UnusedCSS – Dịch vụ trả phí quét URL trang và cung cấp tệp CSS sạch không có code không cần thiết (giá từ $25/tháng)
Mặc dù công cụ như Chrome DevTools và PurifyCSS Online hữu ích xem quy tắc CSS không dùng trên trang web, chúng không luôn thực tế trong việc giải quyết CSS không dùng trên nền tảng động như WordPress.
Theme và plugin WordPress yêu cầu stylesheet khác nhau tải khắp trang web, do đó lượng CSS không dùng thay đổi từ trang sang trang. Đó là lý do tôi tin dùng plugin tối ưu WordPress để xóa (hoặc trì hoãn) CSS không dùng trong WordPress thường tốt hơn.
Hãy xem kỹ một số plugin WordPress hữu ích giúp xóa CSS không dùng khỏi trang web.
Xóa CSS Không Dùng Trong WordPress Dùng WP Rocket
WP Rocket là một trong giải pháp hiệu suất WordPress phổ biến nhất. Giấy phép WP Rocket có giá $49/năm.
Plugin có công cụ xóa tất cả CSS không dùng khỏi trang web chỉ với một cú nhấp. Trong nền tảng, WP Rocket xem xét tất cả stylesheet và script trên mỗi trang và khớp quy tắc CSS với CSS selector tìm thấy trong code HTML. Quá trình này thực hiện bên ngoài trên server WP Rocket, nên hãy chắc plugin bảo mật WordPress đã whitelist IP server của họ.
Vì WP Rocket tự động xóa tất cả code CSS không dùng, bạn có thể gặp trường hợp công cụ này làm hỏng phần thiết kế trang web như form liên hệ. Nếu xảy ra, thêm tệp CSS, ID hoặc class liên quan vào danh sách trắng (safelist) CSS của WP Rocket.
Đọc thêm: Cách dọn dẹp cơ sở dữ liệu WordPress
Xóa CSS Không Dùng Trong WordPress Dùng Perfmatters
Perfmatters là giải pháp tối ưu tôi dùng trên trang web để xóa code CSS không dùng. Đây là plugin WordPress premium chỉ $24,95/năm.
Với Script Manager của Perfmatters, bạn có thể bật/tắt tệp CSS và Javascript trên bài viết và trang cụ thể khắp trang web. Ngoại lệ có thể tạo cho loại trừ script dựa trên biểu thức chính quy, trạng thái đăng nhập, và loại thiết bị.
Tôi thấy plugin rất hiệu quả xử lý plugin WordPress tối ưu kém. Ví dụ Jetpack. Dù bạn không dùng module Jetpack nào cho frontend, nó vẫn tải tệp CSS 85,1 KB trên mọi trang. Như bạn thấy dưới, Perfmatters cho tôi ngăn tệp CSS không cần thiết này không bao giờ được tải.
Xóa CSS Không Dùng Trong WordPress Dùng Asset CleanUp
Một thay thế tuyệt vời cho Perfmatters là Asset CleanUp. Plugin miễn phí, tuy phiên bản premium có giá €42,08 mở khóa nhiều tính năng thêm.
CSS & Javascript manager của Asset CleanUp cho phép preload tệp và vô hiệu hóa tệp trên trang cụ thể khắp trang web. Ngoại lệ có thể tạo cho người dùng đã đăng nhập.
Nếu nâng cấp Asset CleanUp Pro, bạn có thêm kiểm soát nơi tệp CSS và Javascript tải trên trang web và thêm ngoại lệ cho kích thước màn hình và biểu thức chính quy.
Xóa Tệp CSS Không Dùng Dùng RapidLoad
Autoptimize là plugin tối ưu WordPress hiệu quả cho phép gộp, minify và cache CSS, Javascript và HTML. Plugin WordPress RapidLoad Power-Up mở rộng Autoptimize thêm bằng cách giúp xóa CSS không dùng trong WordPress.
Giống công cụ tối ưu CSS của WP Rocket, RapidLoad Power-Up giảm thời gian tải trang bằng cách kiểm tra quy tắc CSS nào thực sự cần thiết.
Như tên gợi ý, plugin dùng dịch vụ RapidLoad để giảm dung lượng tệp CSS. Do đó, bạn cần đăng ký dịch vụ RapidLoad để dùng RapidLoad Power-Up. Gói hàng tháng có giá $5,83/tháng.
Tóm Lại
Nhà phát triển không làm đủ để tối ưu stylesheet styling và định hình trang web. Bạn sẽ thấy nhiều theme và plugin WordPress tải tất cả quy tắc CSS khắp trang web, ngay khi quy tắc đó chỉ cần trên trang cụ thể.
Để xem bao nhiêu code CSS không dùng trên trang web của bạn, tôi khuyên chạy benchmark trên công cụ báo cáo hiệu suất như GTmetrix, Google PageSpeed Insights hoặc Pingdom Website Speed Test. Công cụ phát triển như Chrome DevTools và PurifyCSS Online cũng có thể dùng xem CSS thêm trọng lượng không cần thiết bao nhiêu cho trang.
May mắn thay, chúng ta có thể xóa CSS không dùng trong WordPress dùng một số giải pháp hiệu suất WordPress. Nếu thích tự động hóa, tôi khuyên dùng WP Rocket hoặc RapidLoad Power-Up. Những bạn thích cách tiếp cận hands-on (thực tế) bảo trì WordPress sẽ ưu tiên Perfmatters và Asset CleanUp vì plugin này cho kiểm soát hoàn toàn nơi tệp CSS và Javascript tải.
Lưu ý xóa code CSS quan trọng sẽ làm hỏng thiết kế trang web, nên hãy kiểm tra trang web thường xuyên đảm bảo mọi thứ hoạt động đúng.
Đọc thêm: Cách trì hoãn phân tích javascript trong WordPress
Chúc may mắn.
Kevin