Minify JavaScript ve CSS Çözümü

Minification yani küçültme, genellikle web sitenizi hızlandırmak için önerilen basit bir kavramdır (Google Pagespeed aracında da karşılaşılan bir uyarı olarak karşımıza çıkar) Ancak gerçek şu ki, pek çok site sahibi, Javascript ve CSS dosyalarını küçültmeye çalıştıklarında büyük bir hüsrana uğrar.

Peki neden?

Çünkü minifikasyon genellikle çok fazla tecrübe gerektirir. Mevcut birçok çözüm olsa da, kullandığınız tema ve eklentilere bağlı olarak siteden siteye değişiklik gösterecektir.Wordpress, Joomla, Drupal gibi hazır CMS’ler, özel CMS’lere göre çok daha kısıtlı düzenleme imkanı sunabiliyor.

Minifikasyon (Küçültme) Nedir?

Web siteleri birçok farklı dosyadan oluşur. Site hızınızı Google PageSpeed Insights ile test ederseniz HTML, CSS ve JavaScript dosyalarınızı küçültme önerisini alabilirsiniz.

Peki nedir bu küçültme önerisi?

Minification işte burada devreye girer. Minification, temel olarak kodun yürütülmesi için gerekli olmayan gereksiz karakterlerin kaldırılması anlamına gelen bir programlama terimidir. Küçültme, dosyalarınızın genel boyutunu küçültmek için kodu analiz edip yeniden yazarak çalışır. Böylece sitenizin toplam boyutunu azaltır ve kullanıcıların tarayıcısında daha hızlı yükleme sağlar.

Örneğin, bir stil sayfasında bulabileceğiniz bazı CSS’ler aşağıdaki gibidir:

a:link {

  color: gray;

}

a:visited {

  color: green;

}

a:hover {

  color: rebeccapurple;

}

a:active {

  color: teal;

}

Yukarıdaki CSS örneğinin küçültülmüş versiyonu ise aşağıdaki şekildedir:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

Kodun ne kadar sıkıştırılmış olduğunu görüyor musunuz? Boşluklar silindiğinde dosya boyutundan da oldukça kazanmış oluyorsunuz.

Minification, bir yanıt gönderilmeden önce bir web sunucusunda gerçekleştirilir. Küçültme işleminden sonra, web sunucusu orijinal dosyaların yerine daha küçültülmüş ve çok daha hızlı dosyaları kullanır. Bu da işlevsellikten ödün vermeden daha düşük bant genişliği sağlar.

Yoast’ın yaptığı açıklamaya göre, dosyaları küçültmek, bazı durumlarda dosya boyutunun %30-40’ına, hatta %50’sine kadar tasarruf sağlayabilir.

CSS ve JavaScript Dosyalarınızı Neden Küçültmelisiniz?

Hızlı bir web sitesine sahip olmak yalnızca Google’ı mutlu etmekle kalmaz, web sitenizin aramalarda daha üst sıralarda yer almasına yardımcı olur ve aynı zamanda site ziyaretçileriniz için daha iyi bir kullanıcı deneyimi sağlar.

Unutmayın, insanların %40’ı ana sayfanızın yüklenmesi için 3 saniye bile beklemez ve Google, sitelerin en fazla 2-3 saniye içinde yüklenmesini önerir.

Küçültmenin birçok faydası vardır:

• Daha küçük dosyalar, sitenizin toplam indirme boyutunun küçüldüğü anlamına gelir.
• Site ziyaretçileri sayfalarınıza daha hızlı yükleyip erişebilir.
• Site ziyaretçileri, daha büyük dosyaları indirmek zorunda kalmadan aynı kullanıcı deneyimine sahip olur.
• Ağ üzerinden daha az veri iletildiği için site sahipleri daha düşük bant genişliği maliyetleri elde eder.

CSS ve JavaScript Dosyalarınızı Nasıl Küçültebilirsiniz?

Sitenizin dosyalarını küçültmeden önce yedekleme yapmanızda fayda var. Hatta olayı bir adım daha ileri götürerek bir deneme sitesinde dosyalarınızı küçültebilirsiniz. Böylece canlı sitenizde değişiklik yapmadan önce her şeyin çalışır durumda olduğundan emin olursunuz.

Sonuçları karşılaştırabilmeniz ve küçültmenin herhangi bir etki yaratıp yaratmadığını görebilmek için, dosyalarınızı küçültmeden önce ve sonra sayfa hızınızı karşılaştırmanız da önemlidir.

GTmetrix, Google PageSpeed Insights ve açık kaynaklı bir performans test aracı olan YSlow’u kullanarak sayfa hızı performansınızı analiz edebilirsiniz. 

Şimdi gelelim küçültme işlemini nasıl yapacağınıza…

1. Dosyaları Manuel Olarak Küçültme

Dosyaları manuel olarak küçültmek, önemli miktarda zaman ve çaba gerektirir. 

Peki dosyalardan tek tek boşlukları, satırları ve gereksiz kodları kaldırmak için zamanınız var mı? 

Muhtemelen yoktur.

Zamanın dışında, bu küçültme işlemi insan hatası için de daha fazla alan sağlar. Bu yüzden dosyaları küçültmek için bu yöntem tavsiye edilmez.

Neyse ki, sitenizden kod kopyalayıp yapıştırmanıza olanak tanıyan birçok ücretsiz çevrimiçi küçültme aracı vardır.

• CSS Minifier

CSS Minifier, CSS küçültmek için ücretsiz çevrimiçi bir araçtır. Kodu kopyalayıp “Input CSS” metin alanına yapıştırdığınızda, araç, CSS’yi küçültür. Küçültülmüş çıktıyı dosya olarak indirmek için seçenekler vardır. Geliştiriciler için bu araç ayrıca bir API sağlar.

• JSCompress

JSCompress, JS dosyalarınızı orijinal boyutlarının %80’ine kadar sıkıştırmanıza ve küçültmenize olanak tanıyan çevrimiçi bir JavaScript sıkıştırıcıdır. Kullanmak için kodunuzu kopyalayıp yapıştırın veya birden fazla dosyayı yükleyip birleştirin. Ardından “Compress JavaScript – JavaScript’i Sıkıştır”a tıklayın. 

2. Eklentilerle Dosyaları Küçültme

Manuel adımlar gerçekleştirmenize gerek kalmadan dosyalarınızı küçültebilen hem ücretsiz hem de premium bazı harika eklentiler mevcuttur.

• Merge + Minify + Refresh — WordPress Plugins

Bu eklenti, kodunuzu küçültmekten fazlasını yapar. CSS ve JavaScript dosyalarınızı birleştirir ve ardından Minify (CSS için) ve Google Closure (JavaScript için) kullanarak oluşturulan dosyaları küçültür. Minification, site hızınızı etkilememesi için WP-Cron üzerinden gerçekleştirilir.

CSS veya JS dosyalarınızın içeriği değiştiğinde, bunlar yeniden işlenir, böylece önbelleğinizi boşaltmanıza gerek kalmaz. 

• JCH Optimize

JCH Optimize, ücretsiz bir eklenti için oldukça iyi özelliklere sahiptir: CSS ve JavaScript‘i birleştirir ve küçültür, HTML’yi küçültür, dosyaları birleştirmek için GZip sıkıştırması ve arka plan görüntüleri için hareketli grafik oluşturma sağlar.

• CSS Minify

CSS Minify ile CSS’nizi küçültmek için sadece kurulum ve etkinleştirme yapmanız yeterlidir.

Ayarlar > CSS Minify’a giderek tek bir seçeneği etkinleştirin: CSS kodunu optimize edin ve küçültün.

• Fast Velocity Minify

20.000’den fazla etkin yükleme ve beş yıldızlı derecelendirme ile Fast Velocity Minify, dosyaları küçültmek için mevcut en popüler seçeneklerden biridir. Kullanmak için sadece kurum ve etkinleştirme yapmanız yeterlidir. 

Ayarlar > Fast Velocity Minify’a gidin. Burada, geliştiriciler için gelişmiş JavaScript ve CSS hariç tutma, CDN seçenekleri ve sunucu bilgileri de dahil olmak üzere eklentiyi yapılandırmak için bir dizi seçenek bulacaksınız. Varsayılan ayarlar çoğu site için gayet iyi çalışır.

Eklenti, ön uçta gerçek zamanlı olarak ve yalnızca önbelleğe alınmamış ilk istek sırasında küçültmeyi gerçekleştirir. İlk istek işlendikten sonra, aynı CSS ve JavaScript kümesini gerektiren diğer sayfalara aynı statik önbellek dosyası sunulur.

3. WordPress Önbelleğe Alma Eklentilerinin Bir Özelliği Olarak Küçültme

Küçültme, genellikle önbelleğe alma eklentilerinde bulacağınız standart bir özelliktir. 

• WP Rocket
• W3 Total Cache
• WP Super Cache
• WP Fastest Cache

Umarız yukarıda sunduğumuz çözümler küçültme işlemini nasıl yapacağınız konusunda sizi aydınlatmıştır ve web sitenize nasıl uygulayabileceğinizi anlayabilmişsinizdir.

Eğer daha önce bu işlemi yaptıysanız, web sitenizi daha hızlı hale getirmek için başka hangi yöntemleri kullandınız? Aşağıdaki yorumlar bölümünde bize yazın, içeriğimizi geliştirmek için deneyimlerinizi ve önerilerinizi paylaşmayı unutmayın.