Cho dù bạn sử dụng thư viện giao diện người dùng hay tạo kiểu thủ công, việc vận chuyển một lượng lớn CSS sẽ trì hoãn quá trình hiển thị vì trình duyệt phải tải xuống và phân tích cú pháp tệp CSS trước khi có thể hiển thị trang.
Thư viện kem thích ứ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 giúp đẩy nhanh quá trình phát triển, nhưng điều đó thường đi kèm với việc 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. Tự thân khởi động 4 có kích thước 187 KB, trong khi 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 nén khổng lồ là 730 KB. Ngay cả khi được rút gọn và nén, Bootstrap vẫn nặng khoảng 20 KB, vượt xa ngưỡng 14 KB cho lượt khứ hồi đầu tiên.
Critical là công cụ trích xuất, giảm kích thước và nội dòng CSS trong màn hình đầu tiên. Điều này cho phép hiển thị nội dung trong màn hình đầu tiên 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 View App (Xem ứng dụng), sau đó nhấn vào
Fullscreen
(Toàn màn hình).
Cách chạy quy trình kiểm tra Lighthouse trên trang web này:
- 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.
- Nhấp vào thẻ Lighthouse.
- Nhấp vào Thiết bị di động.
- Chọn hộp kiểm Hiệu suất.
- Bỏ đánh dấu các hộp đánh dấu còn lại trong phần Kiểm tra.
- Nhấp vào Mô phỏng 3G nhanh, Giảm tốc độ CPU 4 lần.
- Chọn hộp kiểm 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, mô phỏng trải nghiệm của khách truy cập lần đầu tiên trên trang.
- Nhấp vào Run Testings (Chạy các hoạt động kiểm tra).
Khi chạy quy trình kiểm tra trên máy, 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ột màn hình trống khá một lúc trước khi cuối cùng mới hiển thị nội dung. Đây là lý do Thời gian hiển thị nội dung đầu tiên (FCP) cao và điểm hiệu suất tổng thể lại không tốt.
Lighthouse có thể 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 mục Cơ hội. Loại bỏ tài nguyên chặn hiển thị được liệt kê là một cơ hội và đó chính là điểm mấu chốt!
Tối ưu hoá
- Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.
Để tăng tốc, Critical đã được cài đặt sẵn và bạn có thể đưa một tệp cấu hình trống 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 Critical (Quan trọng) rồi gọi hàm critical.generate(). Hàm 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');
}
});
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 trình bày một số tuỳ chọn Quan trọng hữu ích. Bạn có thể xem tất cả các tuỳ chọn có sẵn trên GitHub.
| Lựa chọn | 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 của 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. Các đối tượng này đại diện cho khung nhìn mà bạn muốn nhắm mục tiêu với 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 đặt thành true, CSS quan trọng được tạo sẽ nằm cùng với tệp nguồn HTML. |
minify |
boolean | Khi bạn đặt giá trị này thành true, Điểm quan trọng sẽ giảm kích thước 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ì Critical 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 độ phân giải. Bạn có thể thêm ứng dụng này vào critical.js hoặc thử nghiệm 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 là cả tệp nguồn và tệp đích vì tuỳ chọn inline được đặt thành true. Trước tiên, Critical đọc tệp nguồn HTML, trích xuất CSS quan trọng, sau đó ghi đè index.html bằng CSS quan trọng cùng dòng 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 cực nhỏ và 1280 x 720 cho màn hình máy tính xách tay tiêu chuẩn.
Bạn bỏ qua tuỳ chọn minify vì cột Quan trọng 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.
Hoạt động 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"
}
- Nhấp vào Thiết bị đầu cuối (lưu ý: nếu nút Thiết bị đầu cuối không hiển thị, bạn có thể cần phải sử dụng tùy chọn 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
Hiện tại, trong thẻ <head> của index.html, CSS quan trọng được tạo nằm giữa các thẻ <style>, theo sau là một tập lệnh tải phần còn lại của CSS một cách không đồng bộ.
Đ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ẽ có dạng như sau:
