Bạn có muốn loại bỏ JavaScript ngăn chặn hiển thị và CSS trong WordPress? Nếu bạn kiểm tra trang web của mình về thông tin chi tiết về Google PageSpeed, thì có thể bạn sẽ thấy một đề xuất để loại bỏ scrips và CSS. Trong bài này, chúng tôi sẽ giới thiệu cho các bạn cách dễ dàng khắc phục sự cố ngăn chặn JavaScript và CSS trong WordPress để cải thiện điểm số Google PageSpeed của bạn.
JavaScript và CSS Ngăn chặn Hoạt động Render là gì?
Mỗi trang web WordPress có một chủ đề và bổ sung thêm các tệp JavaScript và CSS vào cuối trang web của bạn. Các tập lệnh này có thể làm tăng thời gian tải trang trang của bạn và chúng cũng có thể chặn hiển thị trang.
Trình duyệt của người dùng sẽ phải tải các tập lệnh và CSS trước khi tải phần còn lại của HTML trên trang. Điều này có nghĩa là người dùng trên một kết nối chậm hơn sẽ phải đợi vài mili giây để xem trang.
Các tập lệnh và biểu định kiểu được gọi là JavaScript ngăn chặn hiển thị và CSS.
Các chủ trang web đang cố gắng đạt được điểm số Google PageSpeed là 100 sẽ cần khắc phục vấn đề này để đạt được điểm số hoàn hảo đó.
Google PageSpeed Score là gì?
Google PageSpeed Insights là công cụ trực tuyến được tạo bởi Google để giúp chủ sở hữu trang web tối ưu hóa và kiểm tra trang web của họ. Công cụ này kiểm tra trang web của bạn dựa trên nguyên tắc của Google về tốc độ và cung cấp các đề xuất để cải thiện thời gian tải trang của trang web của bạn.
Nó cho bạn thấy một điểm số dựa trên số lượng các quy tắc mà trang web của bạn vượt qua. Hầu hết các trang web có được một nơi nào đó giữa 50-70. Tuy nhiên, một số chủ trang web cảm thấy bị bắt buộc phải đạt được 100 điểm (trang có thể đạt điểm cao nhất).
Bạn có thực sự cần hoàn hảo “100” Google PageSpeed Score?
Mục đích của thông tin chi tiết về Google PageSpeed là cung cấp cho bạn các nguyên tắc để cải thiện tốc độ và hiệu suất của trang web của bạn. Bạn không bắt buộc phải tuân thủ đúng các quy tắc này.
Hãy nhớ rằng tốc độ chỉ là một trong số các chỉ số SEO giúp Google xác định cách xếp hạng trang web của bạn. Lý do tốc độ rất quan trọng là vì nó cải thiện trải nghiệm người dùng trên trang web của bạn.
Một trải nghiệm người dùng tốt hơn đòi hỏi nhiều hơn là tốc độ. Bạn cũng cần cung cấp thông tin hữu ích, giao diện người dùng tốt hơn và hấp dẫn nội dung bằng văn bản, hình ảnh và video.
Mục tiêu của bạn là tạo một trang web nhanh mang lại trải nghiệm người dùng tuyệt vời.
địa điểm
Chúng tôi khuyên bạn nên sử dụng các quy tắc Google Pagespeed làm đề xuất và nếu bạn có thể triển khai chúng một cách dễ dàng mà không làm ảnh hưởng đến trải nghiệm của người dùng thì điều đó thật tuyệt. Nếu không, bạn nên cố gắng làm càng nhiều càng tốt và sau đó đừng lo lắng về phần còn lại.
Có nói rằng, chúng ta hãy xem những gì bạn có thể làm để sửa chữa render ngăn chặn JavaScript và CSS trong WordPress.
Chúng tôi sẽ giới thiệu hai phương pháp sẽ khắc phục việc hiển thị ngăn chặn JavaScript và CSS trong WordPress. Bạn có thể chọn một trong đó làm việc tốt nhất cho trang web của bạn.
1. Khắc phục Render Blocking Scripts và CSS với Autoptimize
Phương pháp này đơn giản và được đề xuất cho hầu hết người dùng.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Autoptimize. Để biết thêm chi tiết
Khi kích hoạt, bạn cần truy cập vào Cài đặt »Tự động tối ưu hóa để định cấu hình cài đặt plugin.
Bạn có thể bắt đầu bằng cách kiểm tra hộp bên cạnh Tùy chọn JavaScript và Tùy chọn CSS và sau đó nhấp vào nút lưu thay đổi.
Bây giờ, bạn có thể kiểm tra trang web bằng công cụ PageSpeed. Nếu vẫn hiển thị các kịch bản chặn, sau đó bạn cần trở lại trang cài đặt plugin và nhấp vào nút ‘Hiển thị Cài đặt Nâng cao’ ở trên cùng.
Ở đây bạn có thể cho phép plugin bao gồm JS nội tuyến và xóa các tập lệnh bị loại trừ theo mặc định như seal.js hoặc jquery.js.
Tiếp theo, cuộn xuống đến tùy chọn CSS và cho phép plugin tổng hợp nội tuyến CSS.
Nhấp vào nút ‘Lưu thay đổi và rỗng Cache’ để lưu thay đổi và bộ nhớ cache plugin trống.
Khi bạn đã hoàn tất, hãy tiếp tục và kiểm tra lại trang web của mình bằng công cụ PageSpeed.
Hãy chắc chắn rằng bạn kiểm tra kỹ lưỡng trang web của bạn để thấy rằng không có gì bị phá vỡ bằng cách tối ưu hóa JavaScript hoặc CSS của bạn.
Làm thế nào nó hoạt động?
Tự động tối ưu hóa tổng hợp tất cả JavaScript và CSS được bao quanh. Sau đó, nó tạo các tập tin CSS và JavaScript nhỏ gọn và phục vụ các bản sao lưu trong bộ nhớ cache đến trang web của bạn như là đồng bộ hoặc bị trì hoãn.
Điều này cho phép bạn sửa chữa các lỗi kịch bản render và các vấn đề về kiểu dáng. Tuy nhiên, xin lưu ý rằng nó cũng có thể ảnh hưởng đến hiệu suất hoặc sự xuất hiện của trang web của bạn.
2. Chỉnh sửa Render Blocking JavaScript bằng W3 Total Cache
Phương pháp này đòi hỏi một ít công việc hơn và được khuyến khích cho người dùng đã sử dụng plugin W3 Total Cache trên trang web của họ.
Đầu tiên bạn cần phải cài đặt và kích hoạt plugin W3 Total Cache. Nếu bạn cần giúp đỡ
Tiếp theo, bạn cần truy cập Hiệu suất »Cài đặt chung và cuộn xuống phần Minify.
Đầu tiên bạn cần kiểm tra ‘Enable’ bên cạnh Minify option và sau đó chọn ‘Manual’ cho minify mode.
Nhấp vào nút lưu tất cả cài đặt để lưu cài đặt của bạn.
Tiếp theo, bạn cần phải thêm các kịch bản và CSS mà bạn muốn minify.
Bạn có thể nhận URL của tất cả các tập lệnh và biểu định kiểu đang hiển thị bị chặn từ công cụ Google PageSpeed Insights.
Dưới những đề xuất mà nó nói: ‘Loại bỏ JavaScript ngăn chặn hiển thị và CSS trong nội dung trên màn hình đầu tiên’, nhấp vào ‘Hiển thị cách khắc phục’. Nó sẽ cho bạn thấy danh sách các kịch bản và stylesheets.
Di chuyển chuột đến một kịch bản và nó sẽ cho bạn thấy đầy đủ URL. Bạn có thể chọn URL này và sau đó sử dụng phím CTRL + C (Command + C trên máy Mac) của bàn phím để sao chép URL.
Bây giờ đi qua khu vực quản trị WordPress của bạn và đi đến Hiệu suất »Giảm thiểu trang.
Đầu tiên bạn cần phải thêm các tập tin JavaScript mà bạn muốn được minified. Cuộn xuống phần JS và sau đó trong phần ‘Hoạt động trong các khu vực’ đặt loại nhúng để ‘Không chặn không đồng bộ’ cho
phần.
Tiếp theo, bạn cần nhấp vào nút ‘Thêm tập lệnh’ và sau đó bắt đầu thêm các URL tập lệnh mà bạn đã sao chép từ công cụ Google PageSpeed.
Khi bạn đã hoàn tất, hãy cuộn xuống phần CSS và sau đó nhấp vào nút ‘Thêm trang tính’. Bây giờ, hãy bắt đầu thêm các URL của kiểu mà bạn đã sao chép từ công cụ Google PageSpeed.
Bây giờ hãy nhấp vào nút ‘Lưu cài đặt và xóa bộ nhớ cache’ để lưu cài đặt của bạn.
Truy cập công cụ Google PageSpeed và kiểm tra lại trang web của bạn.
Hãy chắc chắn rằng bạn cũng kiểm tra trang web của bạn kỹ lưỡng để thấy rằng tất cả mọi thứ đang làm việc tốt.
Xử lý sự cố
Tùy thuộc vào cách các plugin và các chủ đề WordPress của bạn sử dụng JavaScript và CSS, có thể khá khó khăn để hoàn toàn khắc phục tất cả các hiển thị ngăn chặn các vấn đề JavaScript và CSS.
Mặc dù các công cụ trên có thể trợ giúp, plugin của bạn có thể cần một số tập lệnh ở mức độ ưu tiên khác để hoạt động bình thường. Trong trường hợp đó, các giải pháp trên có thể làm hỏng plugin của bạn hoặc họ có thể hoạt động bất ngờ.
Google vẫn có thể hiển thị cho bạn một số vấn đề nhất định như tối ưu hóa phân phối CSS cho nội dung trên màn hình đầu tiên. Tự động tối ưu hóa cho phép bạn khắc phục điều đó bằng cách thêm CSS nội tuyến theo cách thủ công để hiển thị khu vực nếp gấp trên của chủ đề của bạn.
Tuy nhiên, có thể khá khó để tìm ra mã CSS nào bạn sẽ cần để hiển thị trên nội dung lần đầu.
Đó là tất cả