Trang web này sử dụng cookie cho Google Analytics.

Do luật riêng tư, bạn không thể sử dụng trang web này mà không chấp nhận việc sử dụng các cookie này.

Xem chính sách bảo mật

Bằng cách chấp nhận, bạn đồng ý với cookie theo dõi Google Analytics. Bạn có thể hoàn tác sự đồng ý này bằng cách xóa cookie trong trình duyệt của mình.

Trình tạo CSS quan trọng

Một 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 .

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 và trình tối ưu hóa trong màn hình đầu tiên


Giới thiệu

Trình tạo CSS quan trọng cho phép giải quyết Core Web Vitals của Google loại bỏ hình phạt CSS không được sử dụng , hoàn toàn dựa trên CSS tối thiểu. Nó cho phép đạt được kết quả hoàn hảo về pixel .

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.

Tiện ích trình duyệt cung cấp ví dụ về phần mềm CSS quan trọng nâng cao hơn có thể được sử dụng thông qua trình duyệt Chrome trong Google Cloud. Xem để biết thêm thông tin plugin tối ưu hóa chuyên nghiệp của chúng tôi.


Cài đặt

Để cài đặt tiện ích, kéo liên kết này🗔 quan trọng-CSS vào thanh yêu thích hoặc sao chép và dán mã bên dưới.

add widget to bookmarks
Không bắt buộc Ủy quyền cho Service WorkerCache-API cho miền được bảo mật CDN của Google 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 .

Đặc trưng

  1. Trình tạo CSS quan trọng nâng cao

    1. Đượ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.
    2. Hỗ trợ nhiều chế độ xem (máy tính để bàn + thiết bị di động) cho CSS quan trọng đáp ứng .
    3. 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.
    4. Đầu ra CSS quan trọng thuần túy chưa được tối ưu hóa thô.
  2. Trình tối ưu hóa trong màn hình đầu tiên

    1. So sánh CSS quan trọng với CSS gốc.
    2. Thước đo pixel có thể tùy chỉnh.
  3. Công cụ tối ưu hóa nâng cao

    1. Trình xóa CSS không sử dụng để xóa CSS quan trọng khỏi biểu định kiểu.
    2. Phần mềm tối ưu hóa và nén (thu nhỏ) CSS chuyên nghiệp.
    3. Sửa chữa CSS bị hỏng. Một công cụ để sửa CSS không đúng định dạng.
    4. Autoprefixer. Một công cụ để áp dụng tiền tố trình duyệt cho CSS.
    5. Thống kê và phân tích CSS.
    6. CSS làm đẹp.
    7. CSS lint nâng cao.
    8. Loại bỏ CSS trùng lặp.
    9. 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

Điều hướng đến trang mà bạn muốn trích xuất CSS quan trọng và khởi động tiện ích trình duyệt. Bấm vào đây để xem hướng dẫn cài đặt.

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 đề.

Trình tạo CSS quan trọng và trình tối ưu hóa trong màn hình đầu tiên

Định cấu hình JSON bằng cách sử dụng các tùy chọn trong tài liệu .

Trình tạo CSS quan trọng và trình tối ưu hóa trong màn hình đầu tiên

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.

Trình tạo CSS quan trọng và trình tối ưu hóa trong màn hình đầu tiê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.

Trình tạo CSS quan trọng và trình tối ưu hóa trong màn hình đầu tiên


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.

Lựa chọn
Sự miêu tả
Kiểu
atRulesToKeep
Một mảng các quy tắc CSS @ (chuỗi hoặc biểu thức chính quy) để đưa vào CSS quan trọng một cách mạnh mẽ.
["media", "charset", "/rule(.*)/i"]
atRulesToRemove
Một mảng các quy tắc CSS @ (chuỗi hoặc biểu thức chính quy) để xóa mạnh khỏi CSS quan trọng.
["media", "charset", "/rule(.*)/i"]
selectorsToKeep
Một mảng các bộ chọn CSS (chuỗi hoặc biểu thức chính quy) để đưa vào CSS quan trọng một cách mạnh mẽ.
[".selector", "/\\.selector(.*)/i"]
selectorsToRemove
Một mảng các bộ chọn CSS (chuỗi hoặc biểu thức chính quy) để xóa mạnh khỏi CSS quan trọng.
[".selector", "/\\.selector(.*)/i"]
propertiesToKeep
Một mảng các khai báo CSS (chuỗi hoặc biểu thức chính quy) để đưa vào CSS quan trọng một cách bắt buộc. Để khớp các giá trị, hãy sử dụng mảng cấp 2 với chuỗi khai báo hoặc biểu thức chính quy ở chỉ mục 0 và chuỗi giá trị hoặc biểu thức chính quy ở chỉ mục 1.
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
propertiesToRemove
Một mảng các khai báo CSS (chuỗi hoặc biểu thức chính quy) để loại bỏ mạnh mẽ khỏi CSS quan trọng. Để khớp các giá trị, hãy sử dụng mảng cấp 2 với chuỗi khai báo hoặc biểu thức chính quy ở chỉ mục 0 và chuỗi giá trị hoặc biểu thức chính quy ở chỉ mục 1.
["-webkit-transition", "/(.*)transition(.*)/i", [ "display", "none" ] ]
pseudoSelectorsToKeep
Một mảng các bộ chọn giả CSS (chuỗi hoặc biểu thức chính quy) để đưa vào CSS quan trọng một cách mạnh mẽ.
[":before", "/:nth-child(.*)/i"]
pseudoSelectorsToRemove
Một mảng các bộ chọn giả CSS (chuỗi hoặc biểu thức chính quy) để loại bỏ mạnh mẽ khỏi CSS quan trọng.
[":before", "/:nth-child(.*)/i"]
maxElementsToCheckPerSelector
Số lượng phần tử tối đa để kiểm tra khả năng hiển thị trong màn hình đầu tiên. Cài đặt này có thể ảnh hưởng đến tốc độ của máy phát điện.
false or 100
maxEmbeddedBase64Length
Kích thước tối đa tính bằng byte của hình ảnh nội tuyến được mã hóa Base64 để đưa vào CSS quan trọng.
1000
strictParser
Theo mặc định, CSS được phân tích cú pháp bằng cách sử dụng Trình phân tích cú pháp an toàn PostCSS có khả năng chịu lỗi để tự động sửa các lỗi cú pháp. Cài đặt này cho phép sử dụng trình phân tích cú pháp nghiêm ngặt.
true
ui_actions
Một loạt các hành động cần thực hiện trên trạng thái giao diện người dùng để khám phá mã CSS trong màn hình đầu tiên. Xem tài liệu hành động giao diện người dùng bên dưới.
[{"viewport":"360x640"}, {"run": true}]

Hiển thị cấu hình ví dụ

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"
}

Hiển thị cấu hình ví dụ

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.

Hiển thị cấu hình ví dụ

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.

Hiển thị cấu hình ví dụ

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 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 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 Kết quả loại bỏ CSS trùng lặp