WordPress CSS'yi Anlamak
Dalmadan önce, WordPress'te normal CSS'nin nasıl çalıştığını anlayalım.
Her WordPress teması, sitenize stil vermek için gereken tüm kodu içeren style.css'den oluşur. Tema geliştiricileri, blog gönderileri, yorumlar, ürünler sayfası, üyelik sayfası, formlar vb. dahil tüm WordPress özelliklerini desteklemelidir. Yükleyeceğiniz diğer eklentiler de benzer css stil sayfaları ekleyebilir.
Bu, css dosyalarını şişirebilir ve 200 kb veya daha fazla boyutta büyütebilir.
Kritik Yol CSS nedir?
CSS dosyalarınız büyüdükçe, tarayıcınızın bu büyük dosyaları indirmesi, ayrıştırması ve oluşturması gerekir. Ayrıca işleme engelleme olarak da bilinir. Ayrıca ilk anlamlı oluşturmayı ve ilk anlamlı oluşturmayı artıracaktır.
Kritik Yol CSS, yukarıdaki içeriği her web sayfasında oluşturmak için gereken CSS'dir. Adından da anlaşılacağı gibi, "kritik" CSS, tarayıcının tam CSS dosyalarını yüklemeden önce onu hızla çizmesine ve oluşturmasına yardımcı olur.
Genellikle kritik yolun css'si üstbilgiye gömülür ve kaynak css dosyası, kullanım kolaylığı için eşzamansız olarak veya altbilgiye yüklenir.
Kritik Yol CSS neden bu kadar önemli?
Google PageSpeed Insights veya GTmetrix gibi araçlardan "css dağıtımını optimize et" veya "kullanılmayan css'yi ertele" şeklinde bir uyarı görmüş olmalısınız.
Kritik CSS'nin sayfa yükleme süresiyle hiçbir ilgisi yoktur. Yükleme süresini artırmaz/azaltmaz. Ancak çok daha iyi bir kullanıcı deneyimi sunar. Bir web sayfasını hızlı bir şekilde "oluşturmaya" veya "renklendirmeye" yardımcı olur.
- First Content Draw'u (FCP) İyileştirir
- İlk Önemli Ödemeyi (FMP) İyileştirir
- Kullanılmayan CSS'yi kaldırın (teknik olarak kaldırmayın, ancak "yararlı" CSS'ye öncelik verin)
İşte blogumun kritik CSS'li ve CSS'siz iki ekran görüntüsü.
"Kritik css yolu yok" bölümünde görebileceğiniz gibi, kullanıcıya bir mobil cihazda faydalı bir şey göstermek neredeyse 5 saniye sürdü. Tarayıcının, işlemeye başlamak için css dosyasına ek bir HTTP isteği yapması, indirmesi, ayrıştırması gerekir. Ancak kritik css kullanılırken, tüm gerekli css satır içi olmalıdır ve tarayıcı, HTML dosyasını yükledikten hemen sonra bir veya daha kısa sürede işlemeye başlayabilir.
WordPress'te kritik CSS nasıl oluşturulur?
WordPress'te kritik CSS oluşturmanın birkaç yolu vardır.
Önbelleğe alma eklentilerini kullanma
WP Rocket, gerçekten iyi çalışan birinci sınıf bir önbelleğe alma eklentisidir.
Her sitede WP Rocket kullanmamın sebeplerinden biri kritik CSS neslinin kendisidir. Ana sayfa, gönderiler sayfası, kategori sayfası, ürün sayfası vb. için ayrı ayrı Kritik CSS oluşturur ve gömerler. Temada veya ayarda değişiklik olması durumunda kritik CSS'yi geri yüklerler.
Her şey bir düğmeye dokunarak yapılabilir.
Kritik CSS oluşturabilen diğer önbelleğe alma eklentileri
Swift Performance ve LiteSpeed (LiteSpeed/OpenLiteSpeed sunucu gerektirir) Critical CSS oluşturabilen benzer eklentilerdir. Bu eklentilerin her ikisinde de sunucularında yerleşik bulut ve tam önbellek bulunur.
Autoptimize + Ücretsiz Kritik CSS Oluşturucuyu Kullanma
Sitenizin URL'sini girerek önemli css sağlayan üçüncü taraf çevrimiçi araçlar vardır. pegasaas harika bir ücretsiz araçtır.
Bunu nasıl yapacağınız aşağıda açıklanmıştır:
Aşama 1. https://pegasaas.com/critical-path-css-generator/ adresine gidin ve URL'nizi girin. Oluşturulan "Kritik Yol CSS'sini" kopyalayın.
Adım 2 Otomatik optimizasyon ayarlarında (gelişmiş ayarları etkinleştir), "CSS Seçenekleri" altında, "Satır İçi ve CSS'yi Ertele" seçeneğini işaretleyin ve kopyalanan CSS'yi yapıştırın.
Artıları:
- Bedava
eksileri:
- Farklı sayfa türleri için ayrı kritik CSS yok (ör. ana sayfa, gönderiler sayfası, kategori sayfası, ürün sayfası vb.)
- Tema/ayar değişikliğinde otomatik olarak yeniden oluşturma
WordPress neden kritik CSS oluşturamıyor?
Fark etmiş olabileceğiniz gibi, kritik bir css yolu oluşturmak, harici hizmetleri etkinleştirir. Peki neden WordPress kendisi üretemiyor?
Critical CSS oluşturmak, Critical (by Google), CriticalCSS veya penthouse gibi açık kaynaklı projelerle mümkün olur. Bu projelerin tümü PHP'ye değil, NodeJS'ye dayanmaktadır. Yani sunucunuza NodeJS kurmanız gerekiyor. Çoğu paylaşılan/yönetilen barındırma sağlayıcısı, çeşitli nedenlerle buna izin vermez.
