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

Thông thường, các trang web hiện đều có chủ đề và plugin riêng được bổ sung bởi các tệp Java Script và CSS vào đầu trang. Những lệnh này sẽ khiến cho thời gian tải trang trở nên lâu hơn và có thể bị chặn kết xuất trang. Bạn sẽ gặp phải tình trạng trang web báo lỗi, không hiển thị cho đến trình duyệt xử lý xong. Vậy cách loại bỏ các tài nguyên chặn hiển thị như thế nào? Hãy cùng Viết Bài Xuyên Việt tìm hiểu trong bài viết dưới đây nhé!

Nội dung

Cách xác định tài nguyên quan trọng

Trước khi muốn tìm hiểu cách loại bỏ các tài nguyên chặn hiển thị, bạn cần phải xác định tài nguyên quan trọng tránh trường hợp loại bỏ nhầm. Nếu chẳng may xác định loại bỏ nhầm, 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 bạn. Để xác định tài nguyên quan trọng, bạn cần sử dụng tab Coverage trong Devtools của Chrome để xác định CSS và JavaScript.

Tab này sẽ cho bạn biết bao nhiêu mã được dùng so với số lượng mã tải về. Khi đó, bạn có thể click vào URL để kiểm tra file đó trong Panel Sources.

Thông thường, mã JavaScript và type trong file CSS sẽ được đánh dấu bằng 2 màu sắc khác nhau cho bạn dễ dàng nhận biết:

Màu xanh: Đánh dấu thành phần quan trọng, mang chức năng cốt lõi của trang. Thường xuyên hiện ở màn hình đầu tiên.
Màu đỏ: Thành phần không quan trọng, không sử dụng cho các chức năng cốt lõi của trang. Các tài nguyên này được dùng cho nội dùng không nhìn thấy ngay lập tức.

>>> Xem ngay: Ma trận SWOT là gì

Đương nhiên, với các tài nguyên quan trọng và không quan trọng cách xử lý cũng không giống nhau. Đối với mã quan trọng, bạn hãy chuyển những mã đó từ URL chặn hiển thị sang dạng Inline nội tuyển trong HTML. Trang web khi tải sẽ sử dụng những tài nguyên đó.

Về phía những mã hiển thị không quan trọng, bạn vẫn tiếp tục giữ nó trong URL để sử dụng trong lúc thích hợp. Với những mã không được sử dụng tốt nhất bạn nên loại bỏ nó.

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

Vậy cách loại bỏ các tài nguyên chặn hiển thị như thế nào? Trên thực tế, với những tài nguyên khác nhau, cách loại bỏ cũng không giống nhau. Cụ thể như sau:

Loại bỏ JS chặn hiển thị

Cách loại bỏ mã JS chặn hiển thị khá đơn giản. Trước hết, bạn cần xác định rõ ràng, mã JS nào quan trọng và những mã nào không quan trọng. Sau khi xác định chính xác, bạn cần chuyển các mã đó từ URL -> Inline trong trang HTML.

Đối với những mã JS chặn hiển thị không quan trọng bạn có thể xóa bỏ đi trong trường hợp sẽ không sử dụng tới. Ngoài ra, bạn có thể tiếp tục giữ những mã này trong URL. Hãy đánh dấu chúng bằng thuộc tính async hoặc defer để nhận biết chúng dễ dàng hơn.

>>> Xem ngay: Brochure là gì

Loại bỏ CSS chặn hiển thị

Cũng giống như các JS chặn hiển thị, cách loại bỏ các tài nguyên chặn hiển thị CSS cũng tương tự như vậy. Bạn hãy đưa các CSS quan trọng vào trong khối <style> nằm ngay ở phần <head> của trang HTML. Tiếp tục sử dụng link preload để tải CSS còn loại theo cách không đồng bộ Asynchronously.

Bên cạnh đó, bạn có thể sử dụng công cụ Critical để xử lý trích xuất và nội tuyến CSS. Việc này đươc tiến hành hoàn toàn tự động và bạn có thể tìm thấy công cụ Critical ở ngay đầu trang.

Một cách khách để loại bỏ CSS chặn hiển thị mà ít người biết đó là chia và sắp xếp CSS vào trong các file khác nhau bằng query media. Thêm thuộc tính media vào từng liên kết style sheet. Khi tải trang web, trình duyệt tự động chặn “frist paint” và chỉ nhận style sheet phù hợp với thiết bị mà người dùng đang sử dụng.

Ngoài ra, để loại bỏ khoảng trống và các ký tự dư thừa, bạn cần tối thiểu hóa CSS. Điều này nhằm đảm bảo trang của bạn luôn có CSS nhỏ nhất dành cho người dùng. Mặc dù vậy, việc tối thiểu hóa CSS dẫn đến sự thiếu an toàn cho trang của bạn. Hãy cân nhắc thật kỹ trước khi áp dụng phương pháp này.

Nếu không thể loại bỏ hoàn toàn CSS chặn hiển thị, bạn có thể làm như sau:

Xác định yêu cầu hiển thị nội dung và phân phối chúng theo dòng HTML. Đa số yêu cầu hiển thị sẽ xuất hiện ở màn hình đầu tiên cho bạn dễ nhận biết.
Tùy thuộc vào các thiết bị hoặc tình huống cụ thể, bạn có thể sử dụng media thuộc tính có trên link phần tử theo từng tệp CSS.

Cuối cùng là cách loại bỏ các tài nguyên chặn hiển thị kiểu imports. Với những HTML Imports không quan trọng, bạn chỉ cần đánh dấu chúng bằng thuộc tính async. Theo đúng như nguyên tắc, async sẽ sử dụng HTML imports càng nhiều càng tốt.

Trên đây, bài viết đã chia sẻ cho bạn cách loại bỏ các tài nguyên chặn hiển thị. Hy vọng bạn có thể áp dụng chúng để tối ưu website của mình hiệu quả. Từ đó, mang đến cho người dùng trải nghiệm tuyệt vời khi truy cập trang.