Pembuat CSS kritis

Widget browser gratis untuk generator CSS kritis tingkat lanjut dan pengoptimal paruh atas .

Pengoptimal paruh atas

Pembuat CSS kritis dan pengoptimal paruh atas

Perkenalan

Generator CSS Kritis memungkinkan penyelesaian Data Web Inti Google untuk menghapus penalti CSS yang tidak digunakan , murni berdasarkan CSS minimum. Hal ini memungkinkan untuk mencapai hasil piksel yang sempurna .

Hasil CSS kritis terbaik dicapai di browser nyata.

Widget browser dijalankan pada halaman di mana CSS penting akan diekstraksi dan karenanya memiliki akses asli penuh ke lingkungan CSS asli.

Anda dapat memilih stylesheet atau elemen stylesheet inline untuk mengekstrak CSS penting. Ini berguna untuk membuat CSS penting yang dapat dibagikan antar halaman.

Widget browser juga memiliki fitur untuk menghapus CSS penting dari stylesheet.

Alat ini bebas mata-mata. Tidak ada Google Analytics atau pelacakan. Aman digunakan dan dapat digunakan secara lokal melalui cache Service Worker.

Widget browser memberikan contoh perangkat lunak CSS penting yang lebih canggih yang dapat digunakan melalui browser Chrome di Google Cloud. Lihat untuk informasi lebih lanjut plugin pengoptimalan profesional kami.

Install

Untuk memasang widget, seret tautan ini🗔 CSS-kritis ke bilah favorit atau salin & tempel kode di bawah ini.

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="CSS-kritis 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);

Fitur

1. Generator CSS kritis tingkat lanjut

   1. Kustom dikembangkan berdasarkan PostCSS , salah satu parser CSS terbaik.
   2. Mendukung banyak area pandang (desktop + seluler) untuk CSS kritis yang responsif .
   3. Dalang seperti kontrol browser termasuk klik, acara mouse (arahkan, pindahkan dll), gulir, eksekusi kode javascript khusus dan banyak lagi.
   4. Keluaran CSS kritis murni mentah yang tidak dioptimalkan.

2. Pengoptimal paruh atas

   1. Bandingkan CSS kritis dengan CSS asli.
   2. Pengukur ukuran piksel yang dapat disesuaikan.

3. Alat pengoptimalan lanjutan

   1. Penghapus CSS yang tidak digunakan untuk menghapus CSS penting dari stylesheet.
   2. Kompresi CSS profesional (perkecil) dan perangkat lunak pengoptimalan.
   3. Perbaikan CSS rusak. Alat untuk memperbaiki CSS yang salah.
   4. Autoprefixer. Alat untuk menerapkan prefiks browser ke CSS.
   5. Statistik dan analitik CSS.
   6. mempercantik CSS.
   7. Serat CSS tingkat lanjut.
   8. Penghapus CSS duplikat.
   9. Editor CSS lanjutan yang terhubung ke serat CSS dengan tips pengoptimalan.

Cara Penggunaan

Langkah 1: mulai widget browser di halaman

Navigasikan ke halaman yang ingin Anda ekstrak CSS penting dan mulai widget browser. Klik di sini untuk petunjuk instalasi.

Langkah 2: hasilkan CSS kritis

Generator CSS kritis dapat diakses melalui tab Alat di header.

Konfigurasikan JSON menggunakan opsi di dokumentasi .

Langkah 3: optimalkan hasilnya

Keluaran dari generator CSS kritis bersifat mentah dan membutuhkan pengoptimalan lebih lanjut seperti kompresi.

Tombol Optimalkan di menu editor memungkinkan untuk menerapkan pengoptimalan dan kompresi kode tingkat lanjut.

Dokumentasi

Pembuat CSS kritis

Generator CSS kritis menerima opsi berikut.

Tampilkan contoh konfigurasi

{
  "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": "Tetapkan area pandang untuk penemuan CSS paro atas."
    },
    {
      "wait": 1000,
      "notes": "Tunggu 1000ms untuk mengaktifkan viewport untuk merender."
    },
    {
      "run": true,
      "notes": "Jalankan generator CSS kritis (perhitungan CSS paro atas)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Jalankan MouseEvent baru pada elemen DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Jalankan skrip, dalam hal ini tutup menu sebelum melanjutkan dengan area pandang berikutnya."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Tindakan UI dari generator CSS Kritis

Generator CSS kritis menyediakan kontrol browser seperti Puppeteer. Parameter ui_actions menerima larik dengan objek tindakan UI yang menentukan perubahan status UI dalam urutan kronologis.

{
  "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": "deskripsi tindakan UI untuk penggunaan pribadi"
}

Tampilkan contoh konfigurasi

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Tetapkan area pandang untuk penemuan CSS paro atas."
    },
    {
      "wait": 1000,
      "notes": "Tunggu 1000ms untuk mengaktifkan viewport untuk merender."
    },
    {
      "run": true,
      "notes": "Jalankan generator CSS kritis (perhitungan CSS paro atas)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Jalankan MouseEvent baru pada elemen DOM a.nav-menu."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Jalankan skrip, dalam hal ini tutup menu sebelum melanjutkan dengan area pandang berikutnya."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Penghapus CSS yang tidak digunakan

Penghapus CSS yang tidak digunakan menggunakan perangkat lunak yang sama dengan ekstraktor CSS kritis dan menerima opsi konfigurasi yang hampir sama, termasuk kontrol browser seperti Puppeteer melalui tindakan UI. Alat ini juga memungkinkan untuk mengekstrak CSS yang tidak digunakan.

Tampilkan contoh konfigurasi

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

Penghapus CSS duplikat

Penghapus CSS duplikat memungkinkan untuk membandingkan dua lembar gaya dan menghapus atau mengekstrak CSS duplikat.

Tampilkan contoh konfigurasi

{
  "atRulesToKeep": [],
  "atRulesToRemove": [],
  "selectorsToKeep": [],
  "selectorsToRemove": [],
  "propertiesToKeep": [],
  "propertiesToRemove": [],
  "strictParser": false
}

Kolom input kedua menerima nomor indeks stylesheet. Anda dapat menemukan indeks stylesheet di ikhtisar stylesheet di tab pengaturan.

Ikhtisar indeks stylesheet

Anda dapat mengunggah lembar gaya atau membandingkan lembar gaya dari URL eksternal dengan membuat lembar gaya baru. Anda kemudian dapat mengimpor URL atau mengunggah lembar gaya dan menggunakan indeks dari lembar gaya baru di penghapus CSS duplikat.

Impor atau unggah lembar gaya

Setelah dikonfigurasi, tekan tombol untuk memulai penghapus CSS duplikat. Komentar CSS akan menampilkan statistik dasar dari pengurangan CSS yang dihasilkan.

Hasil penghapus CSS duplikat