WordPress’te CSS / JavaScript Dosyaları Nasıl Küçültülür (3 Yol)

WordPress sitenizdeki dosyaları küçültmek mi istiyorsunuz?

WordPress CSS ve JavaScript dosyalarınızı küçültmek daha hızlı yüklenmelerini sağlayabilir ve WordPress sitenizi hızlandırabilir.

Bu kılavuzda, performansı ve hızı artırmak için WordPress’teki CSS/JavaScript dosyalarını nasıl kolayca küçültebileceğinizi göstereceğiz.

Minifikasyon Nedir ve Ne Zaman İhtiyaç Duyarsınız?

‘Minify’ terimi, WordPress web sitenizin dosya boyutlarını küçülten bir yöntemi tanımlamak için kullanılır. Bunu, kaynak koddaki beyaz boşlukları, satırları ve gereksiz karakterleri kaldırarak yapar.

İşte normal CSS koduna bir örnek:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Kod küçültüldükten sonra şu şekilde görünecektir:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

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

PHP dosyalarını da küçültebilirsiniz, ancak bu kullanıcılarınız için sayfa yükleme hızını artırmayacaktır. Bunun nedeni PHP ‘nin sunucu taraflı bir programlama dili olması, yani ziyaretçinin web tarayıcısına herhangi bir şey gönderilmeden önce sunucularda çalışmasıdır.

Dosyaları küçültmenin avantajı, kompakt dosyaların daha hızlı yüklenmesi nedeniyle WordPress hızının ve performansının iyileştirilmesidir.

Ancak bazı uzmanlar performans artışının çoğu web sitesi için çok küçük olduğuna ve zahmete değmeyeceğine inanmaktadır. Minifikasyon çoğu WordPress sitesinde yalnızca birkaç kilobaytlık veriyi kaldırır. Web için görüntüleri optimize ederek sayfa yükleme süresini daha fazla azaltabilirsiniz.

Google PageSpeed Insights veya GTMetrix aracında 100/100 puan elde etmeye çalışıyorsanız, CSS ve JavaScript’i küçültmek puanınızı önemli ölçüde artıracaktır.

Bunu söyledikten sonra, WordPress sitenizde CSS/JavaScript’i nasıl kolayca küçültebileceğinize bir göz atalım. Aralarından seçim yapabileceğiniz 3 farklı seçeneğin üzerinden geçeceğiz:

Hazır mısınız? En çok önerilen yöntemimizle başlayalım.

Yöntem 1. WP Rocket Kullanarak WordPress’te CSS/JavaScript’i Küçültün

Bu yöntem daha kolaydır ve tüm kullanıcılar için önerilir. Hangi WordPress hosting ‘i kullandığınızdan bağımsız olarak çalışır.

Öncelikle WP Rocket eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı 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 önbellekleme eklentisidir. WordPress’e kolayca önbellekleme eklemenize ve web sitesi hızını ve sayfa yükleme sürelerini önemli ölçüde iyileştirmenize olanak tanır.

Daha fazla ayrıntı için WordPress’te WP Rocket ‘in nasıl kurulacağı ve ayarlanacağı hakkındaki eğitimimize bakın.

Etkinleştirmenin ardından, Ayarlar ” WP Rocket sayfasını ziyaret etmeniz ve ‘Dosya Optimizasyonu’ sekmesine geçmeniz gerekir.

Buradan, CSS dosyalarını küçült seçeneğini işaretlemeniz gerekir.

WP Rocket daha sonra size bunun sitenizdeki bazı şeyleri bozabileceğine dair bir uyarı gösterecektir. Devam edin ve ‘CSS Minify’ı Etkinleştir’ düğmesine tıklayın. Web sitenizde herhangi bir soruna neden olursa bu seçeneği her zaman devre dışı bırakabilirsiniz.

Ardından, aşağıdaki JavaScript Dosyaları bölümüne ilerlemeniz gerekir.

Burada, ‘JavaScript dosyalarını küçült’ seçeneğinin yanındaki kutuyu işaretlemeniz yeterlidir.

Yine, bunun sitenizdeki bazı şeyleri bozabileceğine dair bir uyarı göreceksiniz. Devam edin ve ‘JavaScript’i Küçült’ü Etkinleştir’ düğmesine tıklayın.

Bundan sonra, ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

WP Rocket şimdi CSS ve JavaScript dosyalarınızı küçültmeye başlayacaktır. Bir sonraki web sitesi ziyaretçisi için küçültülmüş CSS ve JavaScript’i kullanmaya başladığından emin olmak için eklenti ayarlarından önbelleğinizi temizleyebilirsiniz.

Yöntem 2. SiteGround Kullanarak WordPress’te CSS/JavaScript’i Küçültün

WordPress barındırma sağlayıcınız olarak SiteGround kullanıyorsanız, SiteGround Optimizer’ı kullanarak CSS dosyalarını küçültebilirsiniz.

SiteGround Optimizer, kendi platformunda çalışan bir performans optimizasyon eklentisidir. Sitenizin yükleme sürelerini iyileştirmek için Ultrafast PHP ile iyi çalışır.

SiteGround Optimizer eklentisini WordPress sitenize yüklemeniz ve etkinleştirmeniz yeterlidir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına 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 SG Optimizer ayarlarına götürecektir.

Buradan ‘Diğer Optimizasyonlar’ altındaki ‘Ön Uca Git’ düğmesine tıklamanız gerekir.

Bir sonraki ekranda, CSS ön ucunu yönetebileceksiniz.

‘CSS dosyalarını küçült’ seçeneğinin yanındaki geçişi açmanız gerekir.

Ardından, JavaScript sekmesine geçmeniz ve ‘JavaScript Dosyalarını Küçült’ seçeneğinin yanındaki geçişi açmanız gerekir.

Hepsi bu kadar! Artık WordPress önbelleğinizi boşaltabilir ve CSS ve JS dosyalarının küçültülmüş sürümlerini yüklemek için web sitenizi ziyaret edebilirsiniz.

Yöntem 3. Autoptimize kullanarak CSS/JavaScript’i küçültün

Bu yöntem SiteGround’da olmayan ve WP Rocket kullanmayan kullanıcılar için önerilir.

Öncelikle Autoptimize eklentisini yüklemeniz ve etkinleştirmeniz gerekir. 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.

Buradan, öncelikle JavaScript Seçenekleri altındaki ‘JavaScript Kodunu Optimize Et’ seçeneğini işaretlemeniz gerekir.

Bundan sonra, CSS Seçeneklerine doğru aşağı kaydırmanız gerekir.

Oraya gittiğinizde, ‘CSS kodunu optimize et’ seçeneğinin yanındaki kutuyu işaretlemelisiniz.

Ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Ardından, küçültülmüş dosyalarınızı kullanmaya başlamak için Önbelleği Boşalt düğmesine tıklayabilirsiniz. Eklenti, WordPress’te render engelleyici JavaScript ve CSS’yi düzeltmek için de kullanılabilir.

Umarız bu makale WordPress sitenizdeki CSS ve JavaScript’i küçültmenize yardımcı olmuştur. WordPress’te Core Web Vitals’ı optimize etme kılavuzumuzu ve en iyi sürükle-bırak WordPress sayfa oluşturucuları uzman seçimimizi de görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.