WordPress sitenizin görünümünü ve verdiği hissi özelleştirmenin birçok farklı yolu vardır. WordPress temanızla birlikte gelen özelleştirme seçeneklerini kullanmanın yanı sıra, bazen sitenizin görsel görünümünü tamamen tercihlerinize göre ayarlayabilmek için bazı özel CSS’ler eklemek isteyebilirsiniz. Bu özel CSS oldukça yararlı olsa da, CSS kodunuz düzgün bir şekilde teslim edilmezse, sitenizin genel performansına yarardan çok zarar verebilir.
Bu sefer, olası CSS yükleme sorunları nedeniyle WordPress web sitenizin yavaşlamasını önlemeye yardımcı olmak için CSS teslimatınızı nasıl optimize edeceğinizi göstermeye karar verdik. Size bunu iki farklı eklenti kullanarak nasıl yapacağınızı göstereceğiz ve ayrıca CSS dağıtımının web sitenizi yavaşlatmasının olası nedenlerinden bazılarından bahsedeceğiz.
Şunları ele alacağız:
-
WordPress CSS Teslimatı Web Sitenizin Performansını Nasıl Yavaşlatabilir?
-
Autoptimize Eklentisini Kullanarak WordPress Sitenizin CSS Teslimatını Optimize Etme
-
Hızlandırma Eklentisini Kullanarak WordPress Sitenizin CSS Teslimatını Optimize Etme
WordPress CSS Teslimatı Web Sitenizin Performansını Nasıl Yavaşlatabilir?
Bir WordPress sitesinin görsel görünümünü özelleştirme söz konusu olduğunda CSS dosyaları oldukça kullanışlı olsa da, bu dosyalar sitenin hızı ve performansı üzerinde yine de olumsuz bir etkiye sahip olabilir. Düşük hız, kötü bir kullanıcı deneyimine yol açabilir, bu da daha düşük sayfa sıralamalarına, trafiğin azalmasına ve sonuç olarak işletmenizin başarılı olma olasılığının azalmasına neden olabilir.
Şimdi CSS dosyalarının bir web sitesini yavaşlatmasının bir yolu, bir sayfa görüntülenmeden önce yüklenmeleri ve ziyaretçilerinizin boş bir sayfa görmesine neden olmalarıdır. Bu oluşumun bir başka olası nedeni, CSS dosyalarınızın gerekenden daha büyük olmasıdır, bu da doğal olarak daha uzun süre yüklenecekleri anlamına gelir.
Neyse ki, bu CSS dosyalarının sitenizi yavaşlatmasını önlemenin birkaç yolu vardır. İlk yöntem, sayfanın ilk bölümünü kullanıcılara yüklemek ve görüntülemek için yalnızca en gerekli CSS parçalarını veya sözde kritik CSS’yi kullanacak bir eklenti yüklemenizi gerektirir. CSS’nin geri kalanı, yalnızca ziyaretçileriniz sayfanızın içeriğini görüntüleyebildikten sonra yüklenecektir. Kodun kritik kısmı, ayrı bir stil sayfasına eklenmek yerine sayfanın HTML’sine satır içi eklenecektir. Bu durum kritik CSS’nin kendi başına yüklenmesine izin verecektir (önce tüm CSS dosyasını yüklemeden).
Diğer bir yol da, hayati dosyaların hemen yüklenmesini ve hayati olmayan CSS dosyalarının yalnızca sayfanız görüntülendikten sonra yüklenmesini sağlayarak “hayati” ve “hayati olmayan” CSS dosyalarını ayırmaktır; bu, sayfa yükleme hızınızı son derece artırma potansiyeline sahiptir.
İki farklı eklenti yardımıyla bu yöntemlerin her ikisini de nasıl kullanacağınızı size göstereceğiz, bu yüzden okumaya devam ettiğinizden emin olun.
Autoptimize Eklentisini Kullanarak WordPress Sitenizin CSS Teslimatını Optimize Etme
Kodlamaya aşina değilseniz, Autoptimize eklentisini kullanmanızı öneririz. Bu eklenti, CSS dosyalarınızın sunumunu anında optimize etmenize ve iyileştirmenize olanak tanır.
Şimdi eklentinin kendisinin yüklenmesi ve kullanılması ücretsiz olsa da, en uygun sonuçları elde etmek için eklentiyi birinci sınıf bir üçüncü taraf hizmetine (criticalcss adı verilir) bağlamanız gerekecek. Bu hizmet, eklentinin kritik CSS’yi otomatik olarak tanımlamasına izin verecek, fakat onu kullanmak için biraz para harcamanız gerekecek. Yine de, nihai sonuç buna değecek ve aracın kendisi çok pahalı değil – ayda yalnızca 3 ABD doları karşılığında mevcut.
Eklentiyi yükleyip etkinleştirdikten sonra, WordPress yönetici kontrol panelinizde Ayarlar >> Otomatik optimizasyon seçeneğine gidin.
Daha sonra CSS Seçenekleri bölümünü bulun (JS, CSS ve HTML sekmesinde) ve CSS Kodunu Optimize Et adlı kutuyu işaretlediğinizden emin olun.
Daha sonra, “Aggregate CSS files” seçeneğinin işaretini kaldırmalı ve bunun yerine “Render-blocking CSS’yi ortadan kaldır” seçeneğini işaretlemelisiniz.
Bunu yaptıktan sonra, sayfanın en altında bulunan “Değişiklikleri Kaydet ve Önbelleği Boşalt” düğmesine basmalısınız.
Şimdi başta da belirttiğimiz gibi, eklentinin düzgün çalışmasını istiyorsanız, Critical CSS adlı üçüncü taraf bir premium hizmete kaydolmanız gerekecek. Bu hizmet, Autoptimize eklentisine, CSS teslimatınızın optimizasyonu için en iyi parametreleri sağlayacaktır.
Kritik CSS sekmesine gitmeniz yeterlidir (eklentinizin ayarlar ekranında bulabileceksiniz). Başlamak için kayıt bağlantısına tıklayın:
Premium hizmetlerine kaydolduktan sonra Critical CSS API anahtarına erişebileceksiniz. API anahtarı bölümüne gidin ve anahtarı “API anahtarınız” alanına yapıştırın. Daha sonra Değişiklikleri Kaydet düğmesine basın.
Bu kadar. Bu durum CriticalCSS hizmetini Autoptimize eklentinize bağlayacak ve sonuç olarak CSS kod dağıtımınızı optimize ederek WordPress sitenizin daha hızlı yüklenmesini sağlayacaktır.
Hızlandırma Eklentisini Kullanarak WordPress Sitenizin CSS Teslimatını Optimize Etme
Kullanabileceğiniz başka bir seçenek de SpeedUp – Optimize CSS Teslimatı adlı eklentidir. Eklentinin kullanımı tamamen ücretsiz olsa ve düzgün çalışması için herhangi bir ek premium hizmet gerektirmese de, yine de temanızın functions.php dosyasına bir kod parçacığı eklemeniz gerekecek (elbette eklentiyi yükleyip etkinleştirdikten sonra). Başka bir deyişle, onu kullanmak için kodlamaya aşina olmanız gerekir.
Eklenti, “hayati” ve “hayati olmayan CSS dosyaları” arasında ayrım yaparak WordPress sitenizin CSS dağıtımını optimize etmeye yardımcı olur. Bu bağlamda, hayati CSS dosyaları, düzenli olarak veya sitenizin çeşitli sayfalarında kullanılan dosyalar olacaktır. Öte yandan, hayati olmayan CSS dosyaları, örneğin tek bir sayfada veya gönderide kullanılanlar gibi genellikle daha az kullanılan CSS dosyalarıdır.
Bu yüzden temel olarak eklenti, hayati olmayan CSS dosyalarını eşzamansız olarak yüklemenize izin verecektir, yani bunlar, sayfanız görüntülendikten sonra yüklenecek ve böylece WordPress CSS teslimatınızı optimize etmeye yardımcı olacaktır. Önemli CSS dosyalarına gelince, WordPress’in bunları eklentiyi yüklemeden önce veya sonra nasıl yüklediği konusunda herhangi bir değişiklik olmaksızın eşzamanlı olarak yüklenmeye devam edecekler.
Temanızın function.php dosyasına bir filtre ekleyerek senkronize olarak yüklemek istediğiniz dosyaları seçebilirsiniz.
İşte dosyanıza ekleyebileceğiniz kod parçacığına bir örnek (eklentinin sayfasında da bulunabilir):
// exclude main and child stylesheets from delivery optimization
function exclude_from_delivery_optimization($handle){
return in_array($handle, array(‘main-stylesheet’,
‘child-stylesheet’));
}
add_filter(‘speed-up-optimize-css-delivery’,
‘exclude_from_delivery_optimization’);
Bu özel kod parçacığı, ana ve alt stil sayfalarını dağıtım optimizasyonunun dışında bırakmanıza olanak tanır, fakat bunu ihtiyaçlarınıza göre değiştirmelisiniz.
Çözüm Yolu
Ve işte karşınızda – WordPress’te CSS dağıtımını başarılı bir şekilde optimize etmenin iki farklı yolu. Autoptimize eklentisi sizin açınızdan bir miktar minimum ödeme gerektirse de, yavaş CSS teslim sorununu oldukça başarılı bir şekilde ele alır, bu da ek maliyeti buna değer kılar. Ve ücretsiz yoldan gitmek istiyorsanız, SpeedUp eklentisi işinizi görecektir – ancak kullanmak için WordPress dosyalarınıza kod ekleme konusunda rahat olmanız gerektiğini unutmayın. Sizin için en uygun eklentiyi seçtiğinizden emin olun ve WordPress sitenizin kısa sürede en yüksek hızda çalışmasını sağlayın.