Sửa lỗi Render-Blocking JavaScript and CSS ( ngăn chặn hiển thị) trên WordPress

 

JavaScript và CSS Render-Blocker là gì?

Mỗi trang web WordPress chúng ta đều sử dụng 1 Theme nào đó và những nhà phát triển Theme họ bổ sung thêm các tệp JavaScript và CSS vào mã nguồn của các theme để chúng sinh động hơn. Các tập lệnh này sẽ làm tăng thời gian tải xuống trang web của bạn và chúng cũng sẽ chặn hiển thị một số phần trên trang web của bạn.

Trình duyệt của người dùng sẽ phải tải các tệp JavaScript và CSS trước khi tải các phần còn lại của HTML trên trang web. Điều này có nghĩa là người dùng sẽ kết nối chậm hơn, họ sẽ phải chờ một vài giây để có thể xem trang.

Các tập JavaScript và CSS này được gọi là JavaScript và CSS ngăn chặn hiển thị trên trang ( JavaScript và CSS Render-Blocker). Và các Webmaster, chủ các trang web đang cố gắng để cải thiện điểm số trên Google PageSpeed ​ sẽ cần phải khắc phục vấn đề này để đạt được điểm số cao hơn.

Google PageSpeed ​​Score là gì?

Google PageSpeed ​​Insights là một công cụ trực tuyến được phát triển bởi Google để giúp các webmaster, chủ 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à đề xuất các phương án để cải thiện thời gian tải trang của trang web bạn.

Dưới đây, chúng tôi sẽ giới thiệu hai phương pháp khắc phục lỗi chặn hiển thị ở các tệp tin JavaScript và CSS trong WordPress. Bạn có thể chọn và sử dụng một trong các phương pháp tốt nhất cho trang web của bạn. ( Trước khi sử dụng các phương pháp này, chúng tôi khuyên bạn nên backup lại dữ liệu website của mình để nếu quá trình tối ưu có xảy ra vấn đề ngoài ý muốn các bạn có thể dễ dàng khôi phục lại và hoạt động một cách bình thường.)

1. Khắc phục Render Blocking Scripts và CSS với Autoptimize

Phương pháp này khá đơn giản và chúng tôi cũng khuyến khích các bạn sử dụng để tránh những lỗi không đáng có xảy ra. Đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Autoptimize.

Khắc phục Render Blocking Scripts và CSS với Autoptimize

Bạn bắt đầu bằng cách check vào hộp checkbox ở JavaScript Options và CSS Options. Sau đó nhấp vào nút Ssave changes.

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 tập lệnh chặn hiển thị, thì bạn cần quay trở lại và cài đặt plugin và nhấp vào nút ‘Show Advanced Settings’ ở trên cùng.

Sửa lỗi Render-Blocking JavaScript and CSS ( ngăn chặn hiển thị) trên WordPress

Ở đây bạn có thể cho phép plugin xóa các tập JavaScripts hay loại trừ chúng 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 tối ưu thêm CSS.

Nhấp vào nút ‘Save changes and Empty Cache’ để lưu thay đổi của bạn 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 mình xem có xảy ra các vấn đề vỡ giao diện hay gì không sau khi tối ưu hóa JavaScript hoặc CSS.

2. Chỉnh sửa Render Blocking JavaScript bằng W3 Total Cache

Phương pháp này bạn sẽ thực hiện ít bước hơn và được khuyến khích cho các bạn đã sử dụng plugin W3 Total Cache trên trang web của mình.

Đầu tiên, bạn cần phải cài đặt và kích hoạt plugin W3 Total Cache (Chúng tôi sẽ cố gắng viết bài viết hướng dẫn sử dụng Plugin W3 Total Cache). Tiếp theo, bạn cần truy cập trang Performance » General Settings và cuộn xuống phần Minify.

Chỉnh sửa Render Blocking JavaScript bằng W3 Total Cache

Đầu tiên bạn cần kiểm tra ‘Enable’ Minify option lên 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 file và CSS mà bạn muốn minify.

Bạn có thể nhận URL của tất cả các tập tin JavaScript và CSS đang hiển thị bị chặn từ công cụ Google PageSpeed ​​Insights. bạn có thể xem ở ảnh minh họa dưới đây:

Chỉnh sửa Render Blocking JavaScript bằng W3 Total Cache

Hãy di chuyển đến và rê chuột vào một dòng nào đấy bạn sẽ thấy đầy đủ URL. Bạn có thể chọn và copy URL này. Bây giờ đi qua khu vực quản trị WordPress của bạn và đi tới trang Performance » Minify .

Đầ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 ‘Operations in areas‘ cài đặt loại nhúng ở phần ‘Non-blocking async‘ cho phần <head>.

Chỉnh sửa Render Blocking JavaScript bằng W3 Total Cache

Tiếp theo, bạn cần phải nhấp vào nút ‘Add a Script‘ và sau đó bắt đầu thêm URL tập lệnh mà bạn đã sao chép từ công cụ Google PageSpeed vào.

Tiếp đến, hãy cuộn xuống phần CSS và sau đó nhấp vào nút ‘Add a stylesheet‘. Bây giờ, bắt đầu thêm các URL của stylesheet mà bạn đã sao chép từ công cụ Google PageSpeed vào.

Chỉnh sửa Render Blocking JavaScript bằng W3 Total Cache

Bây giờ hãy nhấp vào nút ‘Save settings and purge 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.

Xử lý sự cố

Tùy thuộc vào cách các plugin và các WordPress theme mà bạn đang sử dụng mà bạn có thể sử lý các tệp tin JavaScript và CSS hay không, Có thể có những theme, plugin mà khi bạn tối ưu, xóa các file JavaScript và CSS này đi thì giao diện của bạn sẽ bị vỡ.

Do đó bạn nên tạo trước cho mình một bản sao lưu (backup) website đầy đủ để có thể khắc phục nếu có sự cố ngoài ý muốn.

Hy vọng với bài viết này sẽ giúp các bạn tối ưu tốt hơn cho website WordPress của mình.

Xem Thêm : Hiển Thị Thẻ Tag Phổ Biến Cho Website WordPress.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *