Bạn có nên nội tuyến CSS 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 vận chuyển một lượng CSS đáng kể sẽ làm chậm quá trình hiển thị do 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ư Bootstrap tăng tốc độ phát triển, nhưng điều đó thường phải trả giá bằng CSS cồng kềnh và không cần thiết, có thể làm chậm thời gian tải của bạn. Bootstrap 4 là 187 KB, trong khi Semantic UI, một thư viện UI khác, là một con số khổng lồ 730 KB không nén. Ngay cả khi được thu nhỏ và nén, Bootstrap vẫn nặng khoảng 20 KB, vượt ngưỡng 14 KB cho vòng đầu tiên

Critical là một công cụ trích xuất, thu nhỏ và nội tuyến 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 được hiển thị càng sớm càng tốt, ngay cả khi CSS cho các phần khác của trang chưa được tải. Trong phòng học mã này, bạn sẽ học cách sử dụng mô-đun npm của Critical

Đo lường #

• Để xem trước trang web, nhấn View App. Sau đó nhấn Toàn màn hình
  
  .

Để thực hiện kiểm tra Lighthouse trên trang web này

1. Nhấn `Control+Shift+J` (hoặc `Command+Option+J` trên Mac) để mở DevTools
2. Nhấp vào tab Ngọn hải đăng
3. Nhấp vào Di động
4. Chọn hộp kiểm Hiệu suất
5. Xóa các hộp kiểm còn lại trong phần Kiểm tra
6. Nhấp vào Mô phỏng 3G nhanh, giảm tốc độ CPU gấp 4 lần
7. Chọn hộp kiểm Xóa bộ nhớ. Với tùy chọn này được chọn, Lighthouse sẽ không tải tài nguyên từ bộ nhớ đệm, mô phỏng cách khách truy cập lần đầu trải nghiệm trang
8. Nhấp vào Chạy kiểm tra

Khi bạn chạy 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 ở chế độ xem cuộn phim, bạn sẽ nhận thấy ứng dụng có màn hình trống trong một lúc lâu trước khi hiển thị nội dung cuối cùng. Đây là lý do tại sao First Contentful Paint (FCP) cao và tại sao điểm hiệu suất tổng thể không cao

Lighthouse sẵn sàng 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ỏ các tài nguyên chặn hiển thị được liệt kê là một cơ hội và đó là nơi mà Sự quan trọng tỏa sáng

Tối ưu hóa #

• Nhấp vào Remix to Edit để làm cho dự án có thể chỉnh sửa được

Để tăng tốc mọi thứ, Critical đã được cài đặt và một tệp cấu hình trống được bao gồm trong phòng thí nghiệm mã

Trong tệp cấu hình

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');
  }
});

9, hãy thêm một tham chiếu tới Critical rồi gọi hàm

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');
  }
});

0. Chức năng này chấp nhận một đối tượng 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');
  }
});

Xử lý lỗi không bắt buộc, nhưng đó 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 bên dưới chứa một số tùy chọn quan trọng hữu ích. Bạn có thể kiểm tra tất cả các tùy chọn có sẵn trên GitHub

OptionTypeExplanation____21stringThư mục cơ sở cho các tệp của bạn. Tệp nguồ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');
  }
});

2chuỗiHTML.

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');
  }
});

3stringMục tiêu cho tệp đầu ra. Nếu CSS được nội tuyến, tệp đầu ra là HTML. Nếu không, đầu ra là một tệp CSS.

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');
  }
});

4,

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');
  }
});

0số Chiều rộng và chiều cao của cổng xem tính bằng pixel.

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');
  }
});

1arrayChứa các đối tượng có thuộc tính chiều rộng và chiều cao. Các đối tượng này đại diện cho chế độ xem 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 của mình, đ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.

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');
  }
});

2booleanKhi được đặt thành true, CSS quan trọng được tạo sẽ được đưa vào nội tuyến trong tệp nguồn HTML.

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');
  }
});

3booleanKhi được đặt thành true, Critical sẽ thu nhỏ CSS quan trọng được tạo. Có thể được bỏ qua khi trích xuất CSS quan trọng cho nhiều độ phân giải vì Critical tự động thu nhỏ nó để tránh đưa vào quy tắc trùng lặp

Dưới đây là một ví dụ cấu hình để trích xuất CSS quan trọng cho nhiều độ phân giải. Thêm nó vào

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');
  }
});

9 hoặc chơi xung quanh và điều chỉnh các tùy 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,

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');
  }
});

5 vừa là tệp nguồn vừa là tệp đích vì tùy 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');
  }
});

2 được đặt thành true. Trước tiên, quan trọng đọc tệp nguồn HTML, trích xuất CSS quan trọng và sau đó ghi đè lê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');
  }
});

5 bằng CSS quan trọng được đặt trong

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');
  }
});

8

Mảng

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');
  }
});

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

Tùy 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');
  }
});

3 bị bỏ qua vì Critical tự động thu nhỏ CSS được trích xuất khi có nhiều kích thước khung nhìn được chỉ định

Chạy quan trọng #

Thêm quan trọng vào tập lệnh của bạn trong

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');
  }
});

21

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');
  }
});

2

1. Nhấp vào Công cụ
2. Nhấp vào Nhật ký
3. Nhấp vào Bảng điều khiển

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

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');
  }
});

4Thông báo thành công trong bảng điều khiển

Bảng điều khiển trục trặc và trình chỉnh sửa không tự động đồng bộ hóa, vì vậy cần có lệnh ________ 122 để cập nhật trình chỉnh sửa với các tệp được tạo từ bảng điều khiển

Giờ đây, trong thẻ

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');
  }
});

8 của

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');
  }
});

5, CSS quan trọng được tạo sẽ được đặt giữa các thẻ

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');
  }
});

25, theo sau là tập lệnh tải phần còn lại của CSS một cách không đồng bộ

CSS quan trọng nội tuyến

Đo lại #

Thực hiện theo các bước từ phần đầu của phòng thí nghiệm lập trình để chạy lại kiểm tra hiệu suất của Lighthouse. Kết quả bạn nhận được sẽ trông giống như thế này

Thành công

Chế độ xem cuộn phim cho thấy nội dung được hiển thị sớm hơn nhiều và điều này được phản ánh trong các chỉ số sơn được cải thiện. Và "Loại bỏ tài nguyên chặn kết xuất" đã bị loại bỏ. 🎉

Sử dụng CSS nội tuyến có tốt không?

Tại sao CSS nội tuyến không được khuyến nghị?

Khi nào bạn nên sử dụng CSS nội tuyến?

Điều gì nên có trong CSS quan trọng?