Quy tắc này kích hoạt khi PageSpeed Insights phát hiện thấy rằng cần có các lượt trọn vòng mạng bổ sung để hiển thị nội dung trong màn hình đầu tiên của trang.
Tổng quan
Nếu lượng dữ liệu cần thiết vượt quá cửa sổ tắc nghẽn ban đầu (thường là 14,6kB nén), nó sẽ yêu cầu thêm các chuyến khứ hồi giữa máy chủ của bạn và trình duyệt của người dùng. Đối với người dùng trên các mạng có độ trễ cao như mạng di động, việc này có thể khiến việc tải trang chậm trễ đáng kể.
Đề xuất
Để giúp trang tải nhanh hơn, hãy giới hạn kích thước của dữ liệu (mã đánh dấu HTML, hình ảnh, CSS, JavaScript) cần thiết để hiển thị nội dung trong màn hình đầu tiên của trang. Có một số cách để thực hiện việc này:- Xây dựng cấu trúc HTML để tải trước nội dung quan trọng trong màn hình đầu tiên
- Giảm lượng dữ liệu mà tài nguyên của bạn sử dụng
Tạo cấu trúc HTML của bạn để tải trước nội dung quan trọng trong màn hình đầu tiên
Trước tiên, hãy tải nội dung chính của trang. Hãy cấu trúc trang của bạn để phản hồi ban đầu từ máy chủ gửi dữ liệu cần thiết để hiển thị ngay phần quan trọng của trang và trì hoãn phần còn lại. Điều này có nghĩa là bạn phải chia CSS của mình thành hai phần: một phần cùng dòng chịu trách nhiệm định kiểu cho phần nội dung ATF và phần có thể được trì hoãn.
Hãy xem xét những ví dụ sau về cách tái cấu trúc trang web để tải nhanh hơn:
- Nếu HTML của bạn tải các tiện ích của bên thứ ba trước khi tải nội dung chính, hãy thay đổi thứ tự để tải nội dung chính trước.
- Nếu trang web của bạn sử dụng thiết kế hai cột với một thanh điều hướng bên và một bài viết, nhưng HTML của bạn tải thanh bên trước bài viết, hãy xem xét việc tải bài viết trước.
Giảm lượng dữ liệu mà tài nguyên của bạn sử dụng
Sau khi thiết kế lại trang web để hoạt động tốt trên nhiều thiết bị và tải nội dung quan trọng trước, hãy sử dụng các kỹ thuật sau để giảm lượng dữ liệu cần thiết để hiển thị trang:- Rút gọn tài nguyên: Có thể giảm kích thước HTML, CSS và JavaScript bằng cách xóa các khoảng trắng và nhận xét không cần thiết. Có thể tối ưu hoá hơn nữa bằng cách sử dụng các công cụ đổi tên biến trong tài nguyên của bạn.
- Nếu có thể, hãy cân nhắc sử dụng CSS thay vì hình ảnh.
- Bật tính năng nén
Ý kiến phản hồi
Trang này có hữu ích không?