10+ Cách loại bỏ tài nguyên chặn hiển thị hiệu quả, hữu ích

Cách loại bỏ tài nguyên chặn hiển thị cho website là thao tác quan trọng của nhà quản trị web. Chỉ số PageSpeed của website là yếu tố cần chú ý nếu muốn hoạt động ổn định. Nếu bạn gặp cảnh báo “Eliminate render-blocking resources” không biết cách xử lý thì hãy xem bài viết dưới đây. Xuyên Việt Media đã tổng hợp các cách loại bỏ tài nguyên chặn hiển thị để bạn dễ tham khảo. 

Đôi nét về tài nguyên chặn hiển thị 

Nhiều quản trị website newbie chưa hiểu tài nguyên chặn hiển thị là gì? Điều này thường khiến họ “lạc lối” trong quá trình thiết kế, vận hành website. Nói một cách dễ hiểu thì tài nguyên chặn hiển thị chính là các tệp dữ liệu tĩnh. Những tệp dữ liệu tĩnh quan trọng đóng vai trò lớn trong quá trình hiển thị trang web. Có thể kể đến HTML, CSS, JS, font chữ và hình ảnh…

Tài nguyên chặn hiển thị là lỗi hay xảy ra ở website cần được khắc phục 
Tài nguyên chặn hiển thị là lỗi hay xảy ra ở website cần được khắc phục

Lỗi tài nguyên chặn hiển thị xảy ra thường khiến người dùng có trải nghiệm “khó chịu” khi vào website. Thay vì truy cập website nhanh chóng, lúc này trang web thường mất thời gian xử lý tệp tài nguyên bị chặn hiển thị. Nhìn chung lỗi này thường xuất hiện ở các website sử dụng theme WordPress. 

>> Sàn giao dịch chứng khoán là gì? Vai trò của sàn chứng khoán

Những URL bị gắn là tài nguyên chặn hiển thị?

Hiện nay có ba kiểu URL bị gắn cờ là tài nguyên chặn hiển thị mà quản trị website nên chú ý. Bao gồm Scripts, CSS và HTML imports. Lý do khiến 3 URL này bị website coi là tài nguyên chặn hiển thị là vì: 

  • Nằm trong thẻ của tài liệu. 
  • Không có thuộc tính trì hoãn Defer.
  • Không có thuộc tính không đồng bộ Async. 
  • Không có tính chất Disabled.
  • Không tải được stylesheet. 
  • Không có thuộc tính media trùng khớp với thiết bị người dùng. 

Cách tìm tài nguyên chặn hiển thị hữu ích nhất 

Nếu bạn muốn khắc phục tình trạng tài nguyên chặn hiển thị thì trước tiên phải tìm ra “chúng” đã. Hiện nay các quản trị website thường sử dụng Google PageSpeed Insights để kiểm tra tốc độ trang web. Đồng thời còn tìm được lỗi tài nguyên chặn hiển thị thông qua các bước như sau: 

  • Bước 1: Đầu tiên bạn cần truy cập trang sau đó dán URL của website. 
  • Bước 2: Nhấn vào mục “Phân tích” để nhận kết quả chính xác. 
  • Bước 3: Google sẽ hiển thị các tài nguyên bị chặn hiển thị ở màn hình chính. 
Cách tìm tài nguyên chặn hiển thị vừa chính xác vừa hữu ích 
Cách tìm tài nguyên chặn hiển thị vừa chính xác vừa hữu ích

Tổng hợp các cách loại bỏ tài nguyên chặn hiển thị chính xác

Hiện nay có khá nhiều cách để quản trị website có thể ứng dụng để loại bỏ tài nguyên chặn hiển thị. Dưới đây chúng tôi đã bật mí chi tiết, bạn hãy ứng dụng theo để website hoạt động ổn định: 

1. Sử dụng thuộc tính media dành cho thẻ CSS điều kiện 

File CSS là các trình duyệt mặc định được website coi là tài nguyên chặn hiển thị. Chính vì thế, khi bạn thêm thuộc tính “media” vào thẻ <link> thì website sẽ hiểu. Lúc này sự tồn tại của file CSS là tài nguyên có điều kiện.

