Tài nguyên chặn hiển thị là một cảnh mà bất cứ các webmaster đều muốn loại bỏ bởi vì việc loại bỏ các tài nguyên chặn hiển thị sẽ giúp cho website tối ưu hơn, có tốc độ tải trang nhanh hơn. Vậy chính xác thì tài nguyên chặn hiển thị là gì? Đâu là cách loại bỏ các tài nguyên chặn hiển thị tối ưu nhất? Cùng DDI.VN giải đáp ngay 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à các tệp file tĩnh quan trọng trong quá trình hiển thị trang của website, ví dụ như HTML, font chữ, JavaScript hay CSS.
Khi truy cập vào một trang của website và gặp tài nguyên chặn hiển thị, thì trình duyệt sẽ ưu tiên xử lý các tệp quan trọng của tài nguyên chặn hiển thị này trước. Sau đó bắt đầu tải xuống phần còn lại của tài nguyên để hiển thị trên trang.
Những tài nguyên chặn không hiển thị (được tải sau) sẽ không làm trì hoãn việc hiển thị trên trang. Sau khi hiển thị các tài nguyên chặn hiển thị này, trên trang trình duyệt vẫn có thể tải chúng xuống một cách an toàn.
Tuy nhiên, không phải toàn bộ các tài nguyên mà trình duyệt cho là chặn hiển thị đều cần thiết cho thời gian phản hồi nội dung đầu tiên trên trang. Điều này còn phụ thuộc vào đặc điểm riêng của từng trang khác nhau.
Xem thêm: Cấu trúc Silo là gì?
Kiểm tra tài nguyên chặn hiển thị trên website bằng Google PageSpeed Insights
Sử dụng Google PageSpeed Insights để đánh giá website của bạn hiện có tài nguyên chặn hiển thị hay không. Các bước thực hiện như sau:
- Bước 1: Truy cập trang https://pagespeed.web.dev/
- Bước 2: Dán URL trang web mà bạn muốn kiểm tra, nhấp vào phân tích để xem kết quả.
Kiểm tra tài nguyên chặn hiển thị bằng Google PageSpeed Insights
Trong trường hợp, bạn gặp vấn đề với tài nguyên chặn hiển thị. PageSpeed Insights sẽ từng liệt riêng lẻ trong phần loại bỏ các tài nguyên chặn hiển thị. Kiểm tra tài nguyên quan trọng của trang.
Xem thêm: SEO Onpage
Kiểm tra tài nguyên quan trọng của trang
Sau khi kiểm trang bằng PageSpeed Insights nếu phát hiện rằng bạn đang gặp vấn đề với tài nguyên chặn hiển thị, lúc này bạn cần xác định được các tài nguyên quan trọng của trang để tránh trường hợp loại bỏ nhầm. Bởi vì nếu loại bỏ nhầm thì việc khôi phục tài nguyên thường rất khó và tốn nhiều thời gian của.
Để xác định tài nguyên quan trọng, chúng ta sẽ sử dụng tab Coverage trong Devtools của Google Chrome để xác định CSS và JavaScript.
- Bước 1: Mở DevTools được tích hợp sẵn vào Google Chrome bằng tổ hợp phím Ctrl + Shift + J trên Window hoặc Command + Option + J trên MacOS.
- Bước 2: Tại tab Coverage, bạn nhấn load lại trang
- Bước 3: Lọc các tài nguyên quan trọng và lên phương án xử lý các tài nguyên không quan trọng khác. Cụ thể, các thẻ style CSS và code javascript sẽ được phân thành 2 màu:
- Màu xanh (quan trọng): đầy là những tài nguyên ảnh hưởng đến những phản hồi đầu tiên của trang. Và chắc chắn nó có tác động quan trọng tới chức năng của trang.
- Màu đỏ (không quan trọng): các thẻ style không hiển thị ngay lập tức khi load trang. Không có ảnh hưởng lớn đến chức năng của trang
5 cách loại bỏ tài nguyên chặn hiển thị tốt nhất 2021
Cách 1: Sử dụng thuộc tính media cho thẻ CSS điều kiện
Thông thường các trình duyệt sẽ mặc định tất cả các file CSS là các tài nguyên chặn hiển thị. Tuy nhiên, bạn có thể thông báo cho trình duyệt về sự tồn tại của file CSS có điều kiện khi thêm thuộc tính media vào thẻ .
File CSS có điều kiện chỉ được sử dụng trong các trường hợp nhất định. Ví dụ khi: cao/ thấp hơn kích thước viewport (thẻ meta viewport cho biết giao diện website hiển thị trên từng thiết bị/ khung hình). Với thuộc tính meta, bạn có thể xác định điều kiện của từng thiết bị riêng biệt đối với file CSS.
Ví dụ 1:
Để xử lý vấn đề hiển thị cho từng giao diện thiết bị, bạn có thể dùng bất kỳ giá trị nào cho media query trong file CSS.
<link href=”print.css” rel=”stylesheet” media=”print”> <link href=”large.css” rel=”stylesheet” media=”screen and (min-width: 1200px)”> <link href=”mobile.css” rel=”stylesheet” media=”screen and (max-width: 500px)”>
Mặc dù các file này vẫn được tải trên toàn bộ các thiết bị nhưng chúng sẽ trở thành tài nguyên chặn không hiển thị nếu không đáp ứng đúng điều kiện trong thẻ CSS. Và các thẻ này vẫn là tài nguyên chặn hiển thị nếu đáp ứng đúng điều kiện.
Ví dụ 2:
Thẻ stylesheet mobile.css ở ví dụ 1 sẽ trở thành tài nguyên chặn hiển thị trên thiết bị mobile với độ rộng viewport tối đa là 500px. Nhưng nếu đối với thiết bị có độ rộng viewport lớn hơn 500px thì thẻ stylesheet mobile.css ở ví dụ 1 sẽ trở thành tài nguyên chặn không hiển thị.
Trường hợp bạn có file CSS sẵn chỉ dành cho một hoặc một vài Queries, hãy giải nén tất cả các luật @media và lưu chúng thành các file riêng biệt bằng plugin PostCSS. Thủ thuật tối ưu hiển thị này được gọi là phân tách code.
Thủ thuật phân tách code này thược được nhắc đến trong conjunction với JavaScript nhưng bạn cũng có thể phân tách các file CSS lớn hơn. Hoặc nếu bạn cần rút ngắn thời gian tải các tài nguyên hiển thị quan trọng và giảm thời gian tải trang đầu tiên thì cũng có thể load từng file riêng.
Cách 2: Không thêm thẻ CSS theo quy luật @import
Để thêm thẻ CSS vào trang, chúng ta thực hiện bằng cách:
- Chèn thẻ vào file HTML
- Thêm luật @import vào file CSS
Lưu ý: Việc @import sẽ giúp cho file HTML gọn gàng hơn nhưng cần tránh mã code thừa cũng như cho phép bạn giữ toàn bộ các dependencies biên dịch file CSS ở cùng một nơi. Tuy nhiên trong việc trình bày/ hiển thị thì đây không phải là một sự lựa chọn khôn ngoan!
Luật @import cho bạn nhập file CSS từ các Stylesheet khác nhưng cách này sẽ khiến cho trình duyệt xử lý file CSS chậm hơn, bởi vì nó phải tải tất cả các file được nhập vào. Quá trình hiển thị sẽ bị chặn lại cho đến khi quá trình này diễn ra.
Nếu bạn muốn thêm nhiều file CSS cho trang web cho mình, bạn có thể dùng thẻ <link> hoặc dùng các công cụ nén/ rút gọn file để gộp các file CSS lại giúp tăng tốc độ tải trang.
Cách 3: Nén hoặc gộp file CSS và JavaScript
Xem thêm: Textlink là gì
Bạn có thể nén hoặc gộp tài nguyên chặn hiển thị và chặn không hiển thị trên trang song song với việc loại bỏ các file CSS và JavaScript không cần thiết trong quá trình hiển thị các yếu tố quan trọng trên trang.
Ví dụ: bạn có thể gộp các file có cùng quy luật tải giống nhau và nén các file tách rời. Bởi vì các file đã được nén sẽ nhẹ hơn và việc gộp file đồng nghĩa với việc có ít file hơn trong quá trình hiển thị các yếu tố quan trọng trên trang. Như vậy việc hiển thị trang đầu tiên sẽ hoàn thành sớm hơn. Bên cạnh đó, quá trình này sẽ tốn ít thời gian để tải các tài nguyên chặn không hiển thị.
Hiện này có khá nhiều công cụ có sẵn giúp bạn nén hoặc gộp file như: Minify, CSS Minifier, Minify Code và PostCSS.
Và kết hợp sử dụng với công cụ webpack, Parcel, Rollup cùng với chức năng nén, gộp, phân tách để nhanh chóng giảm số lượng tài nguyên chặn hiển thị.
Cách 4: Sử dụng thuộc tính defer và async để loại bỏ thẻ JavaScript chặn hiển thị
File JavaScript được thêm vào thẻ <head> của website luôn bị các trình duyệt mặc định xem là các tài nguyên chặn hiển thị. Bạn có thể xóa chúng ra khỏi quá trình hiển thị các tài nguyên quan trọng bằng cách:
Chèn thẻ <script> ngay trước khi đóng thẻ </body> thay vì là thẻ <head> như thông thường.
Khi đó, các trình duyệt sẽ bắt đầu tải file JavaScript sau khi đã hoàn tất tải toàn bộ code HTML. Bởi vì JavaScript được tải sau nên các yếu tố được tải bởi nó như ads, chức năng động, hiệu ứng, … cũng sẽ được tải sau. Như vậy nếu file JavaScript càng nặng thì thời gian để tải được cả trang web càng lâu và ảnh hưởng xấu đến trải nghiệm của người dùng.
Thuộc tính Defer và Async:
Giải pháp cho vấn đề này chính là thuộc tính defer và async của thẻ <Script>. Hai thuộc tính này đều là thuộc tính Boolean – huộc tính cho các phép so sánh và điều kiện trong JavaScript.
Các thuộc tính này khiến <script> được chèn vào thẻ <head> của website chặn không hiển thị. Với thuộc tính defer sẽ chỉ dẫn cho trình duyệt tải thẻ <script> để trình duyệt không chặn quá trình hiển thị trên trang.
Ví dụ:
thẻ <script> defer cho phép tải theo thứ tự, chỉ khi thiết lập nondefer thì thẻ script được hiển thị theo mặc định. Lúc này, script01.js sẽ được thực hiện đầu tiên cho dù bất kỳ file script nào được load trước. Chỉ khi không chèn vào thẻ Script External (ngoại tuyến) ở nơi thẻ script dùng thuộc tính SRC bạn mới có thể thêm thuộc tính defer vào thẻ script inline (nội tuyến).
Thế nhưng, thuộc tính ASYNC lại thông báo cho trình duyệt rằng thẻ script hoàn toàn độc lập với website. Trình duyệt sẽ tải thẻ script và xem nó như là tài nguyên chặn không hiển thị giống như <script> defer. Tuy nhiên, thuộc tính ASYNC này khác ở chỗ, nó không quy định thứ tự tải như thuộc tính defer. Do vậy, thuộc tính này sẽ thực thi bất kỳ khi nào hoàn tất tải xong trang web.
Cách 5: Tải font chữ tùy chỉnh theo vị trí
Bởi vì các font chữ tùy chỉnh được gọi từ thẻ <head> của website nên chúng cũng được xem là tài nguyên chặn hiển thị.
Để giảm ảnh hưởng của các font chữ tùy chỉnh này hiển thị ở đầu trang, bạn có thể dùng cách thêm yếu tố vị trí hơn là lấy dữ liệu từ CDN (Content Delivery Network) như Google CDN.
Đôi khi có nhiều nhiều luật @font-face mà bạn không thực sự cần dùng nhưng người ta vẫn thêm vào.
Ví dụ:
Google Font thêm luật @font-face cho tất cả các mẫu ký tự như chữ Latinh, chữ tiếng Cyril, tiếng Việt, tiếng Trung, … Khi đó file CSS sẽ được thêm vào với thẻ <link> với luật @font-face cho 7 mẫu ký tự khác nhau trong khi bạn chỉ muốn dùng một mẫu ký tự (chẳng hạn như tiếng Việt). Tuy nhiên, Google Font sẽ không tải toàn bộ các file font chữ này cho tất cả các mẫu ký tự, mà chúng chỉ thêm các luật @font-face vào file CSS.
Nếu bạn thêm font chữ theo từng địa điểm, bạn có thể nén file CSS liên quan đến font chữ hoặc gộp các file này lại với nhau cho file CSS. Với cách này, bạn có thể sử dụng công cụ Google Web Fonts Helper để tạo luật @font-face cho Google Fonts một cách nhanh chóng.
Lời kết: Trên đây là kiến thức tổng quát về tài nguyên chặn hiển thị và 5 cách loại bỏ các tài nguyên chặn hiển thị, hy vọng với những chia sẻ này sẽ giúp bạn trong việc loại bỏ hoặc giảm số lượng tài nguyên chặn hiển thị trên trang web để tối ưu tốc độ tải trang một cách nhanh nhất. Chúc các bạn thành công!
