CÁCH LOẠI BỎ CÁC TÀI NGUYÊN CHẶN HIỂN THỊ NHANH TRONG TÍCH TẮC
Để hỗ trợ tối ưu website cũng như tăng cường tiếp cận tới đối tượng khách hàng tiềm năng, các nhà quản trị web không nên bỏ qua việc loại bỏ các tài nguyên chặn hiển thị mà cụ thể là JavaScript và CSS. Vậy phải loại bỏ chúng thế nào để vừa hiệu quả vừa giúp web của bạn tải được nhanh hơn và giúp SEO tốt hơn?
Thông thường, các trang web đều có một chủ đề và plugin bổ sung các tệp JavaScript và CSS vào phần đầu của mỗi trang. Các tập lệnh này có thể làm tăng thời gian tải trang của web và chặn kết xuất trang. Cụ thể như, chúng ngăn trang web hiển thị đến khi chúng được trình duyệt tải xuống và xử lý xong. Do đó, khi kiểm tra thông tin chi tiết về trang web của mình trên Google PageSpeed, bạn có thể sẽ thấy những đề xuất loại bỏ các đoạn mã chặn và kết xuất đồ họa này để tạo trải nghiệm nhanh nhất có thể cho người dùng của bạn.
Có những loại tài nguyên chặn hiển thị nào?
Ngoài JavaScript và CSS thì HTML imports cũng thường bị gắn cờ là tài nguyên chặn hiển thị.
Bạn có thể xác định chúng như sau:
Là một thẻ <script> mà:
- Nằm trong thẻ <head> của tài liệu.
- Không có thuộc tính defer.
- Không có thuộc tính async.
Là một thẻ <link rel=”stylesheet”> mà:
- Không có thuộc tính disabled vì nếu có thuộc tính này thì 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.
Là một thẻ <link rel=”import”> mà:
- Không có thuộc tính async.
Tuy nhiên, để loại bỏ các tài nguyên chặn hiển thị gây ảnh hưởng tới hiệu quả hoạt động của website, đầu tiên bạn cần xác định được đâu là tài nguyên quan trọng, đâu là tài nguyên cần loại bỏ.
Cách để xác định các tài nguyên quan trọng
Để xác định tài nguyên quan trọng, bạn có thể sử dụng tab Coverage trong DevTools của Chrome để xác định CSS và JavaScript không quan trọng (none-critical). Tab này sẽ cho ta biết có bao nhiêu mã được dùng so với số lượng mã được tải về.
Bằng cách chuyển mã và style cần cho người dùng mà bạn cũng có thể giảm kích cỡ của trang. Sau đó Click vào URL và kiểm tra file đó trong Panel Sources.
Mã trong JavaScript và tyle trong file CSS được đánh dấu bằng 2 màu như sau:
- Màu xanh lá cây (Green): đó là thành phần quan trọng cho màn hình đầu tiên và mã này quan trọng với chức năng cốt lõi của trang.
- Màu đỏ (Red): đó là thành phần không quan trọng, đượ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) và mã này không được dùng trong chức năng cốt lõi của trang.
Sau khi đã xác định được mã nào quan trọng, bạn 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 tải, trang sẽ có được những thứ nó cần để xử lý các chức năng quan trọng. Với những mã chặn hiển thị không quan trọng, bạn có thể tiếp tục giữ nó trong URL đó (không cần inline), và đánh dấu nó bắng thuộc tính async hoặc defer. Còn với những mã không được sử dụng bạn cần loại bỏ nó đi.
Cách để loại bỏ JavaScript chặn hiển thị
Để loại bỏ tài nguyên chặn JavaScript, đầu tiên bạn cần di chuyển nó ra khỏi đường dẫn kết xuất quan trọng. Sau đó, thêm thuộc tính async hoặc defer vào script phần tử HTML của tài nguyên JavaScript.
Tuy nhiên, các thuộc tính defer và async không được tạo ra bằng nhau và chúng có sự khác biệt. Defer đảm bảo rằng các tập lệnh được tải xuống và áp dụng cho trang web theo thứ tự chúng xuất hiện trong tài liệu HTML, còn async thì không. Vậy nên, nếu async được sử dụng trên tất cả các tài nguyên JavaScript, nó có thể phá vỡ các tài nguyên phụ thuộc vào các tài nguyên xuất hiện trước đó trong tài liệu.
Trình duyệt có thể tải các tài nguyên ngay lập tức mà không làm chậm phân tích cú pháp HTML nhờ các thuộc tính async. Việc phân tích cú pháp HTML khi tài nguyên có sẵn được tạm dừng để tài nguyên có thể tải.
Làm sao để loại bỏ CSS chặn hiển thị?
Tương tự với JavaScript, bạn cũng chuyển các mã CSS không sử dụng từ URL chặn hiển thị thành dạng Inline (nội tuyến) trong trang HTML. Sau đó bạn tải phần CSS còn lại theo cách không đồng bộ (asynchronously) và sử dụng link preload.
Ngoài ra, bằng cách sử dụng công cụ Critical, bạn còn có thể xem xét việc xử lý tự động việc trích xuất và nội tuyến CSS “nằm trong màn hình đầu tiên”.
Còn một cách khác nữa là, để loại bỏ CSS chặn hiển thị, bạn chia CSS vào trong các file khác nhau, sắp xếp nó bằng query media. Sau đó thêm thuộc tính media vào từng liên kết stylesheet. Khi tải trang, trình duyệt chỉ chặn “first paint” để nhận stylesheet mà khớp với thiết bị người dùng.
Cuối cùng, bạn hãy tối thiểu hóa (minify) CSS để loại bỏ bất kỳ khoảng trống, ký tự dư thừa nào. Điều này giúp trang web của bạn có thể đảm bảo gửi đi CSS nhỏ nhất có thể cho người dùng.
Nếu không loại bỏ được hoàn toàn các kết xuất chặn CSS, bạn có thể làm như sau:
- Bạn xác định yêu cầu hiển thị nội dung ở màn hình đầu tiên, sau đó phân phối theo dòng HTML .
- Sử dụng mediathuộc tính trên các link phần tử kéo theo tệp CSS để xác định tài nguyên CSS có điều kiện. Tức là bạn chỉ cần cho các thiết bị hoặc tình huống cụ thể.
Cách để loại bỏ nội dung chặn hiển thị kiểu imports
Với HTML imports không quan trọng, bạn chỉ cần đánh dấu chúng bằng thuộc tính async. Và như một quy tắc chung, async phải được sử dụng với HTML imports càng nhiều càng tốt.
Chắc chắn rằng, những thông tin và các cách loại bỏ các tài nguyên chặn hiển thị trên đây đã giúp bạn có thêm kiến thức hữu ích. Hy vọng bạn có thể áp dụng để tối ưu website của mình một cách hiệu quả nhất.
Bài viết nói về: CÁCH LOẠI BỎ CÁC TÀI NGUYÊN CHẶN HIỂN THỊ NHANH TRONG TÍCH TẮC
Nguồn trích dẫn từ: Công Ty Truyền Thông Media, Digital Marketing - Flava Entertainment Productions
Tác giả: Phạm Hoàng Thanh Thanh
Nguồn: https://flavaentertainmentproductions.com/loai-bo-cac-tai-nguyen-chan-hien-thi Theo dõi để cập nhật các tin tức mới tại: https://flavaentertain.blogspot.com
Nhận xét
Đăng nhận xét