Điều kiện cần đáp ứng của file CSS đó là cao hoặc thấp hơn kích thước viewport. Phòng trường hợp bạn không biết thì viewport là thẻ cung cấp kích thước của khung hình và thiết bị cho website. 

Sử dụng thuộc tính media dành cho thẻ CSS điều kiện
Sử dụng thuộc tính media dành cho thẻ CSS điều kiện

 2. Không thêm thẻ CSS dựa theo quy luật @import 

Cú pháp @import thường giúp các file HTML trở nên gọn gàng. Tuy nhiên đây không phải lựa chọn tốt đối với việc trình bày và hiển thị. Loại bỏ tài nguyên chặn hiển thị thì cú pháp @import sẽ tham chiếu tới 1 tệp CSS khác cho website. Trang web lúc này sẽ tải lần lượt các tệp này về và hoạt động lại như bình thường. 

3. Sử dụng thuộc tính defer, async để xóa JavaScript

File JS (JavaScript) chèn vào thẻ <head> mà thường được website coi là tài nguyên chặn hiển thị. Lúc này các quản trị website cần khắc phục lỗi chặn hiển thị bằng cách chèn thẻ <script> trước thẻ đóng </body> thay vì thẻ <head>.  

4. Nén hoặc gộp file CSS và JavaScript lại với nhau

Bạn có thể nén hoặc gộp tất cả các tài nguyên chặn hiển thị ở trên website để việc hiển thị trang ổn định hơn. Bạn nên tham khảo một số công cụ hỗ trợ nén và gộp file hiệu quả như: 

  • CSS Minifier: Đây là công cụ rút gọn JS, CSS trực tuyến lên tới 80% kích thước ban đầu.
  • Minify Code: Công cụ này cho phép tăng tốc độ load trang, loại bỏ khoảng trắng các ký tự trống và gỡ bỏ một số ký tự không cần thiết cho website.
  • PostCSS: Đây là công cụ dùng JavaScript để xử lý CSS như cách tối ưu CSS. Đồng thời còn hỗ trợ biến và Mixins, sử dụng công nghệ CSS tương lai,…
Nén hoặc gộp file CSS và JavaScript lại với nhau 
Nén hoặc gộp file CSS và JavaScript lại với nhau

5. Tải phông chữ tùy chỉnh tại cục bộ 

Ít người biết rằng việc tùy chỉnh phông chữ ở phần <head> của tài liệu cũng tạo ra tài nguyên chặn hiển thị. Lúc này quản trị website nên thêm phông chữ cục bộ hoặc giảm thiểu CSS liên quan để nhóm nó lại với CSS.

Hiện nay có Trình trợ giúp Phông chữ Web được cung cấp bởi Google có hiệu quả sử dụng khá tốt. Quản trị website sẽ loại bỏ tài nguyên chặn hiển thị nhanh chóng, chính xác. 

>> Visa thương mại là gì? Thông tin cần biết để xin Visa

6. Một số cách khác 

  • Tách các tệp CSS dựa theo loại phương tiện sẽ giúp website duyệt nhanh chóng. 
  • Di chuyển các thẻ <script> và <link> xuống dưới cùng HTML của website. 
  • Nén tài nguyên dựa vào hình ảnh sẽ tăng tốc độ tải và duyệt trang web. 

Lời kết 

Bài viết trên đây Xuyên Việt Media đã bật mí cho bạn đọc một số cách loại bỏ tài nguyên chặn hiển thị hữu ích. Hy vọng sau khi theo dõi bạn sẽ ghi nhớ và ứng dụng các cách này thật chính xác. 

Liên hệ Công ty TNHH Thương Mại Dịch Vụ Xuyên Việt Media

  • Địa chỉ: Số 207A đường Nguyễn Văn Thủ, Đa Kao, Quận 1, TPHCM.
  • MST: 0315 964 953
  • Đại diện: Trần Công Thắng
  • Hotline: 0963 711 297

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *