Kritik CSS oluşturucu

Gelişmiş bir kritik CSS oluşturucu ve ekranın üst kısmı optimize edici için ücretsiz bir tarayıcı widget'ı. Mümkün olan minimum CSS ile mükemmel bir piksel sonucu elde etmek için bir araç.

En kritik CSS sonucu, gerçek bir tarayıcıda elde edilir.

Tarayıcı widget'ı, kritik CSS'nin çıkarılacağı sayfada yürütülür ve bu nedenle orijinal CSS ortamına tam yerel erişime sahiptir.

Kritik CSS'nin çıkarılacağı stil sayfalarını veya satır içi stil sayfası öğelerini seçebilirsiniz. Bu, sayfalar arasında paylaşılabilen kritik CSS oluşturmak için kullanışlıdır.

Tarayıcı widget'ı, kritik CSS'yi stil sayfalarından kaldırma özelliğine de sahiptir.

Araç casus içermez. Google Analytics veya izleme yok. Kullanımı güvenlidir ve bir Service Worker önbelleği aracılığıyla yerel olarak kullanılabilir.

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.

Düzenlemek

Widget'ı yüklemek için bu bağlantıyı sürükle🗔 Kritik-CSS veya aşağıdaki kodu kopyalayıp yapıştırın.

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

Ekranın üst kısmı optimize edici

Kritik CSS oluşturucu ve ekranın üst kısmında optimize edici

Critical CSS oluşturucu, Google'ın Önemli Web Verilerini çözmeye olanak tanır ve kullanılmayan CSS cezasını yalnızca minimum CSS temelinde kaldırır .

Özellikler

1. Gelişmiş kritik CSS oluşturucu

   1. En iyi CSS ayrıştırıcılarından biri olan PostCSS'ye dayalı olarak özel olarak geliştirilmiştir.
   2. Duyarlı kritik CSS için çoklu görünüm portlarını (masaüstü + mobil) destekler.
   3. Tıklama, fare olayları (üzerinde durma, hareket etme vb.), kaydırma, özel javascript kodu yürütme ve çok daha fazlasını içeren kuklacı benzeri tarayıcı kontrolü.
   4. Ham, optimize edilmemiş, saf kritik CSS çıktısı.

2. Ekranın üst kısmı optimize edici

   1. Kritik CSS'yi orijinal CSS ile karşılaştırın.
   2. Özelleştirilebilir piksel ölçü cetvelleri.

3. Gelişmiş optimizasyon araçları

   1. Kritik CSS'yi stil sayfalarından kaldırmak için kullanılmayan CSS kaldırıcı.
   2. Profesyonel CSS sıkıştırma (küçültme) ve optimizasyon yazılımı.
   3. Bozuk CSS onarımı. Hatalı biçimlendirilmiş CSS'yi düzeltmek için bir araç.
   4. Otomatik düzeltici. Tarayıcı öneklerini CSS'ye uygulamak için bir araç.
   5. CSS istatistikleri ve analitiği.
   6. CSS güzelleştirme.
   7. Gelişmiş CSS tüyü.
   8. Yinelenen CSS kaldırıcı.
   9. Optimizasyon ipuçlarıyla CSS tiftiğine bağlı gelişmiş CSS düzenleyici.

Nasıl kullanılır

1. Adım: bir sayfada tarayıcı widget'ını başlatın

Navigate to the page for which you want to extract critical CSS and start the browser widget. Click here for installation instructions.

2. Adım: Kritik CSS oluşturun

Kritik CSS oluşturucuya, başlıktaki Araçlar sekmesinden erişilebilir.

Configure the JSON using the options in the the documentation.

3. Adım: sonucu optimize edin

Kritik CSS oluşturucunun çıktısı hamdır ve sıkıştırma gibi daha fazla optimizasyon gerektirir.

Düzenleyici menüsündeki Optimize Et düğmesi, gelişmiş kod optimizasyonu ve sıkıştırma uygulanmasını sağlar.

Belgeler

Kritik CSS oluşturucu

