Khu vực cơ hội (opportunities) của báo cáo Lighthouse liệt kê tất cả các URL chặn hiển thị cho màn hình đầu tiên. Mục tiêu là giảm ảnh hưởng của các URL chặn hiển thị (render-blocking) này bằng cách: nội tuyến (inline) các tài nguyên quan trọng, trì hoãn (defer) các tài nguyên không quan trọng, và loại bỏ (remove) bất cứ thứ gì không sử dụng.
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ẻ <script> mà:
- Nằm trong thẻ <head> 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ẻ <link rel="stylesheet"> mà:
- Không có thuộc tính disabled. Khi thuộc tính này có mặt, 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ẻ <link rel="import"> mà:
- Không có thuộc tính async.
Cách xác định các tài nguyên quan trọng
Bước đầu tiên để giảm ảnh hưởng của các tài nguyên chặn hiển thị đó 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. Sử dụng tab Coverage trong DevTools của Chrome để xác định CSS và JS không quan trọng (none-critical). Khi 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 với số lượng mã được tải về:
Bạn có thể giảm kích cỡ của trang bằng cách chỉ chuyển mã và style mà bạn cần cho người dùng. Click vào URL để kiểm tra file đó trong panel Sources. Style trong file 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 đó là thành phần quan trọng cho màn hình đầu tiên; mã là quan trọng đối với chức năng cốt lõi của trang.
- Màu đỏ (Red) chỉ rằng đó 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); mã không được dùng trong chức nă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 chức nă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 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.
Với những mã không được sử dụng bạn cần loại bỏ nó đi.
Làm thế nào để loại bỏ CSS chặn hiển thị
Tương tự với JS, bạn cũng nội tuyến các CSS quan trọng cho màn hình đầu tiên vào bên trong khối <style> nằm ở phần head của trang HTML. Sau đó tải phần CSS còn lại theo cách không đồng bộ (asynchronously) sử dụng link preload.
Bạ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” bằng cách sử dụng công cụ Critical.
Một cách tiếp cận khác để loại bỏ CSS chặn hiển thị đó là 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 sẽ muốn 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 đảm bảo trang của bạn gửi đi CSS nhỏ nhất có thể cho người dùng.
Làm thế nào để loại bỏ nội dung chặn hiển thị kiểu imports
Với HTML imports không quan trọng, hãy đánh dấu chúng bằng thuộc tính async. 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.
<link rel="import" href="myfile.html" async>(Dịch từ bài viết Eliminate render-blocking resources trên trang web[.]dev)
