Hướng dẫn này kiểm tra các quy tắc của PageSpeed Insights trong ngữ cảnh: những điều cần chú ý khi tối ưu hóa đường dẫn hiển thị quan trọng và lý do.
Loại bỏ CSS và JavaScript chặn hiển thị
Để cung cấp thời gian nhanh nhất để kết xuất lần đầu tiên, hãy giảm thiểu và (nếu có thể) loại bỏ số lượng tài nguyên quan trọng trên trang, giảm thiểu số byte quan trọng được tải xuống và tối ưu hoá độ dài đường dẫn quan trọng.
Tối ưu hoá việc sử dụng JavaScript
Các tài nguyên JavaScript sẽ bị chặn trình phân tích cú pháp theo mặc định, trừ phi được đánh dấu là async hoặc được thêm thông qua một đoạn mã JavaScript đặc biệt. Việc chặn trình phân tích cú pháp JavaScript buộc trình duyệt phải chờ CSSOM và tạm dừng xây dựng DOM, do đó có thể làm chậm đáng kể thời gian hiển thị lần đầu tiên.
Ưu tiên các tài nguyên JavaScript không đồng bộ
Các tài nguyên không đồng bộ sẽ bỏ chặn trình phân tích cú pháp tài liệu và cho phép trình duyệt tránh chặn trên CSSOM trước khi thực thi tập lệnh. Thông thường, nếu tập lệnh có thể sử dụng thuộc tính async, thì cũng có nghĩa là tập lệnh đó không cần thiết cho lần kết xuất đầu tiên. Cân nhắc tải tập lệnh không đồng bộ sau lần kết xuất ban đầu.
Tránh các lệnh gọi máy chủ đồng bộ
Sử dụng phương thức navigator.sendBeacon() để giới hạn dữ liệu do XMLHttpRequests gửi trong các trình xử lý unload. Vì nhiều trình duyệt yêu cầu các yêu cầu như vậy phải đồng bộ, nên chúng có thể làm chậm quá trình chuyển đổi trang, đôi khi đáng kể. Mã sau đây cho biết cách sử dụng navigator.sendBeacon() để gửi dữ liệu đến máy chủ trong trình xử lý pagehide thay vì trong trình xử lý unload.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
Phương thức fetch() mới giúp bạn dễ dàng yêu cầu dữ liệu một cách không đồng bộ. Vì tính năng này chưa có mặt ở mọi nơi, nên bạn cần sử dụng tính năng phát hiện tính năng để kiểm tra sự hiện diện của tính năng trước khi sử dụng. Phương thức này xử lý các phản hồi bằng lời hứa thay vì nhiều trình xử lý sự kiện. Không giống như phản hồi cho XMLHttpRequest, phản hồi tìm nạp là một đối tượng luồng bắt đầu trong Chrome 43. Điều này có nghĩa là lệnh gọi đến json() cũng trả về một Lời hứa (Promise).
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
Phương thức fetch() cũng có thể xử lý các yêu cầu POST.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
Hoãn phân tích cú pháp JavaScript
Để giảm thiểu khối lượng công việc mà trình duyệt phải thực hiện để hiển thị trang, hãy trì hoãn mọi tập lệnh không thiết yếu không quan trọng đối với việc tạo nội dung hiển thị cho lần kết xuất ban đầu.
Tránh chạy JavaScript lâu
JavaScript chạy lâu dài chặn trình duyệt để tạo DOM, CSSOM và hiển thị trang, vì vậy hãy hoãn lại cho đến khi bất kỳ chức năng và logic khởi tạo nào không cần thiết cho lần hiển thị đầu tiên. Nếu một chuỗi khởi động dài cần chạy, hãy xem xét chia thành nhiều giai đoạn để cho phép trình duyệt xử lý các sự kiện khác ở giữa.
Tối ưu hoá việc sử dụng CSS
CSS là bắt buộc để xây dựng cây hiển thị và JavaScript thường chặn trong CSS trong quá trình xây dựng ban đầu của trang. Đảm bảo rằng mọi CSS không quan trọng đều được đánh dấu là không quan trọng (ví dụ: truy vấn báo in và các truy vấn phương tiện khác) và rằng số lượng CSS quan trọng cũng như thời gian phân phối càng nhỏ càng tốt.
Đặt CSS trong phần đầu tài liệu
Chỉ định tất cả các tài nguyên CSS càng sớm càng tốt trong tài liệu HTML để trình duyệt có thể phát hiện các thẻ <link> và gửi yêu cầu cho CSS sớm nhất có thể.
Tránh nhập CSS
Lệnh nhập CSS (@import) cho phép một biểu định kiểu nhập quy tắc từ một tệp biểu định kiểu khác. Tuy nhiên, hãy tránh những lệnh này vì chúng đưa ra các phương thức vòng tròn bổ sung vào đường dẫn quan trọng: tài nguyên CSS đã nhập chỉ được phát hiện sau khi biểu định kiểu CSS có chính quy tắc @import được nhận và phân tích cú pháp.
Đặt nội tuyến CSS chặn hiển thị
Để có hiệu suất tốt nhất, bạn có thể muốn xem xét đặt CSS quan trọng trực tiếp vào tài liệu HTML. Điều này sẽ loại bỏ các lượt trả về bổ sung trong đường dẫn quan trọng và nếu thực hiện đúng cách thì có thể phân phối độ dài đường dẫn quan trọng "một lượt trả về" mà chỉ có HTML là tài nguyên chặn.