Trình tạo CSS quan trọng
Tiện ích trình duyệt miễn phí dành cho trình tạo CSS quan trọng nâng cao và trình tối ưu hóa trong màn hình đầu tiên . Một công cụ để đạt được kết quả pixel hoàn hảo với CSS tối thiểu có thể.
Kết quả CSS quan trọng nhất đạt được trong trình duyệt thực.
Tiện ích trình duyệt được thực thi trên trang mà CSS quan trọng sẽ được trích xuất và do đó có toàn quyền truy cập riêng vào môi trường CSS gốc.
Bạn có thể chọn các biểu định kiểu hoặc các thành phần biểu định kiểu nội tuyến để trích xuất CSS quan trọng. Điều này rất hữu ích để tạo CSS quan trọng có thể được chia sẻ giữa các trang.
Tiện ích trình duyệt cũng có tính năng xóa CSS quan trọng khỏi biểu định kiểu.
Công cụ này không có gián điệp. Không có Google Analytics hoặc theo dõi. An toàn để sử dụng và có thể được sử dụng cục bộ thông qua bộ đệm của Service Worker.
The browser-widget provides an example of more advanced critical CSS software that can be used through a Chrome browser in Google Cloud. See for more information our professional optimization plugin.
Cài đặt
Để cài đặt tiện ích,
vào thanh yêu thích hoặc sao chép và dán mã bên dưới.x.pagespeed.pro
để duy trì cài đặt trên các miền và sử dụng tiện ích ngoại tuyến hoặc trên localhost
.Trình tối ưu hóa trong màn hình đầu tiên
Trình tạo CSS quan trọng và trình tối ưu hóa trong màn hình đầu tiên
Trình tạo CSS quan trọng cho phép giải quyết Các chỉ số quan trọng về trang web cốt lõi của Google , loại bỏ hình phạt CSS không sử dụng hoàn toàn dựa trên CSS tối thiểu.
Đặc trưng
Trình tạo CSS quan trọng nâng cao
- Được phát triển tùy chỉnh dựa trên PostCSS , một trong những trình phân tích cú pháp CSS tốt nhất.
- Hỗ trợ nhiều chế độ xem (máy tính để bàn + thiết bị di động) cho CSS quan trọng đáp ứng .
- Puppeteer thích kiểm soát trình duyệt bao gồm nhấp chuột, các sự kiện chuột (di chuột, di chuyển, v.v.), cuộn, thực thi mã javascript tùy chỉnh, v.v.
- Đầu ra CSS quan trọng thuần túy chưa được tối ưu hóa thô.
Trình tối ưu hóa trong màn hình đầu tiên
- So sánh CSS quan trọng với CSS gốc.
- Thước đo pixel có thể tùy chỉnh.
Công cụ tối ưu hóa nâng cao
- Trình xóa CSS không sử dụng để xóa CSS quan trọng khỏi biểu định kiểu.
- Phần mềm tối ưu hóa và nén (thu nhỏ) CSS chuyên nghiệp.
- Sửa chữa CSS bị hỏng. Một công cụ để sửa CSS không đúng định dạng.
- Autoprefixer. Một công cụ để áp dụng tiền tố trình duyệt cho CSS.
- Thống kê và phân tích CSS.
- CSS làm đẹp.
- CSS lint nâng cao.
- Loại bỏ CSS trùng lặp.
- Trình chỉnh sửa CSS nâng cao được kết nối với CSS lint với các mẹo tối ưu hóa.
Cách sử dụng
Bước 1: khởi động tiện ích trình duyệt trên một trang
Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.
Bước 2: tạo CSS quan trọng
Trình tạo CSS quan trọng có thể được truy cập thông qua tab Công cụ trong tiêu đề.
Configure the JSON using the options in the the documentation.
Bước 3: tối ưu hóa kết quả
Đầu ra của trình tạo CSS quan trọng là dữ liệu thô và yêu cầu tối ưu hóa thêm, chẳng hạn như nén.
Nút Tối ưu hóa trong menu trình chỉnh sửa cho phép áp dụng nén và tối ưu hóa mã nâng cao.
Tài liệu
Trình tạo CSS quan trọng
Trình tạo CSS quan trọng chấp nhận các tùy chọn sau.
Ví dụ cấu hình trình tạo CSS quan trọng
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [
"*",
"*:before",
"*:after",
"html",
"body"
],
"selectorsToRemove": [
"/\#C/",
"/\.chattxt/"
],
"propertiesToKeep": [],
"propertiesToRemove": [
"/(.*)transition(.*)/i",
"cursor",
"pointer-events",
"/(-webkit-)?tap-highlight-color/i",
"/(.*)user-select/i"
],
"pseudoSelectorsToKeep": [
"::before",
"::after",
"::first-letter",
"::first-line",
":before",
":after",
":first-letter",
":first-line",
":visited",
"/:nth-child.*/"
],
"pseudoSelectorsToRemove": [],
"maxElementsToCheckPerSelector": false,
"maxEmbeddedBase64Length": 1000,
"strictParser": false,
"ui_actions": [
{
"viewport": "360x640",
"notes": "Đặt chế độ xem để khám phá CSS trong màn hình đầu tiên."
},
{
"wait": 1000,
"notes": "Đợi 1000 mili giây để kích hoạt chế độ xem hiển thị."
},
{
"run": true,
"notes": "Chạy trình tạo CSS quan trọng (tính toán CSS trong màn hình đầu tiên)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Kích hoạt MouseEvent mới trên phần tử DOM a.nav-menu."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Thực thi tập lệnh, trong trường hợp này, hãy đóng menu trước khi tiếp tục với chế độ xem tiếp theo."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Hành động giao diện người dùng của trình tạo CSS quan trọng
Trình tạo CSS quan trọng cung cấp khả năng kiểm soát trình duyệt giống Puppeteer. Tham số ui_actions
chấp nhận một mảng với các đối tượng hành động giao diện người dùng xác định các thay đổi trạng thái giao diện người dùng theo thứ tự thời gian.
run
Chạy trình tạo CSS quan trọng trên trạng thái giao diện người dùng hiện tại. Hành động này cần được lặp lại mỗi khi trạng thái giao diện người dùng thay đổi để khám phá mã CSS mới trong màn hình đầu tiên.
{
"run": true
}
wait
Đợi một số mili giây trước khi tiếp tục với hành động tiếp theo.
{
"wait": 1000
}
viewport
Đặt kích thước khung nhìn.
{
"viewport": "1300x900"
}
scroll
Cuộn khung nhìn. Tùy chọn chấp nhận một giá trị số (pixel từ trên xuống), chuỗi phần trăm ( 50%
) hoặc một mảng có vị trí [x,y]
tính bằng pixel.
{
"scroll": 400
}
event
Kích hoạt sự kiện trình duyệt ( new Event()
) trên bộ chọn DOM tùy chọn.
{
"event": "click",
"selector": "a.link"
}
mouseevent
Kích hoạt sự kiện chuột ( new MouseEvent()
) trên bộ chọn DOM tùy chọn. Hành động chấp nhận tham số mouseEventInit
với các tùy chọn MouseEvent bao gồm khả năng đặt tọa độ x,y. Khi mouseEventInit
bị bỏ qua, các tùy chọn mặc định là {"bubbles": true,"cancelable": true}
.
{
"mouseevent": "mouseover",
"selector": "a.link",
"mouseEventInit": {
"bubbles": true,
"cancelable": true
}
}
script
Đánh giá mã javascript. Hành động này cho phép thực thi mã javascript trên một trang, ví dụ: để đóng cửa sổ bật lên trước khi thực hiện các thay đổi trạng thái giao diện người dùng tiếp theo.
{
"script": "Popups.close();"
}
fn
Thực thi một chức năng javascript. Hành động này cho phép thực thi chức năng javascript được định cấu hình trước. Tùy chọn bổ sung "promise":true
cho phép mong đợi một lời hứa và đợi lời hứa giải quyết trước khi tiếp tục với hành động tiếp theo.
{
"fn": "action_to_perform",
"promise": true
}
notes
Mỗi đối tượng hành động chấp nhận một tham số notes
có thể được sử dụng để thêm văn bản mô tả.
{
"script": "add_to_cart();",
"notes": "mô tả hành động giao diện người dùng cho mục đích sử dụng cá nhân"
}
Cấu hình hành động giao diện người dùng ví dụ
{
"ui_actions": [
{
"viewport": "360x640",
"notes": "Đặt chế độ xem để khám phá CSS trong màn hình đầu tiên."
},
{
"wait": 1000,
"notes": "Đợi 1000 mili giây để kích hoạt chế độ xem hiển thị."
},
{
"run": true,
"notes": "Chạy trình tạo CSS quan trọng (tính toán CSS trong màn hình đầu tiên)."
},
{
"mouseevent": "click",
"selector": "a.nav-menu",
"notes": "Kích hoạt MouseEvent mới trên phần tử DOM a.nav-menu."
},
{
"wait": 2000
},
{
"run": true
},
{
"script": "close_nav_menu();",
"notes": "Thực thi tập lệnh, trong trường hợp này, hãy đóng menu trước khi tiếp tục với chế độ xem tiếp theo."
},
{
"viewport": "1300x900"
},
{
"wait": 1000
},
{
"run": true
}
]
}
Loại bỏ CSS không sử dụng
Trình loại bỏ CSS không sử dụng sử dụng cùng một phần mềm như trình trích xuất CSS quan trọng và chấp nhận hầu hết các tùy chọn cấu hình giống nhau, bao gồm kiểm soát trình duyệt giống như Puppeteer thông qua các hành động trên giao diện người dùng. Công cụ này cũng cho phép trích xuất CSS không sử dụng.
Cấu hình ví dụ của công cụ xóa CSS không sử dụng
{
"atRulesToKeep": [
"charset",
"keyframes",
"import",
"namespace",
"page"
],
"atRulesToRemove": [],
"selectorsToKeep": [
"*",
"*:before",
"*:after",
"html",
"body"
],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"pseudoSelectorsToKeep": [
"/:.*/"
],
"pseudoSelectorsToRemove": [],
"maxElementsToCheckPerSelector": false,
"strictParser": false,
"ui_actions": [
{
run: true
}
]
}
Loại bỏ CSS trùng lặp
Công cụ loại bỏ CSS trùng lặp cho phép so sánh hai biểu định kiểu và loại bỏ hoặc trích xuất CSS trùng lặp.
Cấu hình ví dụ của công cụ loại bỏ CSS trùng lặp
{
"atRulesToKeep": [],
"atRulesToRemove": [],
"selectorsToKeep": [],
"selectorsToRemove": [],
"propertiesToKeep": [],
"propertiesToRemove": [],
"strictParser": false
}
Trường đầu vào thứ hai chấp nhận số chỉ mục biểu định kiểu. Bạn có thể tìm thấy chỉ mục của biểu định kiểu trên tổng quan biểu định kiểu trên tab cài đặt.
Tổng quan về chỉ mục biểu định kiểu
Bạn có thể tải lên biểu định kiểu hoặc so sánh biểu định kiểu từ (các) URL bên ngoài bằng cách tạo biểu định kiểu mới. Sau đó, bạn có thể nhập URL hoặc tải biểu định kiểu lên và sử dụng chỉ mục từ biểu định kiểu mới trong trình xóa CSS trùng lặp.
Nhập hoặc tải lên biểu định kiểu
Sau khi được định cấu hình, nhấn nút để bắt đầu loại bỏ CSS trùng lặp. Nhận xét CSS sẽ hiển thị số liệu thống kê cơ bản về CSS đã giảm.
Kết quả loại bỏ CSS trùng lặp