Website luôn là một trong những yếu tố quan trọng cần được tối ưu. Nếu là một nhà quản trị web (webmaster) chắc hẳn bạn đã từng gặp các cảnh báo “Eliminate render-blocking resources” và có thể gây cho bạn sự bối rối. Để giải quyết vấn đề này, Tmarketing sẽ hướng dẫn bạn các cách loại bỏ tài nguyên chặn hiển thị tốt nhất hiện nay. Cùng theo dõi bài viết dưới đây nhé! Tài nguyên chặn hiển thị là gì? Tài nguyên chặn hiển thị là các tệp file tĩnh quan trọng trong quá trình hiển thị trang của website, ví dụ như font chữ, HTML, CSS và JavaScript. Trình duyệt sẽ ưu tiên xử lý các tệp quan trọng của tài nguyên chặn hiển thị này trước, khi trình duyệt truy cập vào một trang của website và gặp tài nguyên chặn hiển thị này. Sau đó, trình duyệt mới bắt đầu tải xuống phần còn lại của tài nguyên để hiển thị trên trang. Thế nhưng, các tài nguyên chặn không hiển thị (được tải sau) sẽ không làm trì hoãn việc hiển thị trên trang. Trình duyệt vẫn có thể tải chúng xuống một cách an toàn sau khi hiển thị các tài nguyên chặn hiển thị (render blocking resources) này trên trang. Lưu ý rằng: Không phải tất cả các tài nguyên mà trình duyệt cho là chặn hiển thị đều cần thiết cho thời gian phản hồi nội dung đầu tiên trên trang. Nó còn phụ thuộc vào đặc điểm riêng của từng trang khác nhau. Cách kiểm tra trang web liệu có tài nguyên chặn hiển thị Bạn có thể nhập bất kì URL mà bạn muốn kiểm tra chỉ cần sử dụng Google PageSpeed Insights để đánh giá xem trang web WordPress của bạn hiện có tài nguyên chặn hiển thị hay không. Sau nhập URL và phát hiện rằng bạn đang gặp vấn đề với tài nguyên chặn hiển thị. Lúc này, PageSpeed Insights hoặc Google Lighthouse trong Chrome sẽ tiến hành liệt kê từng tài nguyên riêng lẻ trong phần loại bỏ các tài nguyên chặn hiển thị. Kiểm tra tài nguyên quan trọng của trang Bước 1: Vào Google Chrome và mở DevTools được tích hợp sẵn bằng tổ hợp phím Ctrl + Shift + J trên Window hoặc Command + Option + J trên MacOS. Bước 2: Tại tab Coverage, bạn nhấn load lại trang. Bước 3: Lọc các tài nguyên quan trọng và lên phương án xử lý các tài nguyên không quan trọng khác. Cụ thể, các thẻ style CSS và code javascript sẽ được phân thành 2 màu: Xanh lá (quan trọng): Các thẻ style này được yêu cầu cho lần phản hồi nội dung đầu tiên trên trang. Các thẻ code này vô cùng quan trọng cho chức năng chính của trang web. Đỏ (không quan trọng): Các thẻ style này không hiển thị ngay lập tức trên nội dung trang, không được sử dụng để hỗ trợ cho chức năng chính của trang web. Nguồn: https://tmarketing.vn/tai-nguyen-chan-hien-thi/
