Loại bỏ các tài nguyên chặn hiển thị giúp tăng tốc độ Load trang và mang nhiều lợi ích về SEO. Đồng thời, khách truy cập cũng thấy được nhiều tài nguyên trên trang Web của bạn hơn.
Thời gian tải trang càng ít sẽ càng có lợi cho việc SEO trang Web. Tuy nhiên, vì một số lý do, trong đó có tài nguyên chặn hiển thị khiến tốc độ tải trang chậm đi đáng kể. Điều này không chỉ ảnh hưởng không tốt đến SEO mà còn tác động tiêu cực đến trải nghiệm người dùng.
Vậy tài nguyên chặn hiển thị là gì và làm sao loại bỏ chúng tối ưu nhất? Navee Academy đã viết bài Cách tốt nhất để loại bỏ các tài nguyên chặn hiển thị hiệu quả nhằm giúp bạn giải quyết vấn đề này.
1. Khái niệm tài nguyên chặn hiển thị là gì?
Tài nguyên chặn hiển thị là những tệp dữ liệu tĩnh của trang Web như CSS, HTML, JS, hình ảnh, Font chữ,… Chúng đóng vai trò quan trọng trong quá trình hiển thị Website.
Các tệp quan trọng của tài nguyên chặn hiển thị sẽ được trang Web ưu tiên xử lý trước khi người dùng truy cập Website qua trình duyệt. Sau đó, phần tài nguyên còn lại mới được tải và hiển thị trên trang Web. Lỗi này ảnh hưởng trải nghiệm người dùng khá nhiều và thường gặp ở những trang Web dùng Theme WordPress.
2. Xác định tài nguyên chặn hiển thị như thế nào?
Bạn có thể sử dụng Google PageSpeed Insights để kiểm tra tốc độ Load trang và tìm lỗi tài nguyên chặn hiển thị qua hai bước đơn giản:
- Đầu tiên, bạn truy cập vào trang rồi dán URL của Website.
- Tiếp theo, bạn Click vào Phân tích, kết quả sẽ hiển thị để bạn dễ dàng phân tích, cải thiện chất lượng trang Web.
Bạn có thể thấy có gợi ý đề xuất từ Google với việc loại bỏ tài nguyên chặn hiển thị. Trong trường hợp này, bạn cần khắc phục để tối ưu tốc độ trang.
3. Cách loại bỏ tài nguyên chặn hiển thị nhanh chóng
Navee Academy sẽ hướng dẫn 5 cách hiệu quả để loại bỏ các tài nguyên chặn hiển thị. Các bạn hãy lướt xem ngay bên dưới nhé.
3.1 Dùng thuộc tính Defer và Async xóa JavaScript chặn hiển thị
Các trình duyệt sẽ luôn mặc định xem File JavaScript thêm vào thẻ <Head> của Website là tài nguyên bị chặn hiển thị. Để xóa chúng, ngay trước khi đóng thẻ </Body>, bạn hãy chèn thẻ <Script> thay vì thẻ <Head> như bình thường nhé.
Lúc này, sau khi tải hoàn tất toàn bộ Code HTML, trình duyệt mới bắt đầu tải tệp JavaScript. Tuy nhiên, những yếu tố được tải bởi JavaScript (như hiệu ứng, Ads, chức năng động,…) sẽ được tải sau. Nguyên nhân bởi JavaScript được tải sau. Việc này chắc chắn làm kết nối chậm, khiến trải nghiệm người dùng xấu đi.
Để giải quyết vấn đề này, bạn có thể tận dụng thuộc tính Defer và Async của thẻ <Script>. Những thuộc tính khiến thẻ <head> của Website chặn không hiển thị được chèn <script>. Còn thuộc tính Defer sẽ chỉ dẫn trình duyệt tải thẻ <script>. Nhờ đó, quá trình hiển thị trên trang không bị trình duyệt chặn.
3.2 Không thêm thẻ CSS theo quy luật @Import
Để thêm thẻ CSS vào trang, trong File HTML bạn hãy chèn thẻ <Link rel=”Stylesheet”> vào. Tuy nhiên, đây không phải là giải pháp thích hợp trong việc hiển thị/trình bày. Bởi dù luật @Import giúp File HTML tránh Code thừa, gọn gàng hơn nhưng nó sẽ khiến trình duyệt xử lý tệp CSS chậm hơn. Nguyên nhân bởi nó phải tải mọi tệp được nhập vào.
Do đó, bạn có thể dùng các công cụ nén để gộp nhiều File CSS hay dùng thẻ <Link> nếu muốn thêm nhiều tệp CSS cho Website của mình.
3.3 Dùng thuộc tính Media cho thẻ CSS điều kiện
Đây là cách loại bỏ các tài nguyên chặn hiển thị rất hiệu quả. Trình duyệt mặc định xem tệp CSS là tài nguyên chặn hiển thị. Tuy nhiên,bạn có thể thêm thuộc tính Media vào thẻ <Link> để trình duyệt hiểu sự tồn tại của tệp CSS này là có điều kiện.
Bạn cần lưu ý chỉ trong trường hợp nhất định tệp CSS có điều kiện mới được áp dụng. Chẳng hạn tệp này thấp hơn hoặc cao hơn kích thước Viewport.
3.4 Giảm File CSS và JavaScript
Trong quá trình hiển thị những yếu tố quan trọng trên trang, bạn có thể loại bỏ các tệp JavaScript và CSS không cần thiết. Bên cạnh đó, bạn còn có thể gộp, nén mọi tài nguyên chặn hiển thị ở trên trang.
Chẳng hạn bạn có thể nén các tệp tách rời để chúng nhẹ hơn, gộp những tệp có quy luật tải giống nhau để có ít tệp hơn. Nhờ đó, quá trình hiển thị trang đầu tiên sẽ được hoàn thành nhanh hơn.
3.5 Dùng Plugin để loại bỏ
Hiện tại có nhiều Plugin có thể giúp loại bỏ các tài nguyên chặn hiển thị.
- Autoptimize + Async:
- Đầu tiên, bạn cài đặt hai công cụ này. Sau đó, bạn cung cấp cho Website các bản sao bộ nhớ đệm ở dạng Deferre hoặc Async.
- Bạn đến Setting, chọn Async JavaScript rồi bật Async JavaScript, đồng thời trong hộp cài đặt bạn Áp dụng Async hoặc Áp dụng Trì hoãn.
- W3 Total Cache:
Plugin này nén Cache giúp tăng tốc của Website WordPress. W3 Total Cache hỗ trợ Object Cache, Page Cache hay Database Cache.
- WP Rocket:
WP Rocket loại bỏ tài nguyên JS, CSS giúp loại bỏ CSS và Javascript chặn hiển thị trên WordPress hiệu quả. Nhờ đó, ó giúp tối đa công suất của Website WordPress.
Tóm lại, loại bỏ các tài nguyên chặn hiển thị là việc bạn cần quan tâm để trang Web được tối ưu tốt hơn. Bên cạnh đó, bạn nên phân tích hiệu suất, tính năng của Website thường xuyên để đảm bảo trang luôn đạt tốc độ tải tốt nhất. Navee Academy hy vọng các kiến thức trên hữu ích cho bạn nhé.