Hướng dẫn remove Unused CSS giúp tăng tốc website WordPress [NEW]

Nếu bạn đang muốn tăng tốc trang web WordPress của mình và hãy xem công cụ Tốc độ trang của Google

Ngay lập tức bạn nhận được hướng dẫn Loại bỏ CSS không sử dụng để cải thiện tốc độ tải trang.

Nhưng bạn vẫn chưa biết chúng là gì và làm thế nào để loại bỏ chúng.

Trong bài viết này, tôi sẽ giải thích cụ thể CSS không sử dụng là gì?

Và làm thế nào để loại bỏ những CSS không sử dụng này.

huong-dan-remove-used-css

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

CSS không sử dụng trong WordPress là các mã CSS tải trên trang web, nhưng không thực sự cần thiết để hiển thị trang.

Các mã này sẽ mất nhiều thời gian hơn để tải trang web và ảnh hưởng đến trải nghiệm người dùng.

Không chỉ vậy, tốc độ tải trang là một trong những yếu tố quan trọng nhất đối với thứ hạng tìm kiếm.

Cách tốt nhất để kiểm tra CSS không sử dụng là sử dụng Google Pagespeed Insights.

Dưới kết quả, bạn sẽ thấy phần ‘Xóa CSS không được sử dụng’ và chi tiết các tệp CSS nào đang ảnh hưởng đến thời gian tải.

gg-page-speed-insight-remove-used-css

Chi tiết về các tệp CSS không sử dụng.

Vậy tại sao những CSS không sử dụng này lại được thêm vào WordPress?

Có thể bạn không để ý, nhưng CSS ở xung quanh chúng ta.

CSS được sử dụng để tạo kiểu cho tất cả nội dung HTML có sẵn trên internet, bao gồm cả các chủ đề WordPress.

Chủ đề WordPress thường sẽ bao gồm một tệp style.css chứa tất cả CSS trong đó (có thể nhiều hơn).

Ngoài các chủ đề, các plugin cũng tải css của riêng chúng.

Ví dụ: WooCommerce sẽ tải CSS để hiển thị các trang sản phẩm, các plugin trình tạo trang kéo và thả sẽ thêm CSS của riêng nó để hiển thị các trang tùy chỉnh, biểu mẫu liên hệ, phông chữ của bạn và hơn thế nữa.

Thông thường, các tệp này rất nhỏ và mất rất ít thời gian để tải.

Nhưng nếu trang web của bạn có quá nhiều CSS, các hiệu ứng cũng tăng lên và tất nhiên trang web của bạn sẽ mất nhiều thời gian để tải hơn.

Cách xóa CSS không sử dụng trong WordPress

Có khá nhiều phương pháp để loại bỏ CSS không sử dụng trong WordPress.

Tuy nhiên, để loại bỏ hoàn toàn chúng cũng tương đối phức tạp, nhất là với những người mới sử dụng.

Do cách thức hoạt động của WordPress, đôi khi rất khó để tìm thấy các tệp này.

Vì vậy ở đây mình sẽ hướng dẫn các bạn 2 phương pháp đơn giản nhất.

Phương pháp 1: Sử dụng WP Rocket để xóa CSS không sử dụng

Phương pháp này rất đơn giản, phù hợp với những người mới làm quen với WordPress hoặc chưa biết nhiều về mã hóa.

Plugin này sẽ giúp bạn cải thiện việc phân phối các tệp CSS, bao gồm cả việc loại bỏ các CSS không sử dụng.

Điều đó có nghĩa là trang web của bạn sẽ có tốc độ nhanh hơn và giúp người dùng có trải nghiệm tốt hơn.

Đầu tiên bạn cần cài đặt và kích hoạt plugin WP Rocket, nếu chưa biết bạn có thể tham khảo cách cài đặt plugin trên WordPress.

Sau khi kích hoạt, hãy chuyển đến Cài đặt »Tên lửa WP và chuyển sang tab Tối ưu hóa tệp.

wp-rocket-tệp-tối ưu hóa

Dưới đây bạn sẽ đánh dấu vào ô Tối ưu hóa phân phối CSS.

Tính năng này sẽ tự động tạo một tập tin chỉ chứa CSS cần thiết để hiển thị cho trang web.

Tệp này sẽ được tải đầu tiên trước khi người dùng truy cập trang, sau đó tải các tệp CSS khác (được gọi là tải chậm).

Bằng cách loại bỏ CSS chặn hiển thị, trang web của bạn sẽ tải nhanh hơn so với việc phải tải tất cả cùng một lúc.

remove-used-wprocket

WP Rocket mới có nhiều tính năng hơn Xóa CSS không sử dụng (Beta) (cân nhắc trước khi sử dụng).

Khi hoàn tất, hãy nhớ nhấp vào lưu thay đổi và plugin sẽ tự động thực hiện công việc của nó và bạn không cần phải làm gì khác.

Bạn có thể điều chỉnh thời gian xóa bộ nhớ cache sau một khoảng thời gian nhất định.

Sau khi hoàn tất, bạn có thể tiếp tục và kiểm tra lại hiệu suất trang web của mình bằng cách sử dụng Google Pagespeed Insights.

Một số tính năng khác trên WP Rocket cải thiện tốc độ trang web.

Ngoài việc tối ưu hóa tệp CSS, bạn có thể kết hợp một số tùy chọn khác để nâng cao hiệu quả.

Như hình bên dưới là chức năng Minify tệp tin CSS và Kết hợp tệp tin CSS (nén và ghép các tệp tin CSS thành một tệp tin duy nhất).

Tính năng này giúp bạn loại bỏ các khoảng trắng có trong tệp CSS và hợp nhất chúng thành một tệp duy nhất.

Điều này giúp bạn giảm yêu cầu HTTP và tăng tốc độ trang web.

Ghi chú đôi khi tính năng này sẽ phá vỡ hoặc phá vỡ giao diện, vui lòng vô hiệu hóa nó nếu giao diện của bạn bị ảnh hưởng. Bạn cũng có thể sử dụng Tệp CSS bị Loại trừ để xóa các tệp CSS không nén.

minify-css-filesNgoài CSS, bạn cũng có thể áp dụng tương tự cho các tệp JavaScript.

Tính năng load JavaScripts deferred, sẽ làm trễ các tập tin ảnh hưởng đến quá trình hiển thị khi truy cập.

Các tệp đó sau đó sẽ được tải sau khi trang web được hiển thị đầy đủ.

Cũng giống như CSS, nếu có bất kỳ lỗi nào trong quá trình sử dụng, hãy nhớ tắt tính năng này.

minify-javascripts-files

Phương pháp 2: Xóa CSS không sử dụng bằng Asset CleanUp

Phương pháp này sẽ khó và thủ công hơn một chút nhưng nếu áp dụng tốt thì hiệu quả sẽ rất đáng kinh ngạc.

Asset CleanUp là một plugin rất hay được cộng đồng đánh giá cao và sử dụng.

Nó sẽ cho phép bạn xóa bất kỳ tệp CSS nào trên bất kỳ trang web WordPress nào mà bạn muốn.

Tuy nhiên, nó sẽ hơi phức tạp và bạn sẽ cần phải kiểm tra chức năng và giao diện trang web của mình kỹ lưỡng để tránh sai sót.

Trước tiên, bạn cần cài đặt và kích hoạt plugin Access CleanUp, sau đó chuyển sang tab Chê độ kiểm tra.

tài sản-dọn dẹp-kiểm tra-chế độ

Điều này sẽ giúp bạn thoải mái cài đặt và chạy thử mà không sợ ảnh hưởng đến người dùng đang truy cập website.

Mọi thay đổi sẽ chỉ áp dụng cho bạn (đăng nhập với tư cách quản trị viên).

Sau đó nhập Asset CleanUp »Trình quản lý CSS / JSbạn có thể xóa các tệp CSS và JavaScript không mong muốn trên mỗi trang.

tài sản-dọn dẹp-css-js-quản lý

Đầu tiên, nó sẽ kiểm tra Trang chủ để xem CSS và Javascripts nào đang được tải.

trang chủ-css-javascript

Danh sách CSS và JS được tải chi tiết và cụ thể, bao gồm số lượng và nguồn gốc của chúng.

Ví dụ ở đây tôi sẽ kiểm tra trong phần Plugin trước khi nó bao gồm 11 CSS và JS.

Hãy kiểm tra và xem nếu css hoặc js đó là cần thiết, hãy kiểm tra Dỡ trên trang này để loại bỏ chúng.

dỡ-css-js

Ngoài giao diện ở đây, bạn cũng có thể thực hiện ngay trong bài đăng, trình chỉnh sửa trang và các loại bài đăng khác mà Access Cleanup hỗ trợ.

Ví dụ, ở đây tôi vào bất kỳ bài viết nào bên dưới và nó sẽ tự động tìm và tải tất cả các tệp được tải trên bài đăng này.

Tương tự, bạn hoàn toàn có thể dỡ bỏ CSS và JS không sử dụng ngay tại đây.

Đừng quên nhấp vào nút Cập nhật để cập nhật các thay đổi của bạn.

Ghi chú: Đối với mỗi CSS và JS bạn xóa, vui lòng kiểm tra kỹ xem trang web có hoạt động bình thường hay không.

Okie kết thúc, bạn có thể quay lại tắt chức năng chế độ kiểm tra.

Giờ đây, bạn có thể sử dụng Tốc độ trang của Google để kiểm tra lại xem có còn bất kỳ CSS nào chưa được sử dụng hay không.

Nếu vậy, hãy tiếp tục kiểm tra và tiếp tục.

Hy vọng bài viết này đã giúp bạn biết cách loại bỏ CSS không sử dụng trong WordPress.

Ngoài ra, hãy tham khảo toàn bộ các thủ thuật để tăng tốc WordPress, nếu bạn chưa biết.