Tối ưu tốc độ tải trang khi SEO được coi là việc rất quan trọng nếu bạn muốn website xếp hạng cao trong các trang kết quả tìm kiếm. Đó là lý do tại sao công cụ Google PageSpeed Insights ra đời. Vậy cách nhận biết tài nguyên chặn hiển thị và cách loại bỏ các tài nguyên chặn hiển thị ra sao? Trong bài viết này, Seo Thành Công sẽ hướng dẫn bạn cách khắc phục điều này.
1. Tài nguyên chặn hiển thị là gì?
Tài nguyên chặn hiển thị được hiểu đơn thuần là các tệp tài liệu tĩnh quan trọng của website trong quy trình hiển thị website như HTML, CSS, JS, font chữ, hình ảnh … .
Khi trình duyệt của người dùng truy vấn vào website và gặp tài nguyên chặn hiển thị thì website sẽ ưu tiên giải quyết và xử lý các tệp tài nguyên chặn hiển thị ngày trước. Tiếp theo, mới khởi đầu tải phần tài nguyên còn lại để hiển thị trên trang. Lỗi này gặp khá nhiều ở các website dùng theme WordPress, ảnh hưởng tác động khá nhiều để thưởng thức người dùng .
Cách loại bỏ các tài nguyên chặn hiển thị ra sao? Mọi người tìm hiểu trong phần 3 nhé. Trước hết chúng ta phải biết cách tìm tài nguyên chặn hiển thị trong phần 2 trước đã
Bạn đang đọc: [5 Cách] Loại bỏ các tài nguyên chặn hiển thị hiệu quả
2. Cách tìm tài nguyên chặn hiển thị bằng Google PageSpeed Insights
Để tìm ra lỗi tài nguyên chặn hiển thị bằng cách kiểm tra vận tốc website của bạn bằng Google PageSpeed Insights bằng các bước sau đây :
Bước 1 : Truy cập trang và dán URL website
Bước 2 : Nhấn vào Phân tích để nhận tác dụng
Đề xuất từ Google so với việc loại bỏ tài nguyên chặn hiển thị. Nếu bạn thấy mình cũng có gợi ý này thì bạn nên khắc phục loại bỏ các tài nguyên chặn hiển thị để tối ưu vận tốc website một cách tốt nhất .
3. #5 Cách để loại bỏ các tài nguyên chặn hiển thị
3.1. Sử dụng thuộc tính media cho thẻ CSS điều kiện
File CSS được các trình duyệt mặc định xem là các tài nguyên chặn hiển thị. Nhưng nếu bạn thêm thuộc tính “media” vào thẻ thì trình duyệt sẽ hiểu đây là sự tồn tại của file CSS có điều kiện.
File CSS có điều kiện chỉ được áp dụng trong các trường hợp nhất định như cao hơn kích thước viewport hoặc thấp hơn kích thước viewport.
Thẻ viewport – phân phối cho website biết kích cỡ từng khung hình / thiết bị .
3.2. Không thêm thẻ CSS theo quy luật @import
Cú pháp @ import giúp file HTML sẽ ngăn nắp hơn, tuy nhiên đây không phải là sự lựa chọn tốt trong việc trình diễn và hiển thị .
Khi sử dụng cú pháp @ import để tham chiếu tới 1 tệp CSS khác thì trình duyệt sẽ tải lần lượt các tệp này về .
Ví dụ :
Với ví dụ trên thì tệp main.css sẽ chỉ khởi đầu được tải về khi tệp style.css đã được tải xong. Hãy xem hình ví dụ trên để dễ hình dùng hơn .
Như vậy rõ ràng việc sử dụng thẻ sẽ giảm tốc độ tải trang và qua đó giúp tăng trải nghiệm của người dùng hơn so với dùng cú pháp @import trong CSS.
Bạn cần thêm yếu tố vào thẻ
của page HTML tương tự như hình sau:3.3. Sử dụng thuộc tính defer và async xóa JavaScript chặn hiển thị
File JS (JavaScript) được chèn vào thẻ
luôn bị các trình duyệt xem là các tài nguyên chặn hiển thị.Bạn có thể khắc phục bằng cách chèn thẻ
Source: https://tapchixuyenviet.com
Category: Kiến thức kinh doanh