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