Là một nhà quản trị web (hay Webmaster), chắc hẳn với chỉ số PageSpeed của website luôn là một trong nhiều yếu tố loại bỏ tài nguyên chặn hiển thị bạn cần phải đặc biệt quan tâm tới. 

Và nếu bạn đã từng thử test pagespeed của website trên chính công cụ Google PageSpeed Insights thì có lẽ các bạn sẽ không mấy xa lạ đối với cảnh báo “Eliminate render-blocking resources” tương tự như thế này:

Các dòng cảnh báo đỏ này có thể khiến cho bạn bối rối. Render blocking resources – loại bỏ tài nguyên chặn hiển thị là gì và làm cách nào để loại bỏ tài nguyên chặn hiển thị này một cách nhanh chóng. Bài viết này của 123job sẽ là câu trả lời cho bạn. 

I. Khái niệm tài nguyên chặn hiển thị là gì? 

Tài nguyên chặn hiển thị chính là những tệp file tĩnh quan trọng trong quá trình hiển thị trang của website, ví dụ như là font chữ, HTML, CSS và JavaScript.

Tài nguyên chặn hiển thị là gì?

Tài nguyên chặn hiển thị là gì?

Khi trình duyệt truy cập vào một trang trong website và gặp tài nguyên chặn hiển thị này thì trình duyệt sẽ ưu tiên xử lý những tệp quan trọng của tài nguyên chặn hiển thị này trước. Sau đó, với trình duyệt mới bắt đầu tải xuống phần còn lại để tài nguyên để hiển thị trên trang. 

Và vấn đề nằm ở đây. Không phải tất cả những tài nguyên mà trình duyệt cho là chặn hiển thị đều cần thiết dành cho thời gian phản hồi nội dung đầu tiên ở trên trang. Tất cả phụ thuộc vào nhiều đặc điểm riêng của từng trang khác nhau. 

II. URL nào được gắn cờ có phải là tài nguyên chặn hiển thị?

Bạn đã từng nghe nhắc tới công cụ Google Lighthouse chưa? Đây chính là công cụ mã nguồn mở tự động trong Google sử dụng để phân tích, đo lường và cải thiện chất lượng trong website.

Lighthouse gắn cờ cho 2 loại url khi chặn hiển thị chính: script và stylesheet trong nhiều trường hợp.

– Đối với thẻ :

  • Không có thuộc tính về Defer
  • Không có thuộc tính về Async

– Hoặc đối với thẻ:

  • Không có thuộc tính của Disabled – thành phần đã bị vô hiệu hóa. Khi có thuộc tính này thì trình duyệt sẽ không tải thẻ Stylesheet.
  • Không có thuộc tính media phù hợp cùng với thiết bị của người sử dụng.

Như tôi có đề cập ở trên thì không phải tất cả những tài nguyên mà trình duyệt cho là chặn hiển thị cũng đều cần thiết cho thời gian để phản hồi nội dung đầu tiên trên trang. Vậy tài nguyên nào mới thực sự là quan trọng và làm cách nào để xác định về tài nguyên quan trọng trên trang? 

III. Việc không loại bỏ tài nguyên chặn hiển thị có ý nghĩa gì

Tài nguyên chặn hiển thị nó có ý nghĩa gì và tài nguyên chặn thì có gây ảnh hưởng gì đến web WordPress của bạn hay không thì sau đây hãy cùng tìm hiểu ý nghĩa của đang không loại bỏ tài nguyên chặn hiển thị ở ngay phía dưới:

Bạn cũng có thể hiểu rằng trong khi khách truy cập vào trang web WordPress của bạn thì về cơ bản với trình duyệt web sẽ ở đầu mã trang web, đọc từ bên trên xuống dưới. Tuy nhiên trong quá trình đó nếu như bạn gặp một CSS hay JavaScript thì bạn cần phải dừng việc đọc để chờ tệp đó để tải xuống và xử lý tệp đó.

Tuy nhiên, thời gian mà bạn dừng lại để tải xuống cũng như phân tích thì nên sử dụng cách khác sao cho hiệu quả hơn thì giúp cho việc hiển thị được khi có ai đó sẽ truy cập vào web WordPress của bạn.

IV. Cách xác định tài nguyên chặn hiển thị quan trọng trên trang

1. Cách 1: Mở công cụ về DevTools kiểm tra thẻ CSS

Click chuột phải vào bất cứ vị trí trên trang thì hãy chọn Inspect hay bấm tổ hợp phím tắt Command + Option + C (đối với Mac) hoặc Control + Shift + C (như là Windows, Linux, Chrome OS).

2. Cách 2: Mở công cụ DevTools kiểm tra ở thẻ Javascript

Sử dụng các tổ hợp phím tắt Command + Option + J (đối với Mac) hay Control + Shift + J (đối với Windows, Linux, Chrome OS).

Sau khi load trang và tab Coverage thì sẽ thông báo cho bạn dung lượng code đã sử dụng và những code đã được load trên trang

Bạn có thể giảm dung lượng của trang bằng cách chỉ tải code và những thẻ style mà bạn cần dùng. Nhấp vào những URL hiển thị trên bảng Source để có thể dò tìm các file:

Các thẻ style trong file CSS và code Javascript sẽ được để đánh dấu theo 2 màu sắc chính:

  • Xanh lá (quan trọng): Các thẻ style này được yêu cầu dành cho lần phản hồi nội dung đầu tiên trên trang. Những thẻ code này vô cùng quan trọng cho chức năng chính trong trang web.
  • Đỏ (không quan trọng): Các thẻ style này không hiển thị ngay lập tức ở trên nội dung trang và không được sử dụng để hỗ trợ trong chức năng chính của trang web.

Sau khi đã xác định được những nguồn tài nguyên quan trọng trên trang, đã đến lúc bạn tìm cách để có thể xóa bỏ nó rồi đấy. Có 5 cách cơ bản giúp các bạn loại bỏ hay giảm số lượng và sự ảnh hưởng về tài nguyên chặn hiển thị. Để tôi hướng dẫn chi tiết nhé!

Xem thêm: IoT là gì? Cơ hội nghề nghiệp ở trong lĩnh vực IoT hiện nay

V. 5 Cách để loại bỏ những tài nguyên chặn hiển thị 

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

File CSS được những trình duyệt mặc định xem là các tài nguyên chặn hiển thị. Tuy nhiên nếu bạn thêm thuộc tính “media” vào thẻ

thì khi 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 nhiều trường hợp nhất định như cao hơn kích thước viewport hay thấp hơn là kích thước viewport.

Thẻ viewport – cung cấp cho website được biết là kích thước từng khung hình/ thiết bị.

Cách để loại bỏ các tài nguyên chặn hiển thị

Cách để loại bỏ về  tài nguyên chặn hiển thị 

2. Không thêm thẻ CSS theo đúng quy luật @import

Cú pháp @import giúp file HTML cũng sẽ gọn gàng hơn, nhưng đây không phải là sự lựa chọn tốt trong việc trình bày cũng như hiển thị.

Khi sử dụng cú pháp @import để có thể tham chiếu tới 1 tệp CSS khác thì trình duyệt sẽ tải lần lượt những tệp này về.

3. Nén hoặc gộp file CSS và JavaScript

Ngoài việc loại bỏ javascript và css để bỏ tài nguyên chặn hiển thị  hay đặt những thẻ ưu tiên Script trong quá trình hiển thị nhiều yếu tố trên trang thì còn một cách khá hay là các bạn có thể nén hay gộp tất cả các tài nguyên chặn hiển thị trên trang.

Tức là bạn có thể gộp các file có cùng quy luật tải giống nhau hay các file tách rời gộp lại cùng nhau để có thể tải trong 1 lần. Điều đó, đồng nghĩa đối với việc hiển thị trang đầu tiên cũng sẽ được hoàn thành sớm hơn.

Một vài công cụ hỗ trợ nén và gộp file như sau:

  • CSS Minifier: là một công cụ rút gọn JS và CSS trực tuyến cho phép các bạn nén và rút gọn tất cả những tệp JS và CC lên tới 80% kích thước ban đầu của chúng.
  • Minify Code: Minify code cho phép việc tăng tốc độ load trang, giúp loại bỏ khoảng trắng của những ký tự trống và gỡ bỏ các ký tự không cần thiết cho website.
  • PostCSS: là một công cụ dùng JS (JavaScript) để có thể xử lý CSS như là tối ưu CSS, hỗ trợ biến và Mixins và sử dụng công nghệ CSS của tương lai…

4. Plugin giúp bạn loại bỏ các tài nguyên chặn hiển thị

4.1. Cách loại bỏ tài nguyên chặn hiển thị để kết xuất với WP Rocket

WP Rocket là một plugin cũng có hiệu năng và bộ nhớ đệm cao cấp trong WordPress. WP Rocket được thực hiện tối đa về công suất WordPress bao gồm: loại bỏ tài nguyên CSS và JS..Đây là cách loại bỏ javascript và css chặn các hiển thị wordpress 1 cách đơn giản và hiệu quả nhất!

4.2. Cách loại bỏ tài nguyên chặn hiển thị với Autoptimize + Async

Autoptimize + Async là công cụ tổng hợp tất cả enqueued JavaScript và CSS. Sau đó, hai công cụ này tạo nhiều tệp CSS, JavaScript rút gọn. Tiếp đến, cung cấp về bản sao bộ nhớ đệm cho trang web của bạn dưới dạng async hay deferre.
Khi bạn đã cài đặt cả hai plugin thì hãy đi tới Setting → Async JavaScript và:

  • Bật Async JavaScript ở phía trên cùng.
  • Chọn giữa Áp dụng Async đối với Áp dụng Trì hoãn trong hộp Cài đặt

4.3. Loại bỏ tài nguyên chặn hiển thị đối với W3 Total Cache

W3 Total Cache là plugin miễn phí hỗ trợ để tăng tốc website WordPress bằng cách nén cache website. W3 Total Cache hỗ trợ về kỹ thuật tạo cache khác nhau bao gồm Page Cache bộ nhớ đệm trong website ngoài front-end), Database Cache (bộ nhớ đệm cho những dữ liệu được nhận từ database) hoặc Object Cache – bộ nhớ đệm cho các dữ liệu bên ngoài trang chủ website.

Ngoài ra, W3 Total Cache còn tiết kiệm băng thông tới 80% khi bạn giảm thiểu HTML để giảm thiểu CSS và rút gọn những tệp JS.

VI. Kết luận

Tóm lại, tài nguyên chặn hiển thị để làm chậm thời gian khi tải website. Để giúp cho khách truy cập tải trang nhanh hơn cũng như là có trải nghiệm trên website tốt hơn thì các bạn nên loại bỏ những tài nguyên chặn hiển thị không cần thiết ngay lập tức đi nhé