WordPress'te Kritik CSS Nasıl Oluşturulur (2 Yöntem)

Web sitenizi ziyaret eden kişiler, içeriğinizi görmek için uzun süre beklemek istemez. Kodunuzu optimize etmezseniz, CSS gibi oluşturmayı engelleyen kaynaklar, ziyaretçilerin daha yavaş yükleme süreleri algısına katkıda bulunabilir.

Neyse ki, web siteniz için kritik CSS'yi kolayca oluşturabilirsiniz. Jetpack Boost gibi bir eklenti yükleyerek, ekranın üst kısmındaki içeriği görüntülemek için gerekli tüm CSS'yi çıkarabileceksiniz. Bu, web sitenizin daha hızlı ve daha kullanıcı dostu görünmesini sağlamanın anahtarı olabilir.

Bu gönderide, kritik CSS'yi ve neden web siteniz için oluşturmayı düşünmeniz gerektiğini açıklayacağız. Ardından, bunu WordPress'te yapmanın iki farklı yolunu göstereceğiz.

WordPress'te kritik CSS nedir?

Bir ziyaretçi web sitenize giden bir bağlantıya tıkladığında, tarayıcısının içeriği tam olarak işlemek için bir dizi görevi işlemesi gerekir. Kodun indirilmesi, işlenmesi ve piksellere dönüştürülmesi ile ilgili tüm adımlar, Kritik İşleme Yolunu oluşturur.

Tarayıcı, bu yükleme işlemi sırasında sitenin HTML, CSS ve JavaScript kodunu yukarıdan aşağıya okur. Sayfayı oluştururken hangi kaynakların en önemli olduğunu otomatik olarak bilemeyeceğinden, tarayıcı gereksiz kodu işlerken takılıp kalabilir.

Belirli bir CSS dosyası web sitenizin oluşturulmasını durdurursa, oluşturmayı engelleyen bir kaynak haline gelir. Sayfanın görüntülenmesi için gerekli olmasa bile ziyaretçiler, bu oluşturmayı engelleyen CSS tamamen işlenene kadar içeriği görmeyecektir.

Kritik CSS, ekranın üst kısmındaki web içeriği için gerekli CSS kodunu ifade eder. Esasen, tarayıcının içeriğin ilk bölümünü ziyaretçilere göstermesi için ihtiyaç duyduğu minimum koddur.

Kritik CSS oluşturmanın faydaları

Web sayfalarınız için kritik CSS oluşturmak, oluşturmayı engelleyen CSS'leri ortadan kaldırmayı ve tarayıcının yalnızca gerekli olanları işlemesini sağlamayı içerir.

1. İçerik dağıtımını optimize edin

WordPress web siteniz için CSS dağıtımını optimize ettiğinizde, oluşturma sürecini iyileştirebilir. Ön uç bir ziyaretçiye, sayfalarınız daha hızlı yükleniyormuş gibi görünebilir.

Birisi web sitenize geldiğinde, görecekleri ilk şey ekranın üst kısmındaki içerik olacaktır. Bu, kaydırmaya gerek kalmadan ön sayfada görüntülenen her şeydir.

Kritik CSS'yi ayıklayarak, bu ilk bölümü görüntülemek için gereken CSS dosyalarını optimize etmiş olursunuz. Bu olmadan, kullanıcılar tam olarak oluşturulmamış kısmi öğeleri görebilir.

Yaygın bir yanılgı, kritik CSS'nin yükleme sürenizi azalttığı yönündedir. Bu doğru olmasa da, optimizasyon tekniği algılanan performansı artırabilir.

Esasen, tarayıcı ekranın üst kısmındaki öğeleri daha verimli bir şekilde görüntüleyebildiği için kullanıcılar sayfalarınızın daha hızlı yüklendiğini düşüneceklerdir.

WordPress kritik CSS oluşturarak, ziyaretçiler sitenizde daha iyi bir Kullanıcı Deneyimine (UX) sahip olacaklardır. Sonuç olarak, hemen çıkma oranlarını azaltabilir ve tekrar ziyaretleri teşvik edebilirsiniz.

2. Önemli Web Verilerini Geliştirin

WordPress kritik CSS'si sayfa yükleme süresini artırmaz veya azaltmaz, ancak Önemli Web Verilerinizi iyileştirebilir. Bu ölçümler, bir web sitesinin kullanıcı deneyimini analiz eder.

İşte Önemli Web Verileri:

• En Büyük İçerikli Boyama (LCP) : Bir web sitesinin yükleme performansı
• İlk Giriş Gecikmesi (FID) : Bir web sitesinin etkileşimi
• Kümülatif Düzen Kayması (CLS) : Bir web sitesinin görsel kararlılığı

Önemli Web Verileri raporu için web sitenizi taradıktan sonra, First Contentful Paint (FCP) veya İlk Bayt Süresi (TTFB) gibi ek ölçümler görebilirsiniz. Bunlar LCP'yi etkiler ve yükleme sürecinde önemli bir rol oynar.

Kritik CSS, FCP'yi doğrudan etkiler. Basitçe söylemek gerekirse, FCP, yüklenmeye başladıktan sonra bir web sayfasındaki ilk öğeyi oluşturmak için geçen süreyi ölçer. Sitenizin FCP puanı düşükse, ziyaretçiler genellikle bir süreliğine boş bir sayfa görür.

Bir WordPress web sitesi sahibi olarak FCP'yi 1,8 saniyenin altında almayı hedeflemelisiniz, ancak aşağıdakiler dahil birçok unsur bu puanı olumsuz etkileyebilir:

• Oluşturmayı engelleyen JavaScript ve CSS
• Yavaş bir sunucu
• Hacimli yazı tipi dosyaları
• Büyük Belge Nesne Modeli (DOM) boyutu

Oluşturmayı engelleyen CSS, FCP'ye katkıda bulunduğundan, kritik CSS oluşturmak bu puanı iyileştirebilir. Bu işlem sırasında, ekranın üst kısmındaki içeriği oluşturmak için gereken tüm CSS'yi satır içine alacaksınız.

Oluşturmayı engelleyen CSS için web sitenizi nasıl test edebilirsiniz?

WordPress kritik CSS oluşturmadan önce, web siteniz için gerekli olup olmadığını bilmeniz gerekir. Büyük CSS dosyaları, işlemeyi engelleyen kaynaklar olarak kabul edildiğinden, bunları bir hız optimizasyon aracıyla tarayabilirsiniz.

Başlamak için web sitenizin URL'sini PageSpeed ​​Insights'a girin. Bu Google yazılımı, sitenizin performansını çeşitli hız denetimleriyle analiz edecektir.

Sayfanın üst kısmında Önemli Web Verileri değerlendirmenizi görürsünüz. En Büyük İçerikli Boyama, İlk Giriş Gecikmesi, Kümülatif Düzen Kayması, İlk İçerikli Boyama, Sonraki Boyamayla Etkileşim ve İlk Bayta Kalan Süre için metrikleri içerir.

Daha önce öğrendiğiniz gibi, oluşturmayı engelleyen CSS, FCP puanına yakından bağlıdır. Hem mobil hem de masaüstü değerlendirme sonuçlarınızın 1,8 saniye veya daha kısa olduğundan emin olun.

Düşük bir puan alırsanız, web sitenizde hantal, optimize edilmemiş CSS dosyalarınız olabilir. Bunun doğru olup olmadığını doğrulamak için aşağı kaydırarak Fırsatlar 'a gidin. Bu bölüm, web sitenizin yükleme süresini iyileştirmek için özel öneriler sunar.

Burada, işlemeyi engelleyen kaynakları ortadan kaldırmanızı söyleyen bir uyarı görebilirsiniz. Bu mesaj bir JavaScript dosyasına atıfta bulunabilse de, kritik CSS oluşturmanız gerektiğinin sinyalini de verebilir.

WordPress'te kritik CSS nasıl oluşturulur?

Artık WordPress kritik CSS'si ve bunun neden önemli olduğu hakkında daha fazla şey anladığınıza göre, onu oluşturma zamanı! Beceri seviyeniz ne olursa olsun, yeni başlayanlar için uygun öğreticimizi izleyerek WordPress'te CSS dağıtımını nasıl optimize edeceğinizi kolayca öğrenebilirsiniz.

Yöntem 1: Bir eklenti ile kritik CSS oluşturun

Kendiniz oluşturabilseniz de, CSS dağıtımını bir WordPress eklentisiyle optimize etmek genellikle daha kolaydır. Doğru araç, daha az önemli CSS'yi otomatik olarak erteleyebilir. Ayrıca, herhangi bir kodu manuel olarak düzenlemek zorunda kalmayacaksınız.

Jetpack Boost, sitenizin yükleme performansını hızla artırabilir. Basit bir kurulum sürecinden sonra, kritik CSS oluşturmak, gerekli olmayan JavaScript'i ertelemek ve daha fazlasını yapmak için bu eklentiyi kullanabilirsiniz.

Jetpack Boost'u kullanmaya başlamak için WordPress'e yükleyin ve etkinleştirin. Ardından, web sitenizin mevcut performansına göre bir puan alacaksınız.

Ücretsiz eklentiyle, CSS yüklemesini optimize etme seçeneğini göreceksiniz. Alternatif olarak, kritik CSS'yi otomatik olarak oluşturmak için ücretli bir aboneliğe yükseltebilirsiniz. Bu, her değişiklik yaptığınızda CSS'yi yeniden oluşturmak zorunda kalmamanıza yardımcı olacaktır.

Kritik CSS'yi etkinleştirmek için sol taraftaki anahtarı kullanmanız yeterlidir. Benzer şekilde, gerekli olmayan JavaScript'i erteleyebilir ve resimler için geç yüklemeyi açabilirsiniz. Bu ayarlar bir araya geldiğinde, sayfa yükleme süresini önemli ölçüde azaltabilir ve ziyaretçilerin içeriğinizi daha erken görmesini sağlayabilir.

Yöntem 2: Kritik CSS'yi manuel olarak oluşturun

Bir eklenti kullanmak istemiyorsanız, kritik CSS'yi manuel olarak da oluşturabilirsiniz. Bu yöntemin sitenizin kodunu düzenlemeyi içerdiğini unutmamak önemlidir, bu nedenle yeni başlayanlar için daha karmaşık bir süreç olabilir.

1. Adım: Web sitenizi yedekleyin

Başlamak için, WordPress sitenizin bir yedeğini oluşturmak isteyeceksiniz. Site dosyalarınızda bir hata yaparsanız, kaydedilen bu sürüme kolayca geri dönebilirsiniz. Bu şekilde, hiçbir önemli veriyi kaybetmezsiniz.

Yedeklemelerinizi kolayca yönetmeniz gerekiyorsa, Jetpack VaultPress Yedekleme eklentisini kurabilirsiniz. Bu araç, yedekleri site dışında depolar ve siteniz tamamen kapalı olsa bile tek tıklamayla geri yükleme sağlar.

Nasıl başlayacağınız aşağıda açıklanmıştır:

WordPress kontrol panelinizde Eklentiler → Yeni ekle seçeneğine gidin. “Jetpack VaultPress Yedekleme”yi arayın ve Şimdi kur → Etkinleştir seçeneğine tıklayın.

Ardından, eklentiyi kurmanıza izin verecek yeni bir pencere göreceksiniz. Jetpack'i Kur'a tıklayın.

Ardından, sitenizi WordPress.com hesabınıza bağlayın. Sitenize geri yönlendirildiğinizde, Jetpack VaultPress Yedekleme planları için birkaç seçeneği görüntülemek üzere Şimdi yükselt'e tıklayın.

En azından Yedekleme planına ihtiyacınız olacak, ancak Güvenlik ve Eksiksiz sitenizi korumak, büyütmek ve hızlandırmak için ek araçlar sağlar.

İlk yedeklemeniz otomatik olarak başlayacak ve ilerlemesini WordPress kontrol panelinizde Jetpack → Yedekleme seçeneğine giderek kontrol edebilirsiniz.

Sonraki birkaç adımda herhangi bir hata olursa, bu sayfaya geri dönün ve Bu noktaya geri yükle'ye basın . Bu, sitenizi eski sürüme döndürecek ve meydana gelen hataları ortadan kaldıracaktır.

2. Adım: Kritik bir CSS oluşturucu kullanın

Web sitenizin yedeklendiğini öğrendikten sonra, kritik CSS'nizi oluşturmaya başlayabilirsiniz. Bunu yapmanın en kolay yollarından biri, kritik bir CSS oluşturucu kullanmaktır. Bu araç, kritik CSS'nizi otomatik olarak üreterek manuel olarak kod oluşturmanıza gerek kalmaz.

Önce CoreWebVitals Critical CSS Oluşturucu'yu açın. Optimize etmek istediğiniz web sitenizin veya belirli bir sayfanın URL'sini girin. Ardından, Kritik CSS oluştur'a basın .

Yükleme bittiğinde, metin kutusunda oluşturulan CSS kodunu göreceksiniz. Bu kodu kopyalayın.

Bu kodu kaydettikten sonra, web sitenizde satır içi yapabilirsiniz!

3. Adım: Satır içi kritik CSS

Birisi web sitenizi ziyaret ettiğinde, tarayıcıları sitenizin dosyalarını sunucudan alır. Ayrıştırma işlemi sırasında gerekli içerik için önce <head> bölümünü kontrol edecektir. Ardından, <body> içeriğini oluşturmaya devam edecektir.

Kritik CSS'ye öncelik vermek için onu dosyalarınızın <head> bölümüne yerleştirin. Buna satır içi denir. CSS'yi satır içi yaptığınızda, tarayıcı sayfanın geri kalanını oluşturmadan önce bu stil sayfasının alınmasını ister.

Esasen, satır içi CSS, kodu kullanılması gereken yere yerleştirir. Böylece bir ziyaretçinin tarayıcısı, hedef içeriği görüntülemeden önce işlemeyi engelleyen dosyaları ayrıştırmak zorunda kalmaz.

Oluşturulan kritik CSS'yi kopyaladıktan sonra, onu dosyalarınıza satır içi olarak yerleştirebilirsiniz. FTP aracılığıyla public_html klasörünüze gidin. Ardından, wp-content → temalar → aktif temanıza gidin ve header.php dosyasını açın.

Bu başlık dosyasında <title> etiketini bulun. Altına, <style> etiketlerini kullanarak kritik CSS'yi ekleyin. Son olarak, Dosyayı Güncelle'yi seçin.

Sık sorulan sorular (SSS)

Şimdiye kadar, kritik CSS'yi ve nasıl oluşturulacağını tartıştık. Web sitenizde satır içi CSS ile ilgili hala sorularınız varsa, bunları burada yanıtlayacağız!

Kritik CSS oluşturmak sitenizin görünümünü bozabilir mi?

Yanlış yapılırsa, kritik CSS oluşturmak sitenizin görünümünü ve düzenini olumsuz etkileyebilir. Neyse ki, WordPress sitenizin kaydedilmiş bir yedeğini geri yükleyerek herhangi bir değişikliği geri alabilirsiniz. Jetpack VaultPress Backup'ı kullanarak, bir etkinlik günlüğünü görüntüleyebilir ve sitenizin eski sürümlerini tek tıklamayla geri yükleyebilirsiniz.

Ayrıca, kritik CSS'yi gerektiğinde açıp kapatmak için Jetpack Boost gibi bir eklenti kullanabilirsiniz. Bu basit ayarlar, WordPress en iyi uygulamalarına göre oluşturulmuştur, bu nedenle sitenizi ön uçta etkileme olasılığı daha düşüktür.

CSS kodumu optimize etmek için başka ne yapabilirim?

Sitenizdeki CSS'yi daha da optimize etmek istiyorsanız, onu küçültmeyi düşünün. CSS dosya boyutlarını küçültmek için CSS küçültme sırasında gereksiz kodu kaldıracaksınız.

CSS kodunuz, okumayı kolaylaştırmak için muhtemelen boşluklara ve satır sonlarına sahiptir. Bir tarayıcı bu ekstra öğeler olmadan kodu işleyebileceğinden, bunları silebilirsiniz. Bu, dosyaları çalıştırmak için gereken kaynakları ve zamanı azaltır.

Ayrıca kullanılmayan CSS'yi tamamen kaldırabilirsiniz. Dosyalarınızı yalnızca gerekli koda indirgeyerek, web siteniz daha hızlı yüklenmeye başlayacaktır.

Sayfa hızımı artırmak için başka ne yapabilirim?

Sitenizi hızlandırmanın en iyi yollarından biri Önemli Web Verilerinizi iyileştirmektir. PageSpeed ​​Insights gibi bir araç kullanarak, işlemeyi engelleyen kaynaklar gibi optimize edilmemiş öğeleri belirleyebilirsiniz.

Tarayıcılar sitenizin kodunu yukarıdan aşağıya yüklediğinden, yükleme işlemi JavaScript tarafından kolayca kesilebilir. JavaScript ayrıştırmasını erteleyerek, ziyaretçilerin içeriğinizi görmeden önce komut dosyalarının yüklenmesini beklemeleri gerekmez.

Ek olarak, resimler için geç yükleme yapmayı düşünün. Jetpack Boost'taki bu ayarla, ekranın alt kısmındaki resimler ziyaretçiler sayfayı aşağı kaydırana kadar yüklenmez. Bu, web sitenizin her resmi aynı anda yüklemesini engelleyerek oluşturma sürecini geciktirebilir.

Son olarak, bir İçerik Dağıtım Ağı (CDN) web sitenizi önemli ölçüde hızlandırabilir. Bir CDN, tek bir sunucuya güvenmek yerine dünya çapında bir veri merkezleri sistemi kullanır. Jetpack'in CDN'si gibi bir seçenek, görüntüler ve statik dosyalar için içerik dağıtımını iyileştirebilir.

WordPress'te CSS dağıtımını optimize edin

Web sitenizin içerik dağıtımını iyileştirmeye çalışıyorsanız, oluşturmayı engelleyen kaynakları ortadan kaldırmanız önemlidir. Optimize edilmemiş CSS, işleme sürecini geciktirebileceğinden, kritik CSS oluşturmaya değer. Bunu yapmak yükleme süresini doğrudan iyileştirmeyecek olsa da, ziyaretçilerin ekranın üst kısmındaki içeriği çok daha hızlı görmelerini sağlayacaktır.

İncelemek için, WordPress'te kritik CSS'nin nasıl oluşturulacağı aşağıda açıklanmıştır:

1. Jetpack Boost gibi bir eklenti ile kritik CSS oluşturun.
2. Bir Kritik CSS Oluşturucu kullanın.

Jetpack Boost ile herhangi bir kodu düzenlemeden CSS'yi optimize edebilirsiniz. Eklentiyi indirip etkinleştirdikten sonra, tek bir tıklamayla kritik CSS oluşturabileceksiniz!