Sửa lỗi Render-Blocking JavaScript & CSS

Bạn có muốn loại bỏ lỗi “render-blocking JavaScript and CSS” trong WordPress không? Nếu bạn kiểm tra tốc độ trên tool Google PageSpeed , thì bạn có thể sẽ thấy một đề xuất để loại bỏ các đoạn mã chặn JavaScript và CSS. Trong bài viết này, mình sẽ chỉ cho bạn cách dễ dàng sửa lỗi chặn JavaScript và CSS trong WordPress để cải thiện điểm số trên Google PageSpeed của bạn.

Render-Blocking JavaScript and CSS là gì?

Bạn có một giao diện WordPress và cài một số plugins bổ sung để thêm các tệp JavaScript và CSS vào phần đầu của trang web của bạn. Các tập lệnh này có thể tăng thời gian tải trang và chúng cũng có thể gây lỗi ‘Render-Blocking’.

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

Bạn đang cố gắng đạt được số điểm Google PageSpeed là (100) sẽ cần khắc phục vấn đề này để đạt được số điểm tối đa đó.

Điểm số Google PageSpeed là gì?

Google PageSpeed Insights là một công cụ tạo bởi Google để giúp chủ sở hữu website kiểm tra các thông số cho tốc độ và tối ưu trang web một cách tốt nhất trên công cụ tìm kiếm. Công cụ này kiểm tra trang web của bạn theo các hướng dẫn về tốc độ của Google và đưa ra các đề xuất để cải thiện thời gian tải trang.

Bạn biết được cần phải đạt một số điểm tiêu chuẩn của google đưa ra. Hầu hết các trang web sẽ đạt được trong khoảng từ 50-70. Tuy nhiên, một số chủ sở hữu trang web cảm thấy bắt buộc phải đạt được 100 (thang điểm cao nhất).

Bạn có thực sự cần điểm 100 của Google PageSpeed?

Mục đích của công cụ Google PageSpeed insights ​​là cung cấp cho bạn các hướng dẫn để cải thiện tốc độ và hiệu suất của trang web của bạn. Bạn không cần phải tuân theo các quy tắc này một cách nghiêm ngặt.

Hãy nhớ rằng tốc độ chỉ là một yếu tố trong SEO giúp Google xác định xếp hạng trang web của bạn. Lý do tại sao tốc độ lại 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. Đây là yếu tố kiên quyết để giữ chân độc giả.

Tuy nhiê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 dễ sử dụng và nội dung hấp dẫn trên trang web của mình. Mục tiêu của bạn là tạo ra một trang web nhanh cung cấp trải nghiệm người dùng tuyệt vời. Chúng tôi khuyên bạn nên sử dụng các quy chuẩn của Google Pagespeed.

Dưới đây mình sẽ đưa ra 2 phương pháp để khắc phục lỗi chặn JavaScript và CSS trong WordPress.

1. Sửa lỗi chặn Scripts & CSS với Autoptimize

Cách này đơn giản và được khuyến nghị 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. Sau khi kích hoạt, truy cập trang Settings » Autoptimize để cấu hình cài đặt plugin.

Bạn có thể bắt đầu đơn giản bằng cách bật tùy chọn trong phần JavaScript Options và CSS Options, sau đó nhấp vào nút lưu thay đổi.

Bây giờ bạn hãy kiểm tra trang web của mình bằng công cụ PageSpeed. Nếu vẫn còn các tệp JS & CSS bị chặn kết xuất, thì bạn cần quay lại trang cài đặt plugin và chọn vào nút ‘Show Advanced Settings’ ở trên cùng.

Plugin cho phép nhúng JS trực tiếp và xóa thẻ script như đối với seal.js hoặc jquery.js

Tiếp đến, cuộn xuống phần tùy chọn CSS và kích hoạt aggregate inline CSS.

Nhấn vào nút ‘Save changes and Empty Cache’ để lưu lại cài đặt. Một lần nữa, kiểm tra website của bạn với 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 bằng cách tối ưu hóa JavaScripts hoặc CSS của bạn.

Autoptimize tổng hợp mọi file javascript và CSS. Sau đó nó có tạo một file .js và .css duy nhất đã rút gọn code bằng cách tối ưu javascript/css. Và chèn thay thế vào website cùng với thuộc tính async / deferred.

2. Sửa lỗi chặn JavaScript sử dụng W3 Total Cache

Với phương thức này bạn có nhiều tùy chọn hơn & yêu cầu bạn đã cài đặt plugin W3 Total Cache trên website WordPress của bạn.

Sau khi kích hoạt plugin, bạn truy cập Performance » General Settings và tìm box ‘Minify’.

Trước tiên, bạn cần chọn ‘Enable’ & chọn cách thủ công ‘Manual’ với trường Minify mode. Nhấn vào nút lưu tất cả cài đặt để lưu trữ cài đặt của bạn.

Tiếp theo, bạn cần thêm scripts và CSS mà bạn muốn rút gọn.

Bạn có thể truy xuất URL của tất cả các tệp js và css được kết xuất chặn từ công cụ Google PageSpeed Insights.

Theo các đề xuất của công cụ này: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, nhấn vào ‘Show how to fix’. Nó sẽ hiển thị cho bạn danh sách các file JS và CSS.

Tìm URL của các script & CSS bị lỗi chặn bằng cách di chuột đến từng script/css và chép liên kết url của chúng.

Bây giờ bạn quay lại trang cài đặt W3 Total Cache và truy cập Performance » Minify.

Trước tiên, bạn cần thêm các tệp JavaScript mà bạn muốn được rút gọn. Cuộn xuống phần JS và trong phần ‘Operations in areas’, đặt kiểu nhúng thành ‘Non-blocking async’, cho phần .

Tiếp theo, bạn nhấn vào nút ‘Add script’ và dán các URL bạn lấy được ở công cụ Google PageSpeed. Sau đó, cuộn xuống phần CSS và nhấn nút ‘Add a stylesheet’, rồi làm tương tự.

Đừng quên nhấn nút ‘Save settings and purge cache’ để xóa cache và lưu lại cài đặt.

Lời kết

Tùy thuộc vào cách các plugin và giao diện WordPress của bạn sử dụng JavaScript và CSS, có thể khá khó khăn để khắc phục hoàn toàn tất cả các vấn kết xuất chặn của JavaScript và CSS.

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 CSS với CDN. Autoptimize cho phép bạn khắc phục điều đó bằng cách thêm thủ công CSS nội tuyến cần thiết.

Tuy nhiên, có thể khá khó khăn để tìm ra mã CSS nào bạn sẽ cần hiển thị ở trong phần đầu head của trang WordPress. Mã CSS này thường sử dụng để tạo bỗ cục layout cho website.

Mình hy vọng bài viết này bạn có thể khắc phục vấn đề kết xuất chặn ‘render blocking’ trong WordPress. Chúc bạn thành công.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook