Trang chủ Kinh doanhKiến thức kinh doanh [5 Cách] Loại bỏ các tài nguyên chặn hiển thị hiệu quả

[5 Cách] Loại bỏ các tài nguyên chặn hiển thị hiệu quả

Tác giả: tranthang

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ả

Xem thêm:   Xu thế kinh doanh trong những năm sắp tới

Tài nguyên chặn hiển thị là gì? Cách loại bỏ các tài nguyên chặn hiển thị

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 .
Cách tìm tài nguyên chặn hiển thị

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ụ :
Không thêm thẻ CSS theo quy luật @importVớ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 .

Xem thêm:   Case Study là gì? 4 bước để trình bày một Case Study

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:

Thêm yếu tố<link> vào thẻ<head> của page HTML ” class=”size-full wp-image-750″ height=”100″ src=”https://seothanhcong.vn/wp-content/uploads/2021/08/html.png” width=”513″/></p><h3 id=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ẻ

Bài viết liên quan

Tham gia bình luận