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
.
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 đánh dấu Hiệu suất.
- Xoá các hộp đánh dấu còn lại trong phần Kiểm tra.
- Nhấp vào Mô phỏng mạng 3G nhanh, Giảm 4 lần CPU.
- 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.
- Nhấp vào Run Checks (Chạy kiểm tra).
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.
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ả!
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"
}
- 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
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.
Đ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:
