WordPress CSS Teslimatını Kolayca Optimize Etme (2 Yöntem)

WordPress CSS teslimatınızı optimize etmek ister misiniz?

CSS dosyaları, WordPress web sitenizin görsel biçimlendirmesini ve stilini kontrol eder. Ancak CSS kodunuz en uygun şekilde teslim edilmezse, web sitenizi yavaşlatıyor olabilir.

Bu makalede, size WordPress CSS teslimatınızı optimize etmek için iki kolay yöntem göstereceğiz.

WordPress CSS Teslimatı WordPress Performansını Nasıl Etkiler?

CSS dosyaları, WordPress sitenizin görsel görünümünü tanımlamak için kullanılır. WordPress temanız bir CSS stil sayfası dosyası içerir ve eklentilerinizden bazıları CSS stil sayfalarını da kullanabilir.

CSS, modern web siteleri için gereklidir, ancak nasıl kurulduklarına bağlı olarak CSS dosyalarının sitenizin hızını ve performansını yavaşlatması mümkündür.

Site hızındaki küçük bir gecikme bile kötü bir kullanıcı deneyimi yaratır ve arama sıralamalarınızı ve dönüşümlerinizi etkileyerek daha az trafik ve satışla sonuçlanabilir.

CSS dosyalarının web sitenizi yavaşlatmasının bir yolu, sayfanın görüntülenebilmesi için yüklenmelerinin gerekip gerekmediğidir. Bu, ziyaretçilerinizin CSS dosyası yüklenene kadar boş bir sayfa göreceği anlamına gelir. Bu, oluşturmayı engelleyen CSS olarak bilinir.

CSS dosyalarının web sitenizi yavaşlatmasının bir diğer yaygın nedeni, mevcut sayfanın görünen kısmını görüntülemek için gerekenden daha fazla kod içermeleridir. Bu ekstra kod, yüklenmelerinin daha uzun süreceği anlamına gelir.

İyi haber şu ki, CSS kodunun sunulma şeklini optimize ederek WordPress sitenizin performansını artırabilirsiniz.

Bu, geçerli web sayfasının ilk bölümünü görüntülemek için gereken minimum CSS kodunu belirleyerek yapılır. Bu kritik CSS olarak bilinir.

Bu kritik kod daha sonra ayrı stil sayfaları yerine sayfanın HTML'sine satır içi olarak eklenir, böylece kodun önce CSS dosyasını yüklemeye gerek kalmadan oluşturulabilmesi sağlanır.

Ziyaretçileriniz sayfanın içeriğini gördükten sonra CSS'nin geri kalanı yüklenebilir. Bu, 'ertelenmiş yükleme' olarak bilinir.

Bu eğitimde, size WordPress CSS dağıtımını optimize etmek için iki yöntem göstereceğiz ve sizin için en uygun olanı seçebilirsiniz.

• Yöntem 1: WP Rocket ile WordPress CSS Teslimatını Optimize Etme
• Yöntem 2: WordPress CSS Teslimatını Autoptimize ile Optimize Etme

Yöntem 1: WP Rocket ile WordPress CSS Teslimatını Optimize Etme

WP Rocket, piyasadaki en iyi WordPress önbelleğe alma eklentisidir. WordPress CSS teslimatınızı optimize etmenin en basit yolunu sunar. Aslında, bir kutuyu işaretlemek kadar kolaydır.

WP Rocket premium bir eklentidir, ancak en iyi yanı, tüm özelliklerin en düşük planlarına dahil edilmesidir.

Yapmanız gereken ilk şey, WP Rocket eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirildiğinde, Ayarlar » WP Roket sayfasına gitmeniz ve 'Dosya Optimizasyonu' sekmesine geçmeniz gerekir.

Ardından, CSS dosyaları bölümüne kaydırmanız gerekir. Oradayken, 'CSS dağıtımını optimize et' seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

Bu özellik, ziyaretçilerinizin ilk gördüğü web sayfasının bir bölümünü biçimlendirmek için gereken kritik CSS'yi akıllıca belirleyecektir. Sayfalarınız daha hızlı yüklenecek ve CSS'nin geri kalanı, ziyaretçileriniz içeriğini gördükten sonra yüklenecektir.

Şimdi tek yapmanız gereken Değişiklikleri Kaydet düğmesine tıklamak ve WP Rocket'in tüm yazılarınız ve sayfalarınız için gerekli CSS dosyasını oluşturmasını beklemek.

Ayrıca, web sitenizin önbelleğini otomatik olarak temizler, böylece ziyaretçileriniz önbellekte saklanan optimize edilmemiş sürümler yerine sitenizin yeni optimize edilmiş sürümünü görür.

WP Rocket'in web sitenizin performansını artırmanıza yardımcı olabileceği birçok başka yol vardır. Daha fazla bilgi için, WordPress'te WP Rocket'in nasıl düzgün bir şekilde kurulacağı ve kurulacağı ile ilgili kılavuzumuza bakın.

Yöntem 2: WordPress CSS Teslimatını Autoptimize ile Optimize Etme

Autoptimize, web sitenizin CSS ve JS dosyalarının dağıtımını iyileştirmek için tasarlanmış ücretsiz bir eklentidir.

Autoptimize ücretsiz bir eklenti olsa da, WP Rocket kadar çok özelliğe sahip değildir ve kurulumu daha fazla zaman alır.

Örneğin, WP Rocket can gibi kritik CSS'yi otomatik olarak tanımlayamaz. Bunun yerine, Autoptimize, ek bir maliyet olan ve yapılandırmak için fazladan zaman gerektiren birinci sınıf bir üçüncü taraf hizmetinin yardımını gerektirir.

Ancak, kısıtlı bir bütçeniz varsa ve sitenizi hızlandırmak için WP Rocket'in diğer tüm özelliklerine ihtiyacınız yoksa iyi bir seçenek olabilir.

Yapmanız gereken ilk şey, Autoptimize eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için Ayarlar » Otomatik Optimize Et sayfasını ziyaret etmeniz gerekir. Bir kez orada, CSS Seçenekleri bölümüne gitmeniz ve en üstteki CSS Kodunu Optimize Et kutusunu işaretlemeniz gerekir.

Bunu yaptıktan sonra, 'CSS dosyalarını bir araya getir' seçeneğinin işaretli olmadığından emin olmanız ve ardından 'Oluşturmayı engelleyen CSS'yi ortadan kaldır' seçeneğini işaretlemeniz gerekir.

Artık ayarlarınızı saklamak için 'Değişiklikleri Kaydet ve Önbelleği Boşalt' düğmesine tıklayabilirsiniz.

Ancak, bir Critical CSS hesabına kaydolana kadar eklenti düzgün çalışmayacaktır. Bu, WordPress CSS teslimatınızı optimize etmek için ihtiyaç duyduğu kritik CSS kodunu Otomatikleştirmeyi sağlayacak birinci sınıf bir abonelik hizmetidir.

Bunu yapmak için Autoptimize ayarlarında Critical CSS sekmesine gidin. Burada, Critical CSS'ye kaydolmak için ihtiyacınız olan bilgileri bulacaksınız. Üçüncü paragraftaki kaydolma bağlantısını tıklayarak başlayabilirsiniz.

Kritik CSS API anahtarınızı aldıktan sonra, 'API anahtarınız' metin kutusuna yapıştırabilmek için API Anahtarı bölümüne gidin. Bundan sonra, Değişiklikleri Kaydet düğmesini tıkladığınızdan emin olun.

Autoptimize artık kritik CSS satır içi eklemek ve sayfa oluşturulduktan sonra stil sayfalarını yüklemeyi ertelemek için ihtiyaç duyduğu tüm bilgilere sahip. Sonuç olarak, web siteniz daha hızlı yüklenecektir.

Bu öğreticinin, WordPress CSS dağıtımını nasıl optimize edeceğinizi öğrenmenize yardımcı olacağını umuyoruz.

Ayrıca, bir WordPress web sitesi oluşturmanın gerçekten ne kadara mal olduğu konusunda nihai kılavuzumuzu ve en iyi yönetilen WordPress barındırma şirketlerini karşılaştırmamızı görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.