Reduce Unused CSS/JS là gì? Hướng dẫn A-Z tối ưu tốc độ

Bạn đã bao giờ nhìn vào báo cáo Google PageSpeed Insights và cảm thấy ‘choáng’ với dòng cảnh báo màu đỏ chói “Reduce unused CSS/JS”? Đây chính là lời nhắc nhở về những đoạn mã ‘thừa’ đang âm thầm kéo tốc độ website của bạn xuống. Vậy Reduce unused CSS / JS là gì và làm thế nào để dọn dẹp ‘căn phòng’ code này một cách hiệu quả? Bài viết này của Việt Thắng sẽ hướng dẫn bạn từ A-Z, biến những khái niệm kỹ thuật khô khan thành các bước hành động cụ thể.

Reduce unused CSS/JS là gì?

Tưởng tượng website của bạn là một tủ quần áo khổng lồ. Để chuẩn bị cho một buổi đi chơi (tải một trang cụ thể), bạn chỉ cần một bộ trang phục. Nhưng thay vì chỉ lấy ra bộ đó, trình duyệt lại phải lôi cả tủ quần áo ra xem xét. “Reduce unused CSS/JS” chính là hành động dọn dẹp tủ đồ, chỉ giữ lại những gì thực sự cần thiết cho mỗi lần xuất hiện, giúp trang web nhẹ nhàng và nhanh nhẹn hơn.

Giải thích Unused CSS & Unused JavaScript

Nói một cách đơn giản, đây là những đoạn mã được tải về trình duyệt của người dùng nhưng lại không được sử dụng để hiển thị hoặc thực thi trên trang mà họ đang xem.

• Unused CSS (CSS không sử dụng): Là các quy tắc tạo kiểu (màu sắc, phông chữ, bố cục…) được định nghĩa trong các file CSS nhưng không áp dụng cho bất kỳ thành phần nào trên trang hiện tại. Ví dụ, một file CSS chứa quy tắc cho trang giỏ hàng, nhưng nó vẫn được tải ở trang chủ, nơi không hề có giỏ hàng.
• Unused JavaScript (JavaScript không sử dụng): Là các đoạn mã kịch bản (hiệu ứng, popup, tương tác…) được tải về nhưng không được gọi ra để thực thi. Chẳng hạn, một plugin tạo form liên hệ có thể tải file JS của nó trên toàn bộ website, kể cả những trang không hề chứa form đó.

Nguyên nhân xuất hiện code không sử dụng trên website

Những đoạn mã “thừa cân” này không tự nhiên sinh ra. Chúng thường là hệ quả từ quá trình phát triển và mở rộng website của bạn. Các thủ phạm chính bao gồm:

• Theme và Page Builder: Để đáp ứng mọi nhu cầu, các theme và trình tạo trang (như Elementor, Flatsome) thường đi kèm một tệp CSS/JS khổng lồ. Chúng chứa mã cho tất cả các tính năng, layout, widget có thể có, và tải toàn bộ tệp này trên mọi trang, dù bạn chỉ dùng một phần nhỏ.
• Plugin: Mỗi plugin bạn cài đặt, từ nút chia sẻ mạng xã hội đến SEO, đều có thể thêm các tệp CSS và JS của riêng nó. Nhiều plugin tải các tệp này một cách “vô tội vạ” trên toàn trang web thay vì chỉ ở nơi chúng thực sự hoạt động.
• Code cũ và di sản: Qua thời gian, website được nâng cấp, thay đổi thiết kế, các tính năng cũ bị loại bỏ nhưng code của chúng có thể bị “bỏ quên” lại, trở thành rác tích tụ.

Tác động tiêu cực đến tốc độ tải trang và Core Web Vitals

Mã không sử dụng không chỉ là những tệp tin vô hại. Chúng là một gánh nặng vô hình gây ra nhiều vấn đề nghiêm trọng:

• Lãng phí băng thông: Người dùng phải tải về những dữ liệu không cần thiết, đặc biệt ảnh hưởng đến những người có kết nối mạng chậm hoặc dùng 3G/4G.
• Làm chậm quá trình render trang: Trình duyệt phải mất thời gian và tài nguyên CPU để đọc, phân tích và xử lý toàn bộ các tệp CSS/JS này trước khi có thể hiển thị nội dung chính. Việc này trực tiếp làm tăng chỉ số Largest Contentful Paint (LCP) – một trong ba chỉ số cốt lõi của Core Web Vitals.
• Gây nghẽn mạng: Tải nhiều tệp CSS/JS không cần thiết sẽ chiếm dụng các kết nối mạng, làm trì hoãn việc tải các tài nguyên quan trọng khác như hình ảnh, phông chữ.
• Giảm điểm Google PageSpeed Insights: Và tất nhiên, điều này dẫn đến những cảnh báo màu đỏ và điểm số thấp trên các công cụ đo lường hiệu suất, ảnh hưởng không nhỏ đến nỗ lực tối ưu tốc độ website và SEO của bạn.

