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

Bir süre önce, CSS ve JavaScript dosyalarını küçültmenin yükleme sürelerini önemli ölçüde azaltabileceğini keşfettik. Bunu birkaç WordPress sitesinde test ettikten sonra sonuçlara hayran kaldık. 5-6 saniyede yüklenen sayfalar aniden 2-3 saniyeye düştü.

Gerçek şu ki, yüklenme süresindeki her ekstra saniye size ziyaretçi ve potansiyel müşteriler kaybettirir. CSS ve JavaScript dosyalarınız gereksiz boşluklar, yorumlar ve biçimlendirmelerle şişmiş olduğunda, işinizi yavaşlatırlar.

Küçültme, sitenizin çalışma şeklini değiştirmeden tüm bu ekstra kodu kaldırır.

Bu nedenle, WordPress dosyalarınızı nasıl küçülteceğinizi gösteren bu kılavuzu hazırladık. Siteniz için en iyi neyin işe yaradığını seçebilmeniz için farklı yaklaşımları size adım adım anlatacağız.

Küçültme Nedir ve Ne Zaman İhtiyacınız Olur?

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

Normal CSS koduna bir örnek:

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

Kodu küçülttükten sonra şöyle 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ısına gönderilen dosyaları küçültmeniz önerilir. Bu, HTML, CSS ve JavaScript dosyalarını içerir.

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

Dosyaları küçültmenin avantajı, WordPress hızının ve performansının iyileştirilmesidir, çünkü sıkıştırılmış dosyalar daha hızlı yüklenir.

Ancak, bazı uzmanlar performans iyileştirmesinin çoğu web sitesi için çok küçük olduğuna ve uğraşmaya değmediğine inanıyor. Küçültme, çoğu WordPress sitesinde yalnızca birkaç kilobayt veriyi kaldırır. Görüntüleri web için optimize ederek sayfa yükleme süresini daha fazla azaltabilirsiniz.

Google PageSpeed Insights veya GTMetrix aracı üzerinde 100/100 puan elde etmeye çalışıyorsanız, CSS ve JavaScript'i küçültmek puanınızı önemli ölçüde iyileştirecektir.

Bunu söyledikten sonra, WordPress sitenizde CSS/JavaScript'i kolayca nasıl küçültebileceğinize bir göz atalım. Seçebileceğiniz 3 farklı seçeneği inceleyeceğiz:

Hazır mısınız? En çok önerdiğimiz yöntemle başlayalım.

Yöntem 1. WP Rocket Kullanarak WordPress'te CSS/JavaScript Küçültme

Bu yöntem daha kolaydır ve tüm kullanıcılar için önerilir. Hangi WordPress barındırmasını kullanıyor olursanız olun işe yarar.

Öncelikle, WP Rocket eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

WP Rocket, piyasadaki en iyi WordPress önbellekleme eklentisidir. WordPress'e önbellekleme eklemenizi ve web sitesi hızını ve sayfa yükleme sürelerini önemli ölçüde iyileştirmenizi sağlar.

Daha fazla ayrıntı için WordPress'te WP Rocket'i doğru şekilde yükleme ve ayarlama hakkındaki öğreticimize bakın.

Etkinleştirdikten sonra, Ayarlar » WP Rocket sayfasına gitmeniz ve 'Dosya Optimizasyonu' sekmesine geçmeniz gerekir.

Buradan, CSS dosyalarını küçült seçeneğini kontrol etmeniz gerekir.

WP Rocket daha sonra bunun sitenizde sorunlara yol açabileceğine dair bir uyarı gösterecektir. Devam edin ve 'CSS'yi Küçült' düğmesine tıklayın. Web sitenizle ilgili herhangi bir sorun yaşanması durumunda bu seçeneği istediğiniz zaman devre dışı bırakabilirsiniz.

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

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

Yine, bunun sitenizde sorunlara neden olabileceğine dair bir uyarı göreceksiniz. Devam edin ve ‘JavaScript Küçültmeyi 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. Küçültülmüş CSS ve JavaScript'in bir sonraki web sitesi ziyaretçisi için kullanılmaya başladığından emin olmak için eklenti ayarlarında önbelleğinizi temizleyebilirsiniz.

