WordPress'te Kritik CSS: Nedir ve CSS Dağıtımını Optimize Etme

Google PageSpeed ​​Insights'ta bir performans denetimi yaparken, Google'ın neredeyse her seferinde "oluşturmayı engelleyen kaynakları ortadan kaldırmanızı" önerdiğini göreceksiniz. Bu, kritik CSS ve JavaScript'inizi her zaman öncelikli olarak yüklemeniz gerektiği anlamına gelir.

Ancak hangi CSS'nin kritik olduğuna ve hangisinin olmadığına nasıl karar verilir? Bir diğerini hızlandırmak için web sitenizin hangi bölümünü “ertelemelisiniz”? Her şey öncelikler ve hangi CSS kaynaklarının gerekli olduğunu ve bunların nasıl optimize edileceğini bulmakla ilgilidir.

Hadi dalalım.

Kritik CSS Nedir ve Performans İçin Neden Önemlidir?

Kritik CSS, sayfayı mümkün olduğunca çabuk görüntülemek için CSS'yi ekranın üst kısmından çıkaran bir tekniktir. Bir ziyaretçi tarafından görüntülenen içeriği görüntülemek için minimum CSS kullanmaya benzer.

Diğer bir deyişle, kritik CSS, performansı optimize etmenin anahtarıdır. Sayfayı oluşturmadan önce, tarayıcınızın CSS dosyalarını indirmesi ve ayrıştırması gerekir, bu da bu dosyaları oluşturmayı engelleyen bir kaynak haline getirir. CSS dosyalarınız ne kadar büyükse, tarayıcının bunları işlemesi o kadar uzun sürer. Ağır CSS dosyaları tarafından oluşturulan tüm bu istekler, bir web sayfasının yüklenme süresini artıracak ve ziyaretçileri üzecektir. ve Google.

Önemli Web Verileri de dahil olmak üzere yeni sıralama faktörü nedeniyle sayfa hızı SEO performansınızı da etkileyebilir. Bunlar, bir sayfanın ne kadar hızlı olduğu da dahil olmak üzere kullanıcı deneyimini ölçmek için Google tarafından uygulanan bir dizi faktördür. Deneyim ne kadar iyi olursa, sıralamanız o kadar iyi olur.

Performansı ölçen altı Lighthouse metriğini biliyor musunuz? Bunlardan ikisi – First Contentful Paint (FCP) ve First Input Delay (FID) – web sitenizin algılanan hızını ölçer. Bu metrikler iyi durumdaysa, kullanıcı deneyiminiz de Google tarafından ölçülür. Ancak, her iki KPI de kırmızıysa, kritik CSS'nizi optimize etmeniz daha iyi olur.

Basit İngilizce ile Açıklanan Kritik CSS

Sade İngilizce'de kritik CSS, bir optimizasyon görevidir. Tarayıcınıza yalnızca ziyaretçi tarafından görüntülenen CSS'yi yüklemesini söylemek gibidir. Bu, algılanan hızı iyileştirmeye yardımcı olur, yani web sitesinin bir ziyaretçiye ne kadar hızlı göründüğü anlamına gelir.

Aşağıdaki resimle hızlı bir alıştırma yapalım. Bir web sitesine erişen bir mobil kullanıcı olduğunuzu hayal edin.

Senaryo 1 – Üstte, oluşturmayı engelleyen CSS'ye sahip bir sayfa var. Tüm CSS dosyası yüklenene kadar boş bir sayfa görürsünüz.

Senaryo #2 – Altta, önce kritik CSS işlenir. Tarayıcı en önemli stil sayfasını yüklemeye başladığı için sayfayı çok daha erken görmeye başlarsınız.

Soru: Hangi senaryo size daha hızlı “hissediyor”?

Cevap: Alt satırın algılanan hızının daha iyi olduğu konusunda hepimiz hemfikiriz.

Ziyaretçiniz, düzgün yapıldığında daha hızlı sayfa oluşturma nedeniyle sayfa yükleme süresinde algılanan bir azalma hissedecektir.

Kritik CSS Neden Gereklidir?

Bir CSS stil sayfası yüklemek, genellikle WordPress sitenizi nasıl şekillendirirsiniz. CSS, renkler, düzen ve yazı tipleri gibi bir web sayfasını tanımlamak için kullanılan dildir. CSS olmadan, web aşağıdaki sol sütunumuz gibi görünürdü:

WP Rocket'in CSS'siz sitesi	WP Rocket'in CSS ile sitesi

Kritik CSS Oluşturma Yolu Ne Anlama Geliyor?

Kritik İşleme Yolu, ziyaretçi ekranında bir sayfa oluşturmak için tarayıcının gerçekleştirmesi gereken görevler dizisidir. Örneğin, bu görevler, fotoğrafları, yazı tiplerini ve web sayfasında görüntülenecek metni indirmeyi içerir.

Daha önce görüldüğü gibi, sayfanın uygun düzenini oluşturmak için tarayıcının CSS dosyalarınızı da indirmesi gerekir. Dosyalarınız gerçekten büyükse, ziyaretçiler dosyanın tamamı indirilene kadar bekleyecektir.

Ancak, indirme işlemi ilerledikçe tarayıcı CSS'yi oluşturmaya başlayabilirse ne olur?

Engellemeyi azaltmanın ve CSS dağıtımını mümkün olan en kısa sürede başlatmanın bir yolunu hayal edin. Bu teknik, tam olarak kritik işleme yolunun optimizasyonu olarak bilinir.

Tarayıcı, sayfayı ziyaretçilere sunana kadar beş adımı takip eder. Bu süreçte çok şey olabilir. Bu yüzden her adımın mümkün olduğunca çabuk tamamlandığından emin olmalıyız.

Şimdi iki soru geliyor: Her adım nasıl optimize edilir? En verimli CSS dağıtımına sahip olduğumuzdan nasıl emin olabiliriz?

Bu sorular bizi bir sonraki bölüme götürüyor. Kritik CSS tekniğiyle (CSS dağıtımını optimize edin) oluşturma sürelerini nasıl iyileştireceğinizi ve oluşturmayı engelleyen CSS hatalarını nasıl ortadan kaldıracağınızı öğreneceksiniz.

CSS Teslimatını Optimize Etmenin 3 Adımı

CSS, WordPress sitenizin görsel biçimlendirmesini ve stilini kontrol eder, ancak CSS dosyası en iyi şekilde sunulmazsa, yavaş bir web sayfasıyla karşılaşabilirsiniz.

Bu nedenle, WordPress sitenizin performansını artırmanın en iyi yollarından biri, CSS kodunun nasıl ve ne zaman teslim edildiğini optimize etmektir. WordPress siteniz için CSS dağıtımını optimize etmek için üç ana adım vardır:

Adım 1: Kritik CSS'yi bulun ve oluşturun - bu, ekranın üst kısmındaki içeriği görüntülemek için ihtiyacınız olan minimum CSS kodunu belirler. Kullanıcının sayfayı ilk yüklediğinde görünüm alanında neler görebileceğini öğrenmeniz gerekir. Ziyaretçiler masaüstü, tablet ve mobil gibi birçok farklı ekran boyutu kullandığından, bir sayfa için doğru kritik CSS'yi belirlemek karmaşık olabilir.

Kritik CSS nasıl bulunur

WebDev, kritik CSS'yi tanımlamak için kullanabileceğiniz üç araç sunar:

• Kritik - ekranın üst kısmındaki CSS'yi çıkarır (ve ayrıca onu satır içi yapar ve küçültür)
• CriticalCSS – kritik CSS'yi ayıklayan başka bir modül
• Penthouse – sitenizde çok fazla CSS varsa iyi bir seçim

Adım 2: Bu kritik CSS'yi satır içine alın - bu, bu stilleri getirmek için tüm ek istekleri ortadan kaldırmak için HTML belgesinin <head> bölümüne kritik CSS'yi eklemektir.

Aşağıdaki WebDev örneğinde, kritik CSS'yi <head> dosyasına sıraladılar, böylece tarayıcı daha hızlı sunabilir ve bir şeyi kullanıcılara mümkün olan en kısa sürede sunabilir.

Adım 3: CSS'nin geri kalanını eşzamansız olarak yükleyin - bu, kritik olmayan CSS'yi geciktirir, böylece ziyaretçileriniz web sayfası içeriğinizi gördükten sonra yüklenebilir. Bu teknik aynı zamanda “ertelenmiş yükleme” olarak da bilinir. WebDev tüm manuel süreci çok iyi açıklıyor.

Bu üç manuel adımı izleyerek, CSS teslimatınızı ve kritik oluşturma yolunuzu optimize edeceksiniz. Ancak, WordPress CSS dağıtımını optimize etmenin daha basit yöntemleri vardır: bir WordPress eklentisi kullanarak!

Bir Eklenti ile Kritik CSS Oluşturma ve Kritik İşleme Yolunu Optimize Etme

Neyse ki, bir WordPress eklentisi kullanarak kritik CSS'nizin dağıtımını optimize edebilir ve daha az önemli kaynakları erteleyebilirsiniz. Bu size biraz zaman kazandıracak ve kod dosyalarınızı manuel olarak değiştirmekten kaçınacaktır. Hangi aracın sizin için en iyi olduğunu test edebilmeniz için bir liste hazırladık.

• WP Rocket – Kritik CSS'nizi satır içi olarak algılayan ve onu en basit şekilde erteleyen en eksiksiz önbellek eklentisi. Bir sonraki bölümde pratik bir örneğin üzerinden geçeceksiniz.

• Autoptimize – Varsayılan olarak sayfa başlığına CSS enjekte eder ve ayrıca kritik CSS'yi satır içi ve erteleyebilir.

• Varlık Temizleme – Satır İçi CSS Dosyaları (otomatik olarak ve stil sayfalarının yolunu belirterek).

WP Rocket ile CSS Teslimatı Nasıl Optimize Edilir

WP Rocket 3.10'da, CSS'yi Eşzamansız Olarak Yükle seçeneği, daha önce gördüğümüz sayfa hızı önerisini ele alır: "Oluşturmayı engelleyen kaynakları ortadan kaldırın". WP Rocket, iki ana CSS optimizasyonunu kapsar:

1. Web sitenizin görünür kısmını (ekranın üst kısmındaki içerik) oluşturmak için gereken kritik CSS'yi oluşturur.
2. Diğer tüm CSS dosyalarını eşzamansız olarak yükler (hangisinin önce yüklenmesi gerektiğine öncelik verir).

CSS dağıtımını optimize etmek için WP Rocket'in panosundaki şu adımları izlemeniz yeterlidir:

• Ayarlar > WP Roketine gidin
• Dosya Optimizasyonu sekmesine tıklayın.
• CSS Dosyaları bölümüne gidin ve CSS dağıtımını optimize et etiketli kutuyu tıklayın.
• Kullanılmayan CSS'yi Kaldır seçeneğini seçin ( önerilen seçenek ). Bu, yalnızca sayfada gereken CSS'yi çıkaracak ve aynı zamanda satır içi olacaktır.

Alternatif olarak, WP Rocket, CSS'yi eşzamansız olarak yüklemenize izin verir ve kritik CSS için bir geri dönüş seçeneği sunar. Eklentinin doğru kritik CSS'yi oluşturamaması durumunda bu yedek alanı kullanın.

Son olarak, WP Rocket, PageSpeed ​​Insights'ın "Kullanılmayan CSS'yi azalt" önerilerini de ele alır.

Kullanılmayan CSS, tarayıcının hala onları yüklemesi gerektiğinden, sayfanın yüklenme süresini etkiler. En Büyük İçerikli Boyama (LCP) ve Toplam Engelleme Süresi (TBT) gibi Google performans ölçümleri de etkilenecektir. LCP ve TBT, Google PageSpeed ​​ve Önemli Web Verileri notunda toplam %55 ağırlığa sahiptir, bu nedenle bu metrikleri sağlıklı tutmak çok önemlidir.

Bu WP Roket seçeneklerini bir WordPress sitesinde PSI'da (mobil) kötü bir notla test edelim. Sayfa hızı optimizasyon sürecimizde WP Rocket'in bize nasıl yardımcı olacağını göreceksiniz.

Kritik CSS'imi optimize etmeden önce, performans notum yalnızca 43/100'dü ve bu da mobil sitemi kırmızıya çevirdi:

Ayrıca iki uyarı alıyorum: "Kullanılmayan CSS'yi azalt" ve "Oluşturmayı engelleyen kaynakları ortadan kaldır".

Şimdi WP Rocket kurulumu yapalım ve “ Kullanılmayan CSS'yi Kaldır” seçeneğini aktif edelim.

Performans sonuçları artık mobilde harika . Sadece birkaç tıklamayla 94/100'e ulaştık. WP Rocket, oluşturma yolumu optimize etti ve ayrıca kritik CSS'imle ilgilendi.

"Oluşturmayı engelleyen kaynakları ortadan kaldırın" ve "Kullanılmayan CSS'yi azalt" uyarıları artık "geçen denetimler" bölümündedir.

Tıpkı benim gibi, kritik CSS'mizin dağıtımını optimize etmek için WP Rocket'i kullanabilirsiniz. Birkaç tıklamayla inanılmaz performans hedeflerine ulaşmama yardımcı olan güvenilir ve verimli bir eklenti.

Toplama

Kritik CSS'nizi optimize etmek göz korkutucu görünüyor, ancak WP Rocket gibi eklentiler sayesinde bu şekilde olması gerekmiyor. WP Rocket'in Google PageSpeed ​​Insights'ta oluşturmayı engelleyen kaynaklarla ilgili kırmızı uyarıların ortadan kaldırılmasına yardımcı olduğunu gördük.

WP Rocket, web performansı en iyi uygulamalarının %80'ini otomatik olarak uyguladığı için değerli zamandan tasarruf edeceksiniz ve etkinleştirme üzerine anında bir hız artışı göreceksiniz .

Dahası, %100 para iade garantimize her zaman güvenebilirsiniz. Hiç bir zaman isteyeceğinizi düşünmesek de, satın alma tarihinden itibaren 14 gün içinde talep ederseniz memnuniyetle geri ödeme yaparız.