Hướng dẫn này xem xét các quy tắc của PageSpeed Insights theo bối cảnh: những điều cần chú ý khi tối ưu hoá đường dẫn kết xuất quan trọng và lý do.
Loại bỏ JavaScript và CSS chặn hiển thị
Để có thời gian nhanh nhất để hiển thị 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ố lượng 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
Theo mặc định, các tài nguyên JavaScript là trình phân tích cú pháp bị chặn, trừ phi được đánh dấu là async hoặc được thêm qua một đoạn mã JavaScript đặc biệt. Việc chặn JavaScript của trình phân tích cú pháp buộc trình duyệt phải chờ CSSOM và tạm dừng việc tạo DOM, do đó có thể trì hoãn đáng kể thời gian kết xuất lần đầu.
Ưu tiên các tài nguyên JavaScript không đồng bộ
Các tài nguyên không đồng bộ 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, điều này cũng có nghĩa là thuộc tính này không cần thiết trong 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 trong các trình xử lý unload gửi. Vì nhiều trình duyệt đòi hỏi các yêu cầu như vậy phải đồng bộ, nên các trình duyệt này 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ý phản hồi bằng Promise thay vì nhiều trình xử lý sự kiện. Không giống như phản hồi cho một 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 Promise (Lời hứa).
<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
Nhằm 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 xây dựng nội dung hiển thị cho lượt kết xuất ban đầu.
Tránh JavaScript chạy trong thời gian dài
JavaScript chạy lâu 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 sau này mọi logic và chức năng khởi tạo không cần thiết cho lần hiển thị đầu tiên. Nếu một trình tự khởi chạy dài cần chạy, hãy cân nhắc chia trình tự đó thành nhiều giai đoạn để cho phép trình duyệt xử lý các sự kiện khác trong đó.
Tối ưu hoá việc sử dụng CSS
Bạn cần có CSS để tạo cây hiển thị và JavaScript thường chặn trên CSS trong quá trình xây dựng trang ban đầu. Đảm bảo rằng mọi CSS không thiết yếu đều được đánh dấu là không quan trọng (ví dụ: truy vấn liên quan đến bản in và nội dung đa phương tiện khác), đồng thời số lượng CSS quan trọng và thời gian phân phối càng nhỏ càng tốt.
Đặt CSS trong phần đầu tài liệu
Hãy chỉ định tất 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ể khám phá các thẻ <link> và gửi yêu cầu của CSS càng sớm càng tốt.
Tránh nhập CSS
Lệnh nhập CSS (@import) cho phép một biểu định kiểu nhập các quy tắc từ một tệp biểu định kiểu khác. Tuy nhiên, hãy tránh các lệnh này vì chúng đưa các lượt trả về 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 nhận và phân tích cú pháp biểu định kiểu CSS có chính quy tắc @import.
Đặt nội tuyến CSS chặn hiển thị
Để có hiệu suất tốt nhất, bạn nên xem xét việc đưa CSS quan trọng trực tiếp vào tài liệu HTML. Điều này loại bỏ các lượt trả về bổ sung trong đường dẫn quan trọng và nếu được thực hiện đúng cách có thể phân phối độ dài đường dẫn quan trọng "một khứ hồi" mà chỉ có HTML là tài nguyên chặn.