WordPress Javascript ve Css Sıkıştırma Nasıl Yapılır? 2022

Hemen Teklif Alın

Web tasaarım, SEO, Google reklam hizmetlerimizden faydalanmak için teklif formunu doldurabilirsiniz. Size 2 saat içinde geri dönüş yapılacaktır.

WordPress Javascript ve Css Sıkıştırma Nasıl Yapılır?

WordPress sitenizdeki javascript ve Css kodlarını sıkıştırmak ve küçültmek mi istiyorsunuz?

WordPress CSS ve JavaScript dosyalarınızı küçültmek, onların daha hızlı yüklenmesini sağlayabilir ve WordPress sitenizi hızlandırabilir. Bu kılavuzda, performansı ve hızı artırmak için WordPress’te Js CSS sıkıştırma ve nasıl küçültebileceğinizi göstereceğiz.

Minifikasyon Nedir ve Ne Zaman İhtiyacınız Var?

‘Küçült’ terimi, 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.

İşte 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ılarına gönderilen dosyaların küçültülmesi önerilir. Buna HTML, CSS ve JavaScript dosyaları dahildir.

PHP dosyalarını da küçültebilirsiniz, ancak küçültmek, 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ıdır, yani ziyaretçinin web tarayıcısına herhangi bir şey gönderilmeden önce sunucularda çalışır.

Dosyaları küçültmenin avantajı, kompakt dosyaların yüklenmesi daha hızlı olduğu için geliştirilmiş WordPress hızı ve performansıdır .

Ancak bazı uzmanlar, performans iyileştirmesinin çoğu web sitesi için çok küçük olduğuna ve zahmete değmeyeceğine inanıyor. Küçültme, ç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 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üçülteceğinize bir göz atalım.

Aralarından seçim yapabileceğiniz 3 farklı seçeneği inceleyeceğiz:

  • Yöntem 1. WordPress’te CSS/JavaScript’i WP Rocket Kullanarak Küçültün (Önerilir)
  • Yöntem 2. SiteGround Kullanarak WordPress’te CSS/JavaScript’i Küçültün
  • Yöntem 3. Autoptimize kullanarak CSS/JavaScript’i küçültün

Hazır? 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 barındırma hizmetini kullandığınızdan bağımsız olarak çalışır .

Öncelikle WP Rocket eklentisini kurmanız ve etkinleştirmeniz gerekiyor . 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 önbelleğe alma eklentisidir. WordPress’e kolayca önbelleğe alma 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 kurulacağıyla ilgili eğiticimize bakın .

Aktivasyon üzerine, Ayarlar » WP Roket sayfasını ziyaret etmeniz ve ‘Dosya Optimizasyonu’ sekmesine geçmeniz gerekir .

WP Rocket'te CSS dosyalarını küçültün

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

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

CSS küçültmeyi etkinleştir

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.

WP Rocket, JavaScript dosyalarını küçültür

Yine, bunun sitenizdeki bazı şeyleri bozabileceğine dair bir uyarı göreceksiniz. Devam edin ve ‘Minify JavaScript’i Etkinleştir’ düğmesini 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şlayacak. 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 Css Sıkıştırma Yapı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 platformlarında çalışan bir performans optimizasyon eklentisidir. Sitenizin yükleme sürelerini iyileştirmek için Ultrafast PHP ile iyi çalışır .

WordPress sitenize SiteGround Optimizer eklentisini kurun ve etkinleştirin . 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.

SG Optimize Edici

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

Buradan, ‘Diğer Optimizasyonlar’ altındaki ‘Ön Uç’a Git’ düğmesine tıklamanız gerekiyor.

SiteGround ön uç optimizasyonu

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

SiteGround'da CSS'yi küçültün

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

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.

İlk olarak, Autoptimize eklentisini kurmanız 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.

JavaScript seçeneklerini otomatikleştir

Bundan sonra, CSS Seçeneklerine gitmeniz ve ‘CSS kodunu optimize et’ seçeneğinin yanındaki kutuyu işaretlemeniz gerekir.

CSS kodunu otomatikleştir

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üğmesini tıklayabilirsiniz. Eklenti, WordPress’te JavaScript ve CSS’yi engelleyen oluşturmayı düzeltmek için de kullanılabilir .

Bu makalenin, WordPress sitenizde CSS ve JavaScript’i küçültmenize yardımcı olduğunu umuyoruz. Ayrıca , WordPress’te temel web hayati değerlerini optimize etme konusundaki eğitimimizi görmek ve nihai WordPress performans kılavuzumuzu takip etmek isteyebilirsiniz .

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