HomeHướng dẫn WordPress

Cách khắc phục render-blocking javascript and css trong WordPress

Like Tweet Pin it Share Share Email

vps vultr 728

Khi bạn kiểm tra website bạn bằng công cụ Google PageSpeed, bạn có thể thấy vấn đề render-blocking javascript and css như bên dưới:

render-blocking javascript and css

Trong bài viết này mình sẽ chỉ cho bạn cách khắc phục lỗi này

Đọc thêm: Thủ thuật tăng tốc WordPress

Render-blocking javascript and css là gì?

Theme và plugin trong WordPress thường call các tập tin Javascript và CSS. Việc tải những tập tin như vậy sẽ ảnh hưởng đến tốc độ tải trang.

Tệ hơn trình duyệt sẽ phải tải những file đó trước khi tải toàn bộ mã HMTL để hiển thị nội dung trang web. Nghĩa là người dùng truy cập trang web của bạn sẽ phải đợi chờ website tải toàn bộ file css và javascript.

Những file javascript và css gây cản trở trình duyệt phục vụ người dùng xem trang gọi là render-blocking javascript and css.

Bây giờ chúng ta xem khắc phục lỗi này để cải thiện điểm trong Google PageSpeed

Sử dụng plugin Autoptimize khắc phục lỗi render blocking scripts and css

Như bài này, mình đã đề cập plugin Autoptimize là plugin phổ biến nhất hiện giờ xử lý các vấn đề về file javascript và css.

Đầu tiên, bạn cài đặt và activate plugin.

Sau đó bạn đi tới Settings -> Autoptimize để cấu hình plugin.

Để xử lý được vấn đề render blocking javascript and css, bạn cần click vào nút Show Advanced Settings ở trên đỉnh. Lúc này bạn sẽ nhìn thấy thêm nhiều tùy chọn nâng cao. Bạn chọn tùy chọn như bên dưới:

render-blocking javascript and css 2

Mình giải thích thêm các tùy chọn như sau:

Phần HTML Options: bạn tích vào tùy chọn này để tối ưu lại mã HTML giúp trang bạn nhẹ bớt.

Javascript Options: chọn tùy chọn Optimize Javascript Code. Tiếp đó chọn tùy chọn Also aggregate inlinde JS. Chọn tùy chọn này sẽ để đưa javascript vào trong HTML như vậy trình duyệt sẽ không phải tải toàn bộ JS xong rồi mới tải HTML.

Bỏ hết file script mặc định như seal.js hay query.js ở phần exclude scripts from Autoptimize.

Phần CSS Options:

Chọn tùy chọn optimize CSS Code.

Chọn tùy chọn Also aggreagete inline CSS tác dụng như phần Javascript.

Chọn tùy chọn inline all CSS.

Bây giờ bạn quay trở lại Google PageSpeed xem đã được chưa nhé!

Có lưu lý bạn cần biết:

Những cách khắc phục kiểu này có thể gây vỡ giao diện hay giao diện website của bạn hoạt động không đúng. Nếu bạn không may rơi vào trường hợp như vậy bạn có thể xem plugin nào đang bị ảnh hưởng.

Nếu plugin không quan trọng bạn có thể không sử dụng hoặc chuyển sang plugin khác xem sao.

Bạn cũng không nên quá ám ảnh với điểm số trên Google PageSpeed. Nó chỉ là hướng dẫn giúp bạn cải thiện website.

Trải nghiệm thực tế mới quan trọng.

Đó là tất cả. Bạn đã học được cách khắc phục vấn đề render blocking javascript and css trong WordPress.

Bạn đã có kinh nghiệm khắc phục vấn đề này? Mình rất vui nếu bạn chia sẻ cách làm ở phần bình luận bên dưới.

getresponse_300x250

Đăng ký 30 ngày sử dụng miễn phí. Không ràng buộc. Không cần cung cấp thẻ visa. Xem cách đăng ký.

Bình luận (1)

Trả lời

Mình rất vui khi bạn đã quyết định để lại comment. Chú ý tất cả comment đều được kiểm duyệt cẩn thận nên đừng cố spam hoặc quảng cáo. Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Name. Xin cảm ơn.

Địa chỉ email của bạn sẽ không được tiết lộ Trường đánh dấu * là bắt buộc

Scroll Up