Dashicons là gì? Cách tối ưu, loại bỏ hoặc thay thế biểu tượng WordPress (Cập nhật 2025)

Dashicons là bộ icon mặc định của WordPress, được đóng gói dưới dạng webfont (WOFF/WOFF2/TTF/EOT) và được sử dụng chủ yếu ở khu vực quản trị (WP Admin) và một số thành phần giao diện do theme/plugin gọi ra. Từ góc độ hiệu năng, việc tải thêm một webfont biểu tượng có thể làm tăng số request, chặn hiển thị (render-blocking) và ảnh hưởng các chỉ số tốc độ như LCP, FCP.

Bài viết này giúp bạn hiểu rõ Dashicons, khi nào nên giữ, khi nào nên loại bỏ khỏi front-end, cũng như cách thay thế bằng SVG hoặc tối ưu để trang tải nhanh hơn.

Dashicons ảnh hưởng hiệu năng như thế nào?

• Tăng kích thước tải ban đầu: webfont Dashicons thường ~30–90 KB (tùy định dạng và nén), dễ thành “tài nguyên thừa” nếu front-end không dùng đến.
• Có thể render-blocking: Dashicons thường được gọi từ các style “core” và/hoặc plugin, làm trì hoãn vẽ nội dung nếu không cấu hình font-display và preload đúng cách.
• Tạo thêm request: nhiều site vừa tải WOFF2 vừa giữ WOFF/TTF/EOT cho trình duyệt cũ, tăng số lượng yêu cầu.

Khi tối ưu đúng, bạn có thể giảm 1–3 request và vài chục KB truyền tải cho khách truy cập chưa đăng nhập, cải thiện LCP/FCP đáng kể.

Cách kiểm tra website có đang tải Dashicons

• Dùng DevTools (Network): lọc theo “dashicons” để xem các file .css/.woff/.woff2/.ttf/.eot đang được tải.
• Google Lighthouse / PageSpeed Insights: xem mục Diagnostics/Opportunities liên quan đến webfont hoặc CSS chặn hiển thị.
• Tắt toàn bộ plugin tối ưu để “soi” nguồn gốc: theme core, plugin page builder, WooCommerce, forum, hoặc các tiện ích biểu tượng.

Mẹo: thử ở chế độ khách (ẩn danh) và ở trạng thái đăng nhập; nhiều site chỉ tải Dashicons cho người dùng đã đăng nhập.

Khi nào nên loại bỏ Dashicons khỏi front-end?

• Trang công khai không hiển thị icon Dashicons (đa số theme hiện đại dùng SVG/Font Awesome).
• Bạn muốn giảm request và dung lượng tải cho người dùng chưa đăng nhập.
• Plugin của bạn không phụ thuộc Dashicons ở front-end (kiểm thử cẩn thận vì có plugin vẫn gọi một vài biểu tượng).

Ngược lại, hãy giữ Dashicons nếu theme/plugin đang dựa vào nó để hiển thị icon ngoài front-end.

5 cách loại bỏ Dashicons an toàn trên front-end

Lưu ý: luôn sao lưu trước khi chỉnh mã, và kiểm thử trên staging.

• Điều kiện theo trạng thái đăng nhập (thường dùng nhất):
  • Ý tưởng: chỉ bỏ Dashicons với khách chưa đăng nhập.
  • Gợi ý mã (thêm vào functions.php hoặc plugin riêng): if ( ! is_user_logged_in() ) { wp_deregister_style('dashicons'); }
• Dequeue trong theme con:
  • Khi theme hoặc plugin enqueue riêng Dashicons, bạn có thể wp_dequeue_style('dashicons') trong hook wp_enqueue_scripts (ưu tiên muộn), kèm điều kiện trang.
• Dùng plugin tối ưu tài nguyên:
  • Perfmatters, Asset CleanUp, FlyingPress, WP Rocket (tùy bản) cho phép tắt Dashicons trong front-end bằng bật/tắt một tuỳ chọn hoặc loại bỏ theo URL cụ thể.
• Loại bỏ theo trang:
  • Nếu chỉ một vài trang không cần Dashicons, vô hiệu hoá có điều kiện bằng is_page(), is_singular() để tránh ảnh hưởng khu vực khác.
• Dọn CSS phụ thuộc:
  • Một số CSS của plugin tham chiếu Dashicons. Hãy tắt chính stylesheet đó (nếu không cần) thay vì chỉ tắt font.

Quan trọng: sau khi loại bỏ, rà soát giao diện để đảm bảo không xuất hiện ô vuông/trống thay icon (dấu hiệu thiếu font).

Thay thế Dashicons bằng SVG: nhẹ hơn, sắc nét hơn

• Dùng SVG inline: biểu tượng render sắc nét ở mọi độ phân giải, không cần tải webfont.
• Sprite SVG: gộp nhiều icon vào một sprite, gọi theo use xlink:href.
• Bộ icon thay thế:
  • Tự tạo với IcoMoon/Fontello (chỉ giữ glyph bạn dùng).
  • Font Awesome (bản SVG + subset) hoặc Heroicons, Remix Icon (định dạng SVG).
• Mẹo triển khai:
  • Ưu tiên SVG inline cho icon quan trọng (tránh FOUT/FOIT).
  • Dùng CSS mask-image/background-image để recolor linh hoạt khi cần.

Nếu buộc phải giữ Dashicons, hãy tối ưu như sau

• Chỉ phục vụ WOFF2 cho trình duyệt hiện đại (nếu tập người dùng cho phép), cấu hình font-display: swap để tránh chặn text.
• Preload webfont quan trọng: thêm <link rel="preload" as="font" type="font/woff2" crossorigin> cho file WOFF2.
• Tối ưu cache: self-host, đặt cache-control dài ngày (immutable) để lần tải sau siêu nhanh.
• Subset font: dùng pyftsubset (fonttools) để giữ lại đúng glyph bạn sử dụng, giảm kích thước đáng kể.
• Gom nhóm và hoãn CSS không quan trọng: tách CSS gọi Dashicons ra khỏi critical path.

Tương thích WordPress 6.x (2025)

• Dashicons vẫn còn trong core cho mục đích tương thích, chủ yếu ở WP Admin.
• Front-end: không còn khuyến nghị dựa vào Dashicons; đa số theme/plugin hiện đại chuyển sang SVG.
• Nếu bạn phát triển theme/plugin, nên ưu tiên SVG và chỉ gọi Dashicons khi thật cần.

Ảnh hưởng đến SEO/UX

• Cải thiện LCP/FCP bằng cách giảm request, giảm render-blocking.
• Tăng điểm PageSpeed/Lighthouse nhờ bỏ webfont/stylesheet không cần thiết.
• Trải nghiệm người dùng tốt hơn trên 3G/4G hoặc thiết bị cấu hình thấp.

Checklist tối ưu nhanh

• Kiểm tra site có tải Dashicons ở front-end hay không.
• Nếu không dùng icon Dashicons, vô hiệu hoá có điều kiện cho khách vãng lai.
• Nếu phải dùng, thêm font-display: swap, preload WOFF2, bật cache dài.
• Xem xét thay SVG inline hoặc sprite SVG cho các icon.
• Kiểm thử đa trình duyệt và trang quan trọng trước khi triển khai rộng.

Câu hỏi thường gặp

• Xóa Dashicons có gây lỗi không?
  • Không, nếu front-end không dùng biểu tượng từ Dashicons. Nếu có dùng, bạn sẽ thấy icon biến mất hoặc hiển thị ô trống. Hãy kiểm thử kỹ.
• Tại sao vẫn thấy dashicons.eot/ttf được tải?
  • Theme/plugin hoặc core còn enqueue định dạng cũ để hỗ trợ trình duyệt rất cũ. Hãy cấu hình chỉ phục vụ WOFF2 nếu tập người dùng phù hợp.
• Có nên thay bằng Font Awesome?
  • Có thể, nhưng tốt nhất là SVG inline/sprite để nhẹ nhất. Nếu dùng Font Awesome, hãy subset hoặc tải theo nhu cầu (kit) để tránh cồng kềnh.
• WooCommerce có cần Dashicons không?
  • Nhiều phiên bản mới không phụ thuộc Dashicons ở front-end. Tuy nhiên, một số tiện ích/extension có thể dùng. Kiểm thử theo từng site.

Kết luận

Dashicons hữu ích trong WP Admin, nhưng thường là “tài nguyên thừa” ở front-end hiện đại. Loại bỏ hoặc thay thế bằng SVG giúp giảm tải, tăng tốc và cải thiện điểm hiệu năng. Nếu bắt buộc phải giữ, hãy tối ưu webfont (WOFF2, preload, cache, subset) để cân bằng giữa giao diện và tốc độ. Chìa khóa nằm ở việc kiểm tra kỹ lưỡng và triển khai có điều kiện theo bối cảnh website của bạn.