Yöntem 2. WordPress'te SiteGround Kullanarak CSS/JavaScript'i Küçültme

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

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

WordPress sitenize SiteGround Optimizer eklentisini kurup etkinleştirmeniz yeterlidir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın: WordPress eklentisi nasıl kurulur.

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 Yüze Git’ düğmesine tıklamanız gerekir.

Bir sonraki ekranda CSS ön yüzünü 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 küçültülmüş CSS ve JS dosyası sürümlerini yüklemek için web sitenizi ziyaret edebilirsiniz.

Yöntem 3. Autoptimize ile CSS/JavaScript'i Küçültme

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

Öncelikle, Autoptimize eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için Ayarlar » Autoptimize sayfasını ziyaret etmeniz gerekir.

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

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

Oradayken, ‘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 ayrıca WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi düzeltmek için de kullanılabilir.

Küçültme Hakkında Sıkça Sorulan Sorular

İşte WordPress'te dosyaları küçültme hakkında en sık sorulan sorulardan bazılarına yanıtlar. Bunlar, süreci ve siteniz için faydalarını daha iyi anlamanıza yardımcı olabilir.

1. Minifikasyon tam olarak nedir?

Küçültme, kodun nasıl çalıştığını değiştirmeden gereksiz tüm karakterleri kaldırarak web sitenizin kod dosyalarını küçülten bir işlemdir. Bu, HTML, CSS ve JavaScript dosyalarından boşlukları, yorumları ve satır sonlarını kaldırmayı içerir. Sonuçta ortaya çıkan dosyalar daha küçük ve daha kompakt olduğundan, ziyaretçinin tarayıcısının indirmesi ve işlemesi daha hızlıdır, bu da web sitenizin genel hızını artırmaya yardımcı olabilir.

2. CSS ve JavaScript dosyalarını küçültmek web sitemi bozar mı?

Modern eklentilerde yaygın olmasa da, küçültme bazen sitenizde görsel veya işlevsel sorunlara neden olabilir. Bu nedenle performans eklentileri genellikle özelliği etkinleştirmeden önce bir uyarı gösterir. Her zaman önce bir yedekleme oluşturmak ve ardından küçültmeyi açtıktan sonra gizli bir tarayıcı penceresinde web sitenizi dikkatlice test etmek iyi bir fikirdir. Herhangi bir sorun fark ederseniz, ayarı devre dışı bırakabilir veya çakışmaya neden olabilecek belirli dosyaları hariç tutmak için eklentinin özelliklerini kullanabilirsiniz.

3. Küçültme gerçekten büyük bir fark yaratır mı?

Küçültmenin etkisi sitenize bağlı olarak değişebilir. Birçok web sitesi için yalnızca birkaç kilobayt veriyi kaldırır ve resimlerinizi optimize ederek daha önemli bir hız artışı görebilirsiniz. Ancak, birincil hedefiniz Google PageSpeed Insights veya GTMetrix gibi hız test araçlarında mükemmel bir 100/100 puan elde etmekse, CSS ve JavaScript dosyalarınızı küçültmek puanınızı önemli ölçüde iyileştirecek önemli bir adımdır.

4. WordPress'te dosyaları küçültmek için bir eklentiye ihtiyacım var mı?

WordPress kullanıcılarının neredeyse tamamı için dosyaları küçültmenin en kolay ve en çok tavsiye edilen yolu, WP Rocket veya Autoptimize gibi bir önbellekleme veya performans eklentisi kullanmaktır. Bu araçlar, yalnızca birkaç tıklamayla küçültmeyi etkinleştirmenize olanak tanır. SiteGround gibi bazı barındırma sağlayıcıları da bu özelliklere sahip kendi optimizasyon eklentilerini sunar. Dosyaları manuel olarak küçültmek, yeni başlayanlar için önerilmeyen karmaşık ve riskli bir işlemdir.

Bu makalenin WordPress sitenizde CSS ve JavaScript'i küçültmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress'te Core Web Vitals'ı optimize etme rehberimize ve web sitenizi hızlandırmak için en iyi WordPress önbellekleme eklentileri hakkındaki uzman seçimimize de göz atmak isteyebilirsiniz.

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