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:
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:
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.
Yêu thích viết blog.