2 Cách Loại Bỏ Tài Nguyên Chặn Hiển Thị (Render-blocking) Đơn Giản

Bạn có muốn loại bỏ các tài nguyên chặn hiển thị trong WordPress không? Có thể bạn sẽ thấy một đề xuất xóa render-blocking scripts và CSS khi kiểm tra trang web của mình trên Google PageSpeed Insights,.

Trong bài viết này, Hoc11.vn sẽ chỉ cho bạn cách dễ dàng khắc phục chúng để cải thiện điểm số Google PageSpeed – một trong các công việc phải làm khi tối ưu SEO cho website ​​của bạn.

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

Trước hết, bạn cần phải biết “front end” là thuật ngữ nói về giai đoạn thiết kế và xây dựng giao diện website hoặc ứng dụng web bằng các ngôn ngữ HTML, CSS, JavaScript để người dùng xem và tương tác trực tiếp trên đó.

Mỗi trang web WordPress đều có một theme và plugin gắn tệp JavaScript và CSS vào front end của website. Những ngôn ngữ lập trình này có thể tăng thời gian tải trang của web 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 JavaScript 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 kết nối chậm hơn sẽ phải chờ thêm vài mili giây nữa để xem trang.

Các chủ sở hữu website cần phải khắc phục vấn đề này nếu muốn đạt điểm số Google PageSpeed ​​tối đa.

Sử dụng Google PageSpeed ​​Insights để tìm các tài nguyên chặn hiển thị 

Là một công cụ trực tuyến của Google dùng để kiểm tra và tối ưu hóa website. Công cụ này kiểm tra trang web theo quy định của Google về tốc độ và đưa ra các đề xuất cải thiện thời gian tải trang của bạn.

Nó cho bạn thấy số điểm dựa trên lượng tiêu chuẩn đạt được của website. Hầu hết các trang web sẽ nằm trong khoảng từ 50-70 điểm. Tuy nhiên, một số chủ sở hữu cảm thấy bắt buộc phải có điểm số cao nhất là 100.

Vậy, bạn có thực sự cần 100 điểm Google PageSpeed ​​không?

Mục đích của Google PageSpeed Insights ​​là giúp bạn xác định phương hướng cải thiện hiệu suất cũng như thời gian tải trang dựa vào các chuẩn mực. Và bạn không cần phải tuân thủ một cách nghiêm ngặt.

Hãy nhớ rằng, tốc độ chỉ là một trong nhiều yếu tố để Google xếp hạng website của bạn. Nó trở nên quan trọng bởi công dụng cải thiện trải nghiệm người dùng trên trang web của bạn.

Nhưng để mọi người truy cập mượt hơn không chỉ đòi hỏi bạn tạo ra một website chạy nhanh mà còn cần cung cấp thông tin hữu ích, giao diện và nội dung hấp dẫn kèm video, hình ảnh.

Hiện nay, các dịch vụ SEO TPHCM đều tập trung vào tối ưu tốc độ tải trang cũng như nâng cao trải nghiệm duyệt web.

Cách loại bỏ các tài nguyên chặn hiển thị

Chúng tôi đề xuất hai phương pháp xóa render blocking JavaScript và CSS trong WordPress. Hãy lựa chọn phương án phù hợp với trang web của bạn nhất.

1. Khắc phục Render Blocking Script và CSS bằng plugin Autoptimize

Cách này khá đơn giản và được các công ty marketing hàng đầu Việt Nam khuyên dùng.

Đầu tiên là cài đặt và kích hoạt plugin Autoptimize. Sau đó, bạn vào mục Settings -> Autoptimize, đánh dấu chọn vào Optimize JavaScript Code và Optimize CSS Code rồi nhấn nút Save Changes.

Bây giờ thử kiểm tra website bằng công cụ PageSpeed. Nếu vẫn còn các nguồn chặn hiển thị thì quay lại trang cài đặt của plugin và click nút “Show Advanced Settings” ở trên cùng.