Cách xác định CSS và JavaScript không sử dụng

Trước khi bắt tay vào “dọn dẹp”, chúng ta cần biết chính xác rác đang ở đâu. Giống như một bác sĩ, bạn cần chẩn đoán đúng bệnh trước khi kê đơn. Rất may, chúng ta có những công cụ mạnh mẽ để làm việc này.

Sử dụng báo cáo từ Google PageSpeed Insights

Đây là công cụ quen thuộc và dễ tiếp cận nhất. Khi phân tích URL của bạn, nếu có mã thừa, PageSpeed Insights sẽ hiển thị cảnh báo “Reduce unused CSS” và “Reduce unused JavaScript” trong phần “Opportunities” (Cơ hội).

Công cụ này sẽ liệt kê các tệp tin chứa mã không sử dụng cùng với dung lượng tiềm năng bạn có thể tiết kiệm được. Đây là bước chẩn đoán đầu tiên, giúp bạn có cái nhìn tổng quan về những “thủ phạm” lớn nhất.

Phân tích chi tiết với tab Coverage trong Chrome DevTools

Để có một báo cáo chi tiết và trực quan hơn, hãy dùng công cụ dành cho nhà phát triển của Chrome. Đây là cách “mổ xẻ” vấn đề một cách chính xác.

1. Mở trang web bạn muốn kiểm tra trên trình duyệt Chrome.
2. Nhấn phím F12 (hoặc chuột phải chọn Inspect) để mở Chrome DevTools.
3. Nhấn tổ hợp phím Ctrl + Shift + P để mở Command Menu.
4. Gõ từ “Coverage” và chọn Show Coverage.
5. Nhấn vào nút tải lại (Reload) trong tab Coverage để bắt đầu ghi lại quá trình tải trang.

Sau khi trang tải xong, bạn sẽ thấy một bảng danh sách các file CSS và JS đã được tải. Mỗi file sẽ có một thanh màu thể hiện:

• Màu xanh lá: Phần code đã được sử dụng.
• Màu đỏ: Phần code không được sử dụng (Unused code).

Bằng cách này, bạn có thể xác định chính xác tệp nào chứa nhiều mã thừa nhất và cần được ưu tiên xử lý.

Hướng dẫn loại bỏ CSS không sử dụng (Reduce Unused CSS)

Khi đã xác định được các tệp CSS cồng kềnh, bước tiếp theo là áp dụng các chiến lược thông minh để giảm thiểu chúng. Mục tiêu không phải là xóa hoàn toàn, mà là tải chúng một cách tối ưu hơn, đặc biệt là trên nền tảng WordPress.

Tìm hiểu Critical CSS là gì và cách hoạt động

Đây là khái niệm quan trọng nhất khi bạn muốn loại bỏ css không sử dụng. Critical CSS là gì? Đó là tập hợp tối thiểu các quy tắc CSS cần thiết để hiển thị nội dung trong màn hình đầu tiên (above-the-fold) của trang web một cách chính xác. Phần nội dung mà người dùng nhìn thấy ngay lập-tức-khi-vào-trang mà không cần cuộn chuột.

Cách hoạt động của kỹ thuật này như sau:

1. Tách Critical CSS: Tự động hoặc thủ công xác định các đoạn CSS quan trọng này.
2. Nội tuyến (Inline): Nhúng trực tiếp đoạn Critical CSS này vào trong thẻ <head> của trang HTML. Điều này giúp trình duyệt hiển thị phần đầu trang ngay lập tức mà không cần chờ tải file CSS bên ngoài.
3. Trì hoãn CSS còn lại: Tải các file CSS đầy đủ một cách bất đồng bộ (không chặn hiển thị). Khi người dùng bắt đầu cuộn trang, phần CSS còn lại đã sẵn sàng để tạo kiểu cho nội dung bên dưới.

Kết quả là người dùng có cảm giác trang tải gần như tức thì, cải thiện đáng kể chỉ số LCP và trải nghiệm người dùng.

Cách giảm file CSS trên WordPress bằng plugin (WP Rocket, Perfmatters…)

Việc tạo và áp dụng Critical CSS thủ công khá phức tạp. May mắn thay, với WordPress, các plugin tối ưu hóa hiệu suất có thể giúp bạn tự động hóa quy trình này. Hai cái tên nổi bật là WP Rocket và Perfmatters.

Ví dụ với WP Rocket:

