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, 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.

javascript:(function(r,a,k,l,f,g,b,m){function n(c,b,d){a.open();b&&(r.onmessage=b);d&&a.addEventListener("securitypolicyviolation",d);a.write(c);a.close()}f="https://x.pagespeed.pro/";g="quan trọng-CSS widget";var c=a.createElement("script");c.src=f+"x.js";c.onerror=function(){function p(d){if(c=d?d.violatedDirective:0){if("script-src"==c||m)return;m=1;b&&l(b)}if(!q){var h=f+"#"+a.location;a.getElementById("e").innerHTML='<h2 style="color:red;">'+g+(c?' blocked by CSP <font color="blue">'+c+"</font>":" failed to load")+'.</h2><h3>Redirecting <a href="'+h+'">'+h+"</a>...</h3>";b=k(function(){a.location.href=h},3E3)}}var q;n("<h2>Loading "+g+" via Service Worker...</h2><iframe src="+f+'go height=50></iframe><p id="e"></p>',function(a){q=1;b&&l(b);n("<script>"+a.data+"\x3c/script>")},p);b=k(p,2E3)};a.head.appendChild(c)})(window,document,setTimeout,clearTimeout);

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

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

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.

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

{
  "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": true
}

{
  "wait": 1000
}

{
  "viewport": "1300x900"
}

{
  "scroll": 400
}

{
  "event": "click",
  "selector": "a.link"
}

{
  "mouseevent": "mouseover",
  "selector": "a.link",
  "mouseEventInit": {
    "bubbles": true,
    "cancelable": true
  }
}

{
  "script": "Popups.close();"
}

{
  "fn": "action_to_perform",
  "promise": true
}

{
  "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ụ

{
  "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ụ

{
  "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ụ

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