Xóa JavaScript WordPress không sử dụng mà không cần plugin
|
Các chủ đề nhẹ như Astra, GeneratePress và Genesis tải rất ít CSS và tập lệnh trên trang web. Điều này giúp loại bỏ các lỗi CSS và JavaScript không sử dụng trong công cụ Google PageSpeed Insights và tăng vọt điểm số tốc độ. Tuy nhiên, 99% chủ đề WordPress thương mại kết hợp nhiều tính năng và tải các tập lệnh và CSS nặng. Cho dù bạn sử dụng chủ đề nhẹ hay nặng, bạn vẫn cần rất nhiều chức năng thông qua plugin. Kết hợp chủ đề và plugin, điểm tốc độ tổng thể sẽ có tác động với mọi tệp nguồn trên trang web. Trong bài viết này, chúng tôi sẽ giải thích cách xóa CSS và JavaScript không sử dụng trong WordPress để cải thiện điểm Google PageSpeed Insights Show
Có liên quan. Đọc hơn 400 hướng dẫn WordPress miễn phí CSS và JavaScript không sử dụng là gì?Hãy để chúng tôi giải thích điều này với một ví dụ đơn giản. Contact Form 7 là một trong những plugin phổ biến để thêm các biểu mẫu liên hệ trong các trang web WordPress. Nói chung, bạn cần có biểu mẫu liên hệ trong trang “Liên hệ” và có thể trên một số trang khác. Bạn sẽ không sử dụng biểu mẫu liên hệ trên mỗi bài đăng trên blog. Tuy nhiên, plugin Contact Form 7 sẽ tải CSS và JavaScript trên mỗi trang và bài đăng trên blog của bạn. Đó là một vấn đề lớn khi bạn có 1000 bài đăng trên blog và tất cả chúng đều tải tập lệnh / CSS biểu mẫu liên hệ mà không cần bất kỳ nhu cầu nào. Những CSS và tập lệnh không cần thiết này được gọi là CSS không sử dụng và tập lệnh không sử dụng Một ví dụ điển hình khác là cửa hàng WooC Commerce. Bạn chỉ cần các kiểu và tập lệnh WooC Commerce trên các trang như sản phẩm, lưu trữ sản phẩm, giỏ hàng, thanh toán và mua sắm. Tuy nhiên, plugin không có bất kỳ tùy chọn nào để ngăn tải tệp trên các bài đăng hoặc trang blog Tại sao đây là một vấn đề?Thật không may, hầu hết tất cả các plugin sẽ tải tài nguyên trên tất cả các trang trên trang web của bạn. Điều này sẽ ảnh hưởng nặng nề đến tốc độ tải trang và giảm điểm tốc độ trong các công cụ như Google PageSpeed Insights. Bạn sẽ thấy các lỗi như bên dưới là cơ hội, khi kiểm tra URL của trang trong Thông tin chi tiết về tốc độ trang  Mặc dù công cụ cho biết điều này sẽ không ảnh hưởng trực tiếp đến điểm hiệu suất, nhưng nó có tác động rất lớn đến thời gian tải. Tại thời điểm này, 30% điểm dành cho thời gian chặn và việc không sử dụng CSS / JS và tài nguyên chặn kết xuất sẽ kéo điểm xuống cuối. Ngoài ra, một số công ty lưu trữ sẽ tính phí dựa trên việc sử dụng băng thông. Tải các tệp CSS / tập lệnh không cần thiết trên trang web của bạn sẽ tăng gấp nhiều lần mức sử dụng băng thông. Do đó, cần phải xác định CSS và JavaScript không sử dụng và loại bỏ chúng khỏi tải trên tất cả các trang Làm cách nào để xác định CSS và JavaScript không được sử dụng?Bạn phải hiểu điều gì đang khiến các tài nguyên không được sử dụng tải trên các trang của bạn. Như đã giải thích ở trên, bạn không cần tải biểu mẫu liên hệ, cửa hàng trực tuyến hoặc plugin đánh giá trên tất cả các trang. Tuy nhiên, toàn bộ nhiệm vụ phức tạp hơn bạn nghĩ
Tóm lại, thật dễ dàng để xóa CSS và JavaScript không sử dụng nếu chúng được tải dưới dạng các tệp riêng biệt. Đang tải phong cách khổng lồ. không thể xóa tệp css hoặc CSS nội tuyến trừ khi bạn xem lại chúng theo cách thủ công và xóa các mã không sử dụng. Ngoài ra, bạn có thể cần tìm một chủ đề hoặc plugin nhẹ để giải quyết vấn đề. Sau khi bạn tìm thấy nguyên nhân gây ra lỗi, bạn có thể bật lại plugin bộ nhớ đệm trên trang web của mình Làm cách nào để xóa CSS và JavaScript không sử dụng?Có hai cách bạn có thể sử dụng để loại bỏ các tệp CSS và JS không sử dụng khi tải trang trên trình duyệt. Tùy chọn đầu tiên là sử dụng các plugin cao cấp như WP Rocket và tùy chọn thứ hai là sử dụng plugin miễn phí. Chúng tôi sẽ giải thích chi tiết cả hai phương pháp để bạn có thể kiểm tra và chọn phương pháp dễ dàng cho mình Xóa CSS không sử dụng bằng WP RocketWP Rocket là plugin lưu trữ phổ biến nhất cho WordPress cung cấp giao diện người dùng siêu đơn giản. Để cải thiện thời gian tải trang, bạn phải mua plugin và cập nhật lên phiên bản mới nhất (trên 3. 9)
Đảm bảo kiểm tra kỹ lưỡng trang web của bạn để xác nhận rằng tất cả các loại bài đăng đều hoạt động bình thường sau khi xóa CSS không sử dụng. Nếu bạn tìm thấy bất kỳ vấn đề nào, bạn có thể loại trừ CSS hoặc JavaScript trong hộp loại trừ. Nếu loại bỏ CSS không hoạt động cho trang web của bạn, bạn cũng có thể thử tùy chọn “Tải CSS không đồng bộ” để tạo CSS quan trọng và tránh các sự cố CSS chặn hiển thị Xóa JavaScript không sử dụng bằng WP RocketKhông giống như CSS, không thể xóa JS bằng plugin WP Rocket. Tuy nhiên, bạn có thể bật tùy chọn “Tải JavaScript bị trì hoãn” và “Trì hoãn thực thi JavaScript” trong phần “Tối ưu hóa tệp > Tệp JavaScript”. Điều này sẽ trì hoãn cả mã bên trong và mã bên ngoài, đồng thời loại bỏ các sự cố JavaScript chặn hiển thị Đảm bảo kiểm tra xem trang web của bạn có hoạt động tốt sau khi bật các tùy chọn này không. Điều này sẽ tăng điểm tốc độ trang của bạn lên gần 100 trong công cụ Google PageSpeed Insights vì việc trì hoãn JS sẽ giảm tổng thời gian chặn, chiếm 30% trọng số trong tính toán điểm hiệu suất Sử dụng Plugin CleanUp nội dung để xóa CSS và JavaScript không sử dụngKhi bạn đã tải nhiều plugin và tệp chủ đề, hãy làm theo các hướng dẫn bên dưới để xóa chúng trên các trang mà bạn không cần đến chúng
Cài đặt pluginPlugin có nhiều cài đặt mà chúng tôi sẽ không giải thích trong bài viết này. Nếu bạn đang sử dụng plugin bộ nhớ đệm như WP Rocket trên trang web của mình thì hãy đảm bảo không sử dụng bất kỳ chức năng nào khác ngoài việc tắt các tập lệnh và CSS không sử dụng. Chuyển đến menu “Dọn dẹp nội dung > Cài đặt” và sau đó chuyển đến tab “Tùy chọn sử dụng plugin”. Tại đây, bạn có thể quyết định cách bạn muốn xem và vô hiệu hóa CSS / tập lệnh không sử dụng trên các trang của mình
Bây giờ, hãy chuyển đến tab “Chế độ kiểm tra” và bật tùy chọn “Bật Chế độ kiểm tra”. Điều này sẽ giúp bạn kiểm tra xem trang web có bị hỏng sau khi vô hiệu hóa tập lệnh và CSS trước khi công khai hay không Nhấp vào “Cập nhật tất cả cài đặt” ở dưới cùng để áp dụng các thay đổi của bạn Xóa CSS và JavaScript không sử dụngTùy thuộc vào cài đặt, bạn có thể phân tích trang từ trình chỉnh sửa hoặc từ giao diện người dùng
Trong cả hai trường hợp, bạn sẽ thấy tất cả các tệp CSS và JavaScript được tải trên trang được nhóm theo cài đặt của bạn Mở rộng từng nhóm và xem chi tiết về các tệp được tải bởi plugin và chủ đề của bạn. Đối với mỗi tệp CSS và JS, bạn có nhiều tùy chọn như trong hình bên dưới
Sau khi tắt các tệp, hãy cập nhật bài đăng của bạn để các thay đổi có hiệu lực trên trang web Xem các tệp bị vô hiệu hóa và xóa chế độ kiểm tra
Kiểm tra trang web của bạn và nếu mọi thứ đều ổn, hãy quay lại trang cài đặt và tắt tùy chọn “Chế độ kiểm tra”. Điều này sẽ làm cho các thay đổi trực tiếp với tất cả người dùng truy cập trang web của bạn. Tương tự, bạn có thể tắt các tệp CSS và JS trên các loại bài đăng, trang và trang sản phẩm tùy chỉnh bằng cách chỉnh sửa chúng. Kiểm tra các trang của bạn bằng công cụ Google PageSpeed Insights để xem các lỗi đã được loại bỏ chưa Từ cuối cùngChúng tôi hy vọng bài viết hữu ích để xóa các tệp CSS và JavaScript không sử dụng khỏi trang web của bạn và cải thiện điểm số Google PageSpeed. Chúng tôi khuyên bạn nên sử dụng WP Rocket vì nó dễ dàng xóa CSS và trì hoãn JS bên ngoài chỉ với vài cú nhấp chuột. Nếu bạn đang sử dụng plugin Dọn dẹp tài sản miễn phí, nó sẽ chỉ giúp bạn tắt tải tệp CSS và JS từ plugin và chủ đề. Bạn phải tránh sử dụng mã của bên thứ ba và xóa thủ công các mã không cần thiết bên trong kiểu chính. tập tin css. Khi chỉnh sửa tệp theo cách thủ công, hãy đảm bảo sử dụng chủ đề con để cập nhật biểu định kiểu để bạn không bị mất các thay đổi mỗi khi cập nhật chủ đề |