Tại đây, bạn có thể bao gồm JS nội tuyến trong plugin và xóa những script được loại trừ bởi các mặc định như seal.js hoặc jquery.js.

Tương tự, xuống tùy chọn CSS cho phép plugin tổng hợp CSS nội tuyến. Nhấp vào “Save changes and Empty Cache” để lưu các thay đổi và dọn sạch plugin cache (bộ nhớ đệm của plugin).

Lúc này, kiểm tra trang web lại lần nữa với công cụ PageSpeed. Đảm bảo rằng bạn đã kiểm tra kỹ lưỡng và không có sai phạm nào khi tối ưu hóa JavaScripts hoặc CSS của mình.

Nó hoạt động như thế nào?

Autoptimize tập hợp tất cả enqueued JavaScript và CSS. Sau đó, nó tạo các tệp CSS, JavaScript rút gọn và cung cấp các bản sao bộ nhớ đệm cho trang web của bạn ở dạng async hoặc deferred.

Điều này cho phép bạn khắc phục render blocking scripts và CSS. Lưu ý là nó cũng có thể ảnh hưởng đến hiệu suất và hiển thị trang web của bạn.

2. Sửa chữa Render Blocking JavaScript bằng W3 Total Cache Plugin

Phương pháp này đòi hỏi nhiều công sức hơn và chỉ gợi ý cho những người đã sử dụng plugin W3 Total Cache trên trang web của họ.

Trước tiên, bạn cũng cần cài đặt và kích hoạt plugin W3 Total Cache. Kế tiếp, vào Performance -> General Settings và xuống mục Minify.

Xem bạn đã click vào “Enable” chưa và sau đó chọn “Manual” ở phần “Minify Mode”. Nhấn nút “save all settings” để lưu lại cài đặt của bạn. Thêm các script và CSS mà bạn muốn thu nhỏ.

Bạn có thể nhận URL của tất cả script và CSS chặn hiển thị từ công cụ Google PageSpeed ​​Insights.

Trong đề xuất: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”, click vào “Show how to fix”. Nó sẽ hiển thị cho bạn danh sách của scripts và CSS.

Di chuyển chuột đến một script và nó sẽ hiển thị cho bạn URL đầy đủ để sao chép.

Quay trở về trang quản trị WordPress của bạn và đến mục Performance -> Minify, thêm các tệp JavaScript mà bạn muốn thu nhỏ. Ở mục “Operations in areas” trong phần JS, đặt loại nhúng thành “Non-blocking async” cho phần

.

Nhấn vào nút “Add script” và dán URL của script đã sao chép từ công cụ Google PageSpeed.

Khi đã hoàn tất, tiếp tục xuống phần CSS và nhấp chọn nút “Add a stylesheet”, dán URL CSS đã sao chép từ công cụ Google PageSpeed.

Cuối cùng, click “Save settings and purge cache” để lưu lại thiết lập của bạn. Truy cập công cụ Google PageSpeed ​​lần nữa và kiểm tra lại trang web của bạn để bảo đảm rằng mọi thứ đều hoạt động tốt.

Xử lý sự cố

Tùy thuộc vào cách plugin và theme WordPress của bạn sử dụng JavaScript và CSS như thế nào, sẽ khá khó khăn để khắc phục hoàn toàn tất cả vấn đề JavaScript và CSS chặn hiển thị.

Mặc dù có các công cụ trên trợ giúp, nhưng các plugin của bạn cũng cần những script nhất định ở mức độ ưu tiên khác nhau để hoạt động chính xác. Trong trường hợp đó, các giải pháp trên có khả năng phá vỡ các plugin của bạn hoặc mang đến bất ngờ cho bạn.

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 tính năng CSS cho above the fold content. 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 để hiển thị above fold area của theme.

Kết luận

Hy vọng đến đây bạn đã biết cách loại bỏ các tài nguyên chặn hiển thị trong WordPress.

Nếu thích bài viết này hay có góp ý nào, hãy để lại bình luận ở phía dưới và tiếp tục theo dõi những chủ đề khác của chúng tôi nhé.