Kritik CSS oluşturucu

Gelişmiş bir kritik CSS oluşturucu ve ekranın üstü optimize edici için ücretsiz bir tarayıcı widget'ı.

Ekranın üst kısmı optimize edici

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

giriiş

Kritik CSS oluşturucu, Google'ın Temel Web Verileri'nin, yalnızca minimum CSS temelinde kullanılmayan CSS cezasını kaldırmasını çözmenize olanak tanır. Mükemmel bir piksel sonucunun elde edilmesini sağlar.

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.

Tarayıcı widget'ı, Google Cloud'daki bir Chrome tarayıcı aracılığıyla kullanılabilecek daha gelişmiş kritik CSS yazılımının bir örneğini sağlar. Daha fazla bilgi için profesyonel optimizasyon eklentimize bakın.

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);

Ö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

Kritik CSS'yi çıkarmak istediğiniz sayfaya gidin ve tarayıcı widget'ını başlatın. Kurulum talimatları için buraya tıklayınız .

2. Adım: Kritik CSS oluşturun

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

JSON'u belgelerdeki seçenekleri kullanarak yapılandırın.

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