Kritik CSS oluşturucu aşağıdaki seçenekleri kabul eder.

Örnek yapılandırmayı göster

{
  "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": "Ekranın üst kısmındaki CSS keşfi için görünümü ayarlayın."
    },
    {
      "wait": 1000,
      "notes": "Görüntü portunun oluşturulmasını etkinleştirmek için 1000ms bekleyin."
    },
    {
      "run": true,
      "notes": "Kritik CSS oluşturucuyu çalıştırın (ekranın üst kısmındaki CSS hesaplaması)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Bir.nav-menu DOM öğesinde yeni MouseEvent'i ateşleyin."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Bir komut dosyasını yürütün, bu durumda bir sonraki görünüm alanına geçmeden önce menüyü kapatın."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Critical CSS oluşturucunun kullanıcı arabirimi eylemleri

Kritik CSS oluşturucu, Puppeteer benzeri tarayıcı kontrolü sağlar. ui_actions parametresi, UI durum değişikliklerini kronolojik sırayla tanımlayan UI eylem nesnelerine sahip bir diziyi kabul eder.

{
  "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": "kişisel kullanım için UI eyleminin açıklaması"
}

Örnek yapılandırmayı göster

{
  "ui_actions": [
    {
      "viewport": "360x640",
      "notes": "Ekranın üst kısmındaki CSS keşfi için görünümü ayarlayın."
    },
    {
      "wait": 1000,
      "notes": "Görüntü portunun oluşturulmasını etkinleştirmek için 1000ms bekleyin."
    },
    {
      "run": true,
      "notes": "Kritik CSS oluşturucuyu çalıştırın (ekranın üst kısmındaki CSS hesaplaması)."
    },
    {
      "mouseevent": "click",
      "selector": "a.nav-menu",
      "notes": "Bir.nav-menu DOM öğesinde yeni MouseEvent'i ateşleyin."
    },
    {
      "wait": 2000
    },
    {
      "run": true
    },
    {
      "script": "close_nav_menu();",
      "notes": "Bir komut dosyasını yürütün, bu durumda bir sonraki görünüm alanına geçmeden önce menüyü kapatın."
    },
    {
      "viewport": "1300x900"
    },
    {
      "wait": 1000
    },
    {
      "run": true
    }
  ]
}

Kullanılmayan CSS kaldırıcı

Kullanılmayan CSS kaldırıcı, kritik CSS çıkarıcı ile aynı yazılımı kullanır ve kullanıcı arabirimi eylemleri aracılığıyla Puppeteer benzeri tarayıcı kontrolü de dahil olmak üzere neredeyse aynı yapılandırma seçeneklerini kabul eder. Araç ayrıca kullanılmayan CSS'nin çıkarılmasını da sağlar.

Örnek yapılandırmayı göster

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

Yinelenen CSS kaldırıcı

Yinelenen CSS kaldırıcı, iki stil sayfasını karşılaştırmayı ve yinelenen CSS'yi kaldırmayı veya çıkarmayı mümkün kılar.

Örnek yapılandırmayı göster

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

İkinci giriş alanı, stil sayfası dizin numarasını kabul eder. Bir stil sayfasının dizinini, ayarlar sekmesindeki stil sayfasına genel bakışta bulabilirsiniz.

Stil sayfası dizinine genel bakış

Yeni bir stil sayfası oluşturarak bir stil sayfası yükleyebilir veya harici URL'lerden stil sayfalarını karşılaştırabilirsiniz. Daha sonra URL'leri içe aktarabilir veya stil sayfalarını yükleyebilir ve yeni stil sayfasındaki dizini yinelenen CSS kaldırıcıda kullanabilirsiniz.

Stil sayfalarını içe aktarın veya yükleyin

Yapılandırıldıktan sonra, yinelenen CSS kaldırıcıyı başlatmak için düğmeye basın. Bir CSS yorumu, sonuçta ortaya çıkan azaltılmış CSS'nin temel istatistiklerini görüntüler.

Yinelenen CSS kaldırıcının sonucu