• Trong cài đặt của plugin, bạn vào tab File Optimization.
• Tìm đến mục CSS Files, tích vào ô Optimize CSS delivery.
• Chọn tùy chọn “Remove Unused CSS”.

WP Rocket sẽ tự động quét trang của bạn, tạo ra Critical CSS cho mỗi trang và trì hoãn tải các file CSS còn lại. Tương tự, Perfmatters cũng có tính năng “Remove Unused CSS” hoạt động với cơ chế tương tự. Đây là giải pháp tối ưu css wordpress hiệu quả và tiết kiệm thời gian nhất cho hầu hết người dùng.

Hướng dẫn loại bỏ JavaScript không sử dụng (Reduce Unused JS)

Tương tự như CSS, việc loại bỏ javascript không sử dụng không có nghĩa là xóa bỏ file. Thay vào đó, chúng ta sẽ áp dụng các kỹ thuật để ngăn chúng chặn quá trình hiển thị trang và chỉ tải khi thực sự cần thiết.

Kỹ thuật trì hoãn JavaScript (Defer và Delay)

Đây là hai vũ khí chính để xử lý JS không cần thiết ngay lập tức. Chúng ta cần trì hoãn javascript một cách thông minh.

• Defer JavaScript: Thuộc tính defer ra lệnh cho trình duyệt tải file script song song với việc phân tích HTML, nhưng chỉ thực thi nó sau khi HTML đã được phân tích xong. Kỹ thuật này rất hữu ích cho các script không cần thiết cho việc hiển thị ban đầu nhưng cần cho chức năng của trang.
• Delay JavaScript: Đây là một kỹ thuật mạnh mẽ hơn. Nó sẽ trì hoãn việc tải và thực thi các file JS cho đến khi có tương tác từ người dùng (ví dụ: cuộn chuột, di chuột, click). Kỹ thuật này cực kỳ hiệu quả cho các script của bên thứ ba như Facebook Pixel, live chat, Google Analytics… vốn không cần thiết cho lần hiển thị đầu tiên.

Cấu hình loại bỏ JS thừa cho WordPress bằng plugin (Asset CleanUp…)

Để remove unused javascript wordpress một cách triệt để, các plugin như WP Rocket hay Perfmatters đều có tùy chọn Defer và Delay JS. Tuy nhiên, nếu bạn muốn kiểm soát chi tiết hơn, Asset CleanUp là một lựa chọn tuyệt vời.

Asset CleanUp cho phép bạn vô hiệu hóa (unload) các tệp CSS/JS cụ thể trên từng trang hoặc bài viết mà chúng không cần thiết. Ví dụ:

• Bạn có plugin Contact Form 7. Script của nó đang tải trên trang chủ.
• Sử dụng Asset CleanUp, bạn có thể vào trình chỉnh sửa trang chủ, tìm đến script của Contact Form 7 và chọn “Unload on this page”.

Bằng cách này, bạn có thể loại bỏ mã thừa một cách có chọn lọc và chính xác, đảm bảo website chỉ tải những gì nó thực sự cần, ở đúng nơi nó cần.

Tổng kết và các lưu ý quan trọng

Việc giảm thiểu CSS/JS không sử dụng không phải là một công việc làm một lần rồi quên. Nó là một quá trình “dọn dẹp” liên tục, đặc biệt là khi bạn cài thêm plugin hay thay đổi giao diện. Tuy nhiên, lợi ích mà nó mang lại cho tốc độ website, điểm số Core Web Vitals và trải nghiệm người dùng là vô cùng xứng đáng.

Trước khi kết thúc, Việt Thắng có một vài lưu ý quan trọng cho bạn:

• Luôn sao lưu (backup) website: Trước khi thực hiện bất kỳ thay đổi nào liên quan đến tối ưu CSS/JS, hãy đảm bảo bạn đã có một bản sao lưu đầy đủ.
• Kiểm tra kỹ lưỡng: Sau khi kích hoạt các tính năng tối ưu, hãy truy cập website ở chế độ ẩn danh và kiểm tra mọi chức năng, bố cục để đảm bảo không có gì bị lỗi hiển thị.
• Bắt đầu từ từ: Đừng bật tất cả các tùy chọn tối ưu cùng một lúc. Hãy thực hiện từng bước và kiểm tra kết quả để dễ dàng xác định nguyên nhân nếu có sự cố xảy ra.

Bạn thấy phần nào trong quá trình này khó thực hiện nhất? Chia sẻ với Việt Thắng ở phần bình luận nhé!

Nếu việc tối ưu tốc độ làm bạn mất quá nhiều thời gian và công sức, Việt Thắng luôn sẵn sàng hỗ trợ bạn xây dựng và chăm sóc một website chuyên nghiệp, nhanh như chớp. Nhắn tin cho chúng tôi ngay nhé!