Trong quá trình thiết kế và kiểm tra tốc độ website với công cụ Google Pagespeed Insights thì đôi khi bạn sẽ nhận được cảnh báo về việc xuất hiện các tài nguyên chặn hiển thị khiến bạn gặp tình trạng web báo lỗi và không hiển thị đầy đủ. Vậy làm thế nào để loại bỏ các tài nguyên chặn hiển thị này? Cùng Truyền thông TMS tìm hiểu thông qua 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ị (render-blocking resources) là những tệp file tĩnh quan trọng trong quá trình hiển thị trang của website như HTML, font chữ, JavaScript, CSS,… Những tệp quan trọng của tài nguyên chặn hiển thị này sẽ được xử lý trước, rồi mới tải xuống phần tài nguyên hiển thị còn lại trên trang trong quá trình bạn truy cập vào website.
Do đó loại bỏ các tài nguyên chặn hiển thị là việc làm cần thiết nếu bạn muốn truy cập vào website nhanh chóng và không gặp bất kỳ sự cố gì.
Cách xác định tài nguyên quan trọng
Việc xác định tài nguyên quan trọng rất “quan trọng” vì nó giúp bạn tránh việc loại bỏ nhầm để khỏi tốn thời gian trong việc tìm cách khôi phục tài nguyên bị bỏ nhầm đó.
Bạn cần sử dụng tab Coverage trong Dev Tools của Chrome để xác định CSS và JavaScript. Hai thành phần này sẽ được đánh dấu bằng 2 màu khác nhau để bạn dễ nhận biết:
- Màu xanh lá: Là thành phần quan trọng cốt lõi của trang và thường xuất hiện ở màn hình đầu tiên.
- Màu đỏ: Phần không quan trọng và được dùng cho các nội dung không được nhìn thấy ngay lập tức (not immediately visible)
Đối với mã quan trọng, bạn cần chuyển những mã đó từ URL chặn hiển thị sang dạng inline nội tuyến trong HTML và những tài nguyên tài sẽ được trang web sử dụng khi tiến hành tải trang.
Còn với những mã không quan trọng, bạn có thể tiếp tục giữ nó trong URL và đánh dấu bằng thuộc tính async hoặc defer để sử dụng sau này. Với những mã không sử dụng tới thì bạn có thể loại bỏ đi.
Những cách loại bỏ các tài nguyên chặn hiển thị
Loại bỏ Javascript chặn hiển thị
Đây là một trong những cách loại bỏ các tài nguyên chặn hiển thị tối ưu nhất dành cho những nhà thiết kế website.
Đầu tiên bạn cần xác định những Javascript quan trọng và không quan trọng. Sau khi xác định xong thì hãy chuyển những mã đó từ URL sang Inline trong trang HTML.
Với những mã Javascript không quan trọng thì bạn có thể xóa đi nếu không cần sử dụng tới.
Loại bỏ chặn CSS chặn hiển thị
Cách làm này cũng tương tự như việc loại bỏ Javascript chặn hiển thị.
Trước tiên bạn cần đưa những CSS quan trọng vào trong khối <style> ở phần <head> của trang HTML rồi sau đó dùng link preload để tải những CSS còn lại theo cách không đồng bộ Asynchronously.
Ngoài ra, công cụ Critical nằm ở ngay đầu cũng rất hữu dụng trong việc giúp bạn xử lý trích xuất và nội tuyến CSS một cách hoàn toàn tự động.
Một cách khác để loại bỏ CSS chặn hiển thị hiệu quả đó là sắp xếp CSS vào các file khác nhau bằng query media. Sau đó thêm thuộc tính media vào từng liên kết stylesheet. Kết quả là trình duyệt chỉ chặn “first paint” và chỉ nhận stylesheet phù hợp với thiết bị của người dùng trong quá trình tải trang.
Bước cuối cùng bạn cần tối thiểu hóa CSS để loại bỏ khoảng trống và các ký tự dư thừa nhằm đảm bảo rằng trang của bạn sẽ có những CSS nhỏ nhất để cung cấp cho người dùng.
Loại bỏ tài nguyên hiển thị kiểu imports
Ở cách này, bạn chỉ cần đánh dấu những HTML imports không quan trọng bằng thuộc tính async. Từ đó, thuộc tính async sẽ tận dụng tối đa những HTML imports đã được đánh dấu.
Trên đây là hướng dẫn chi tiết của TMS Digital Marketing về cách loại bỏ các tài nguyên chặn hiển thị website để giúp các nhà thiết kế website thuận lợi hơn trong công việc của mình. Nếu các bạn còn bất kỳ thắc mắc nào hãy liên hệ ngay với chúng tôi để được giải đáp kịp thời nhé!
