Các quy tắc và đề xuất của PageSpeed

Ilya Grigorik
Ilya Grigorik
X Trang chủ

Ngày xuất bản: 17 tháng 8 năm 2018

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ỏ JavaScript và CSS 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 thêm vào 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 các 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 XMLHttpRequests gửi trong Trình xử lý unload. Vì nhiều trình duyệt đòi hỏi các yêu cầu như vậy đồng bộ, nên chúng có thể làm chậm quá trình chuyển đổi trang, đôi khi đáng kể. Nội dung sau đây cho biết cách sử dụng navigator.sendBeacon() để gửi dữ liệu đến máy chủ trong 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à đố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 đầu tiên.

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ả 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 bảng đị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 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 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 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.

Phản hồi