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

Yavaş yüklenme süreleri ziyaretçileri hayal kırıklığına uğratır ve Google sıralamanızı olumsuz etkiler. Bir saniyelik bir gecikme bile aboneleri ve satışları kaybetmenize neden olabilir.

Minifikasyon teknik bir terim gibi görünse de, web sitesi kodunuzu daha küçük hale getirerek daha hızlı yüklenmesini sağlayan bir yöntemdir. En iyi performansı sağlamak için bu tekniği kendi web sitelerimizde kullanıyoruz.

Bu rehberde, WordPress'te CSS ve JavaScript dosyalarını nasıl kolayca küçültebileceğinizi göstereceğiz.

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ı küçültmenize gerek yok. PHP, sunucu taraflı bir programlama dilidir, yani herhangi bir şey ziyaretçinin web tarayıcısına gönderilmeden önce sunucuda çalışır, bu nedenle onu küçültmek kullanıcı yüklenme sürelerini iyileştirmez.

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ı üzerindeki puanınızı iyileştirmeye çalışıyorsanız, CSS ve JavaScript'i küçültmek önemli bir adımdır.

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:

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. Her şeyin etkili bir şekilde çalıştığından emin olmak için web sitenizi kapsamlı bir şekilde kullanı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ı Speed Optimizer eklentisini (eski adıyla SiteGround Optimizer) kullanarak küçültebilirsiniz.

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

Speed Optimizer eklentisini WordPress sitenize kurup etkinleştirmeniz yeterlidir. Daha fazla ayrıntı için, WordPress eklentisi nasıl kurulur hakkındaki adım adım kılavuzumuza bakın.

Bundan sonra, WordPress yönetici kenar çubuğundaki Speed 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.

Frontend ayarları sayfasında, 'CSS' sekmesine geçin.

Ardından, 'CSS Dosyalarını Küçült' seçeneğinin yanındaki geçiş düğmesini açın.

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.

Ek Kaynaklar

Sitenizin kodunu nasıl küçülteceğinizi artık bildiğinize göre, WordPress performansınızı iyileştirmenize yardımcı olacak bazı diğer kılavuzlar şunlardır:

• WordPress Hızını ve Performansını Artırmak İçin Nihai Rehber
• WordPress'te WP Rocket'i Doğru Bir Şekilde Kurma ve Ayarlama
• WordPress için Core Web Vitals Nasıl Optimize Edilir (Nihai Rehber)
• WordPress'inizi Hızlandırın – Web İçin Optimize Edilmiş Resimleri Kaydetme
• Web Sitenizi Hızlandırmak İçin En İyi WordPress Önbellekleme Eklentileri

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.