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

Một trong những cách giúp website của bạn có tốc độ tải trang nhanh hơn từ đó giúp cải thiện thứ hạng SEO đấy là loại bỏ javascript và css chặn hiển thị trong thông tin trong màn hình đầu tiên. Dường như đây là một cách rất hiển nhiên bởi vì thông tin của trang website sẽ chỉ được tải sau khi các tập tin JavaScript và CSS được tải xong. Hãy cùng lamweb.vn theo dõi bài viết bên dưới , hôm nay chúng tôi sẽ hướng dẫn các bạn Cách loại bỏ các tài nguyên chặn hiển thị trong website

1. tối ưu hóa cung cấp CSS (Optimize CSS Delivery)

Đối với các tập tin CSS nhỏ, các bạn hãy đặt thông tin CSS vào thẻ và nhúng vào

VD bạn có 1 tập tin CSS small.css rất nhỏ như sau:

.yellow background-color: yellow;

.blue color: blue;

.big font-size: 8em;

.bold font-weight: bold;

Thay vì nhúng tập tin CSS đấy như sau:

Thì bạn sẽ inline nội dung CSS vào và nhúng vào

như sau:

Như bạn thấy ở trên, con người chỉ phải inline class “blue” thay vì tải nguyên một tập tin CSS không cần thiết. tuy nhiên, bạn không được dùng phương pháp trên cho một tập tin CSS quá lớn.

Các bạn cũng có thể sử dụng Javascript để tải các tập tin CSS sau khi trang web được tải xong như dưới đây:

div>

Thực ra, bạn không nên sử dụng phương pháp Javascript này bởi vì nó không được hỗ trợ trên nhiều trình duyệt web khác nhau, từ đó nó có thể phá vỡ bố cụ và giao diện của bạn.

Kết luận: Bạn hoàn toàn có thể sửa đổi và cải thiện phân phối cho CSS. tuy nhiên Điều này lại không hề an toàn. vì vậy hãy lưu ý cảnh báo phía trên!

2. Xóa JavaScript chặn hiển thị (Remove Render-Blocking JavaScript)

Không giống như CSS, Javascript khá đơn giản để loại bỏ chặn hiển thị.

cũng như CSS, bạn có thể inline small javascript/chèn trực tiếp thông tin Javascript nhỏ vào thẻ và nhúng vào

. phương pháp này cũng chỉ nên áp dụng đối với các tập tin Javascript nhỏ.

Đối với các tập tin Javascript nhỏ, các bạn sử dụng:

Thay vì:

3. Tải không đồng bộ các tài nguyên JavaScript

thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. nội dung HTML có thể được bắt đầu tải mà không cần mong đợi các tài nguyên CSS.

dùng tính chất async như sau:

tính chất defer của JavaScript cho phép bạn trì hoãn tải css không dùng cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải một khi toàn bộ HTML được tải xong. dùng tính chất defer như sau:

mặc dù phương pháp này giúp nội dung trên trang web được hiển thị nhanh nhất. nhưng vẫn có điểm trừ đấy là nếu như bạn không có một chút kiến thức về cách mà JavaScript thực hiện công việc, công thức trên cũng không hề an toàn và tối ưu chút nào. Do đây là phương pháp tải không đồng bộ, nó có thể dẫn đến việc trang website công việc không hợp lý.

4. Đưa các tập tin JavaScript xuống dưới footer của trang web

đây là cách tốt nhất để giải quyết cho vấn đề Xóa JavaScript chặn hiển thị, bạn có thể đưa các thẻ xuống trước thẻ.

Đối với WordPress, bạn có thể sử dụng function “wp_enqueue_script” với biến $in_footer = true.

xem thêm : Cách loại bỏ các tài nguyên chặn hiển thị: Javascript và CSS

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

Lighthouse có ba kiểu gắn cờ cho URL chặn hiển thị: scripts (JS), stylesheets (CSS) và HTML imports:

Một thẻ mà:

• Nằm trong thẻ của tài liệu.
• Không có thuộc tính defer (trì hoãn).
• Không có thuộc tính async (không đồng bộ).

Một thẻ mà:

• Không có tính chất disabled. Khi thuộc tính này hiện diện, trình duyệt sẽ không tải stylesheet.
• Không có thuộc tính media khớp với thiết bị của người dùng.

Một thẻ mà:

• Không có tính chất async.

Cách nắm rõ ràng các tài nguyên trọng yếu

điều đầu tiên để giảm ảnh hưởng của các tài nguyên chặn hiển thị đấy là xác định được cái nào là tài nguyên quan trọng, còn cái nào không. dùng tab Coverage trong DevTools của Chrome để nắm rõ ràng CSS và JS không quan trọng (none-critical). khi mà bạn tải hoặc chạy một trang, tab này sẽ nói cho bạn biết có bao nhiêu mã được dùng so sánh với số lượng mã được tải về:

bạn sẽ giảm kích cỡ của trang bằng việc chỉ chuyển mã và style mà bạn cần cho người sử dụng. Click vào URL để kiểm duyệt file đấy trong panel Sources. Style trong tệp CSS và mã trong JavaScript được đánh dấu bằng 2 màu có ý nghĩa như sau:

• Màu xanh lá cây (Green) chỉ rằng đấy là thành phần quan trọng cho màn hình đầu tiên; mã là quan trọng đối với công dụng cốt lõi của trang.
• Màu đỏ (Red) chỉ rằng đấy là thành phần không trọng yếu, được áp dụng cho các nội dung không được nhìn thấy ngay lập tức (not immediately visible); mã không được dùng trong công dụng cốt lõi của trang.

làm thế nào để loại bỏ JS chặn hiển thị

một khi bạn xác định được mã quan trọng, hãy chuyển các mã đó từ URL chặn hiển thị thành dạng inline (nội tuyến) trong trang HTML. Khi trang tải, nó sẽ có được những thứ nó cần để xử lý các công dụng cốt lõi của trang.

Với những mã JS trong URL chặn hiển thị mà không quan trọng, bạn sẽ bắt đầu giữ nó trong URL đó (không cần inline), và đánh dấu nó bắng tính chất async hoặc defer.

Với những mã không nên sử dụng bạn phải cần loại bỏ nó đi.

Xem thêm : Cách loại bỏ các tài nguyên chặn hiển thị: Javascript và CSS