WordPress'te CSS / JavaScript Bilgileri Nasıl Küçültülür (3 Strateji)

WordPress web sayfanızdaki belgeleri küçültmek ister misiniz?

WordPress CSS ve JavaScript bilgilerinizi küçültmek, bunların daha hızlı yüklenmesini sağlayabilir ve WordPress sitenizi hızlandırabilir.

Bu kılavuzda, performans ve hız iyileştirmeleri yapmak için WordPress'teki CSS/JavaScript dosyalarını nasıl küçülteceğinizi göstereceğiz.

Minifikasyon nedir ve ne zaman ihtiyacınız olacak?

'Minify' deyimi, internet sitenizin dosya boyutlarını küçülten bir sistemi anlatmak için kullanılır. Bunu, kaynak kodundaki boşluklardan, satırlardan ve istenmeyen insanlardan kurtularak yapar.

İşte standart CSS kodunun bir örneği:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Kodu küçülttükten sonra şöyle görünecektir:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

Genellikle, yalnızca kullanıcının tarayıcılarına gönderilen belgelerin küçültülmesi önerilir. Bu, HTML, CSS ve JavaScript dosyalarını içerir.

PHP belgelerini de küçültebilirsiniz, ancak küçültmek müşterileriniz için sayfa yükleme hızını artırmaz. PHP sunucu taraflı bir programlama dili olduğundan, bu, ziyaretçinin internet tarayıcısına bir şey gönderilmeden önce sunucularda çalıştığı anlamına gelir.

Veri dosyalarını küçültme kazancı, kompakt bilgilerin yüklenmesinin daha hızlı olduğu düşünüldüğünde, WordPress hızını ve genel performansını artırır.

Bununla birlikte, bazı gurular, çoğu web sitesi için işlevsellik gelişiminin oldukça az olduğunu ve bu zorluğa değmediğini düşünüyor. Küçültme, çoğu WordPress web sitesinde yalnızca birkaç kilobayt veriden kurtulur. Görüntüleri dünya çapında web için optimize ederek çok daha fazla site yükleme süresini en aza indirebilirsiniz.

Google Pagespeed veya GTMetrix yazılımında 100/100 derece elde etmeye çalışıyorsanız, CSS ve JavaScript'i küçültmek puanınızı önemli ölçüde artıracaktır.

Bundan bahsederken, WordPress web sayfanızda CSS/JavaScript'i zahmetsizce nasıl küçülteceğinize bir göz atalım.

Aralarından seçim yapabileceğiniz 3 farklı seçeneği aşacağız:

Her şey hazır mı? En iyi önerilen sürecimizle başlayalım.

İşlem 1. WP Rocket Kullanarak WordPress'te CSS/JavaScript'i Küçültün

Bu teknik daha kolaydır ve tüm tüketiciler için önerilmektedir. Hangi WordPress barındırma hizmetini kullandığınızdan bağımsız olarak çalışır.

İlk olarak, WP Rocket eklentisini kurmanız ve etkinleştirmeniz gerekir. Ek ayrıntılar için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

WP Rocket, piyasadaki en iyi WordPress önbelleğe alma eklentisidir. WordPress'e önbelleğe almayı çok kolay bir şekilde eklemenize ve web sitesi hızını ve web sitesi yükleme anlarını önemli ölçüde artırmanıza izin verir.

Çok daha fazla bilgi için, WordPress'te WP Rocket'in nasıl kurulacağı ve kurulacağı ile ilgili eğiticimize bakın.

Aktivasyon üzerine, Ayarlar » WP Roket web sayfasına göz atmak ve 'Dosya Optimizasyonu' sekmesine geçmek istiyorsunuz.

Buradan, Minify CSS belgeleri çözümüne bakmanız gerekecek.

WP Rocket size bunun web sitenizdeki noktaları bölebileceğine dair bir uyarı gösterecektir. Devam edin ve 'Minify CSS'yi Etkinleştir' düğmesini tıklayın. İnternet sitenizde herhangi bir soruna neden oluyorsa bu seçimi sürekli olarak devre dışı bırakabilirsiniz.

Daha sonra, aşağıdaki JavaScript Belgeleri bölümüne kaydırmanız gerekir.

Tam burada, 'JavaScript dosyalarını küçült' seçeneğinin yanındaki kutuyu test etmeniz yeterlidir.

Yine, bunun web sitenizdeki bazı şeyleri kırabileceğine dair bir uyarı göreceksiniz. Devam edin ve 'Minify JavaScript'i Etkinleştir' düğmesini tıklayın.

Bundan hemen sonra, konfigürasyonlarınızı korumak için Ayarları koru düğmesine tıklamayı asla ihmal etmeyin.

WP Rocket şimdi CSS ve JavaScript bilgilerinizi küçültmeye başlayacak. Gelecekteki web sayfası ziyaretçisi için küçültülmüş CSS ve JavaScript'i kullanmaya başladığından emin olmak için eklenti ayarlarında önbelleğinizi temizleyebilirsiniz.

Teknik 2. SiteGround Kullanan WordPress'te CSS/JavaScript'i Küçültün

SiteGround'u WordPress web barındırma hizmeti sağlayıcınız olarak kullanıyorsanız, SiteGround Optimizer ile çalışan CSS dosyalarını küçültebilirsiniz.

SiteGround Optimizer, sahip sistemlerinde performans gösteren genel bir performans optimizasyon eklentisidir. Sitenizin yükleme sürelerini güçlendirmek için Ultrafast PHP ile iyi performans gösterir.

WordPress internet sitenizde SiteGround Optimizer eklentisini kurmanız ve etkinleştirmeniz yeterlidir. Ek ayrıntılar için, bir WordPress eklentisinin nasıl yerleştirileceğine ilişkin adım adım kılavuzumuza bakın.

Bundan sonra, WordPress yönetici kenar çubuğunuzdaki SG Optimizer menüsüne tıklamanız gerekir.

Bu sizi sadece SG Optimizer ayarlarına götürecektir.

Bu makalede, 'Diğer Optimizasyonlar'dan daha az 'Ön Uç'a Git' düğmesine tıklamanız gerekiyor.

Bir sonraki monitörde, 'CSS dosyalarını küçült' çözümüne yaklaşan geçişi değiştirmeniz gerekir.

Yakında, JavaScript sekmesine geçmeniz ve 'JavaScript Dosyalarını Küçült' seçimine yaklaşan geçişi çevirmeniz gerekiyor.

Hepsi bu! Artık WordPress önbelleğinizi boşaltabilir ve CSS ve JS belgelerinin küçültülmüş sürümlerini yüklemek için sitenize göz atabilirsiniz.

Yaklaşım 3. Autoptimize kullanarak CSS/JavaScript'i küçültün

Bu yöntem, SiteGround'da olmayan ve WP Rocket ile çalışmayan tüketiciler için önerilmektedir.

Başlangıçta, Autoptimize eklentisini kurmanız ve etkinleştirmeniz gerekir. Ek ayrıntılar için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım yönergemize bakın.

Aktivasyon sırasında, eklenti seçeneklerini yapılandırmak için Seçenekler » Otomatik Optimize Et web sayfasına bir göz atmanız gerekir.

Bu makaleden, ilk olarak JavaScript Seçenekleri altındaki 'JavaScript Kodunu Optimize Et' seçeneğini doğrulamanız gerekiyor.

Bundan sonra, CSS Seçeneklerine kaydırmanız ve 'CSS kodunu optimize et' seçeneğinin yanındaki kutuyu incelemeniz gerekir.

Konfigürasyonlarınızı saklamak için Ayarlamaları Koru düğmesine tıklamayı asla ihmal etmeyin.

Ardından, küçültülmüş veri dosyalarınızla çalışmaya başlamak için Boş Önbellek düğmesini tıklamanız yeterlidir. Eklenti, WordPress'te JavaScript ve CSS'yi engelleme ile başa çıkmak için de kullanılabilir.

Bu gönderinin WordPress web sayfanızda CSS ve JavaScript'i küçültmenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress'te temel net hayati değerleri optimize etme konusundaki eğitimimizi görmek ve en iyi WordPress genel performans eğitimimize uymak isteyebilirsiniz.

Bu gönderiyi beğendiyseniz, WordPress film eğitimleri için YouTube Kanalımıza abone olmayı unutmayın. Twitter ve Facebook'ta da bize rastlayabilirsiniz.