Trích xuất và cùng dòng CSS quan trọng bằng các thẻ Quan trọng

Cho dù bạn sử dụng thư viện giao diện người dùng hay thủ công các kiểu của mình, việc gửi một lượng đáng kể các CSS sẽ trì hoãn hiển thị vì trình duyệt phải tải xuống và phân tích cú pháp các tệp CSS trước khi có thể hiển thị trang.

Thư viện kem đáp ứng này được xây dựng bằng Bootstrap. Các thư viện giao diện người dùng như Tự thân khởi nghiệp giúp tăng tốc độ phát triển, nhưng thường sẽ phải đánh đổi bằng việc CSS quá tải và không cần thiết, khiến thời gian tải của bạn chậm hơn. Bootstrap 4 có dung lượng 187 KB, trong khi Semantic UI (Giao diện người dùng ngữ nghĩa) (một thư viện giao diện người dùng khác) có dung lượng khổng lồ 730 KB không nén. Ngay cả khi được rút gọn và nén, Bootstrap vẫn nặng khoảng 20 KB, vượt quá ngưỡng 14 KB cho lượt khứ hồi đầu tiên.

Nghiêm trọng là công cụ trích xuất, giảm kích thước và chèn cùng dòng CSS trong màn hình đầu tiên. Điều này cho phép nội dung trong màn hình đầu tiên hiển thị sớm nhất có thể, ngay cả khi CSS cho các phần khác của trang chưa được tải. Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng mô-đun npm của Critical.

Đo

  • Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình toàn màn hình.

Cách chạy quy trình kiểm tra Lighthouse trên trang web này:

  1. Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
  2. Nhấp vào thẻ Lighthouse.
  3. Nhấp vào Thiết bị di động.
  4. Chọn hộp đánh dấu Hiệu suất.
  5. Xoá các hộp đánh dấu còn lại trong phần Kiểm tra.
  6. Nhấp vào Mô phỏng mạng 3G nhanh, tốc độ giảm CPU gấp 4 lần.
  7. Chọn hộp kiểm Clear Storage (Xoá bộ nhớ). Khi bạn chọn tuỳ chọn này, Lighthouse sẽ không tải tài nguyên từ bộ nhớ đệm, vốn mô phỏng cách khách truy cập lần đầu trải nghiệm trang.
  8. Nhấp vào Run Checks (Chạy kiểm tra).

Bảng điều khiển kiểm tra của Công cụ của Chrome cho nhà phát triển, do Lighthouse hỗ trợ

Khi bạn kiểm tra trên máy của mình, kết quả chính xác có thể khác nhau, nhưng trong chế độ xem cuộn phim, bạn sẽ nhận thấy ứng dụng có một màn hình trống một lúc trước khi cuối cùng hiển thị nội dung. Đây là lý do tại sao Nội dung đầu tiên hiển thị (FCP) cao và tại sao điểm hiệu suất tổng thể không tốt.

Kết quả kiểm tra trên Lighthouse cho thấy điểm hiệu suất 84, FCP 3 giây và chế độ xem cuộn phim khi tải ứng dụng

Lighthouse giúp bạn khắc phục các vấn đề về hiệu suất, vì vậy, hãy tìm giải pháp trong phần Cơ hội. Loại bỏ tài nguyên chặn hiển thị được coi là một cơ hội và đó chính là cơ hội phát huy hiệu quả!

"Cơ hội" kiểm tra Lighthouse danh sách phần "Loại bỏ tài nguyên chặn hiển thị"

Tối ưu hoá

  • Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.

Để tăng tốc, Critical đã được cài đặt và tệp cấu hình trống sẽ được đưa vào lớp học lập trình này.

Trong tệp cấu hình critical.js, hãy thêm nội dung tham chiếu đến Quan trọng rồi gọi hàm critical.generate(). Hàm này chấp nhận một đối tượng có chứa cấu hình.

const critical = require('critical');

critical.generate({
    // configuration
},(err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Bạn không bắt buộc phải xử lý lỗi, nhưng đây là một cách dễ dàng để đánh giá mức độ thành công của thao tác trong bảng điều khiển.

Định cấu hình Quan trọng

Bảng dưới đây chứa một số tuỳ chọn Quan trọng hữu ích. Bạn có thể xem tất cả tuỳ chọn hiện có trên GitHub.

Phương thức Loại Giải thích
base string Thư mục cơ sở cho các tệp của bạn.
src string Tệp nguồn HTML.
dest string Mục tiêu cho tệp đầu ra. Nếu CSS cùng dòng, tệp đầu ra là HTML. Nếu không, dữ liệu đầu ra sẽ là tệp CSS.
width, height số điện thoại Chiều rộng và chiều cao của khung nhìn tính bằng pixel.
dimensions mảng Chứa các đối tượng có thuộc tính chiều rộng và chiều cao. Những đối tượng này đại diện cho khung nhìn mà bạn muốn nhắm mục tiêu bằng CSS trong màn hình đầu tiên. Nếu bạn có truy vấn phương tiện trong CSS, điều này cho phép bạn tạo CSS quan trọng bao gồm nhiều kích thước khung nhìn.
inline boolean Khi bạn đặt chính sách này thành true, CSS quan trọng đã tạo sẽ nằm trong nội dung của tệp nguồn HTML.
minify boolean Khi bạn đặt chính sách này thành true, mức độ nghiêm trọng sẽ giảm thiểu CSS quan trọng đã tạo. Có thể bỏ qua khi trích xuất CSS quan trọng cho nhiều độ phân giải vì Mức độ quan trọng sẽ tự động giảm kích thước để tránh đưa vào quy tắc trùng lặp.

Dưới đây là ví dụ về cấu hình để trích xuất CSS quan trọng cho nhiều giải pháp. Hãy thêm ngôn ngữ này vào critical.js hoặc phát và điều chỉnh các tuỳ chọn.

critical.generate({
  base: 'public/',
  src: './index.html',
  dest: './index.html',
  inline: true,
  dimensions: [
    {
      height: 500,
      width: 300,
    },
    {
      height: 720,
      width: 1280,
    },
  ]
}, (err, output) => {
  if (err) {
    console.error(err);
  } else if (output) {
    console.log('Generated critical CSS');
  }
});

Trong ví dụ này, index.html vừa là tệp nguồn vừa là tệp đích vì tuỳ chọn inline được đặt thành true. Trước tiên, thiết bị quan trọng sẽ đọc tệp nguồn HTML, trích xuất CSS quan trọng rồi ghi đè index.html bằng CSS quan trọng nằm trong <head>.

Mảng dimensions có hai kích thước khung nhìn được chỉ định: 300 x 500 cho màn hình nhỏ hơn và 1280 x 720 cho màn hình máy tính xách tay tiêu chuẩn.

Bạn bỏ qua lựa chọn minify vì trạng thái Quan trọng sẽ tự động giảm kích thước CSS đã trích xuất khi có nhiều kích thước khung nhìn được chỉ định.

Số lần chạy quan trọng

Thêm Quan trọng vào tập lệnh của bạn trong package.json:

scripts: {
  "start": "node server.js",
  "critical": "node critical.js"
}
  1. Nhấp vào Terminal (lưu ý: nếu nút Terminal không hiển thị, thì có thể bạn cần phải dùng chế độ Toàn màn hình).

Để tạo CSS quan trọng, trong bảng điều khiển, hãy chạy:

npm run critical
refresh
Thông báo thành công với nội dung &quot;CSS quan trọng đã tạo&quot; trong bảng điều khiển
Thông báo thành công trong bảng điều khiển

Giờ đây, trong thẻ <head> của index.html, CSS quan trọng đã tạo nằm trong nội dung giữa các thẻ <style>, theo sau là một tập lệnh tải không đồng bộ phần còn lại của CSS.

index.html với CSS quan trọng nội tuyến
CSS quan trọng cùng dòng

Đo lại

Làm theo các bước từ đầu lớp học lập trình để chạy lại quy trình kiểm tra hiệu suất của Lighthouse. Kết quả bạn nhận được sẽ giống như sau:

Kiểm tra Lighthouse cho thấy điểm hiệu suất 100, FCP 0,9 giây và chế độ xem cuộn phim được cải thiện khi tải ứng dụng