Web Sitenizin CSS, HTML ve Javascript'ini Nasıl Küçültebilirsiniz?

Web sitenizin CSS, HTML ve Javascript dosyalarını küçülttüğünüzde, sitenizin sayfa yükleme hızından değerli zaman kazanabilirsiniz. Şimdi sayfa yükleme hızınızı yarıya indirmekten bahsetmiyoruz, ancak web sitenizin hızı söz konusu olduğunda, biraz yardımcı olur. Sitenizin ne kadar hızlı yüklendiği yalnızca ilk kez gelen ziyaretçiler için değil, aynı zamanda arama motoru sıralamasını taşımak için de önemlidir.

"Küçült" terimi, kaynak koddaki gereksiz karakterleri kaldırma işlemlerini tanımlayan programlama dilidir. Bu karakterler, biz insanlar için yararlı ancak makineler için gereksiz olan boşluklar, satır sonları, yorumlar ve blok sınırlayıcıları içerir. Web tarayıcınızın daha hızlı okuyabilmesi için CSS, HTML ve Javascript kodu içeren bir web sitesinin dosyalarını küçültürüz.

İşte CSS küçültmenin nasıl göründüğüne bir örnek.

Küçültmeden Önce CSS

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

Küçültmeden Sonra CSS

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

Açıkçası, bu sadece bir CSS kodu pasajı kullanan küçük bir örnek, ancak binlerce kod satırını küçültürken bunun ne kadar alan kazandıracağını hayal edebilirsiniz. Yani, bunu elle elle yapmak isterseniz, teknik olarak yapabilirsiniz. Ancak yüksek bir hata riskiyle karşı karşıya kalırsınız ve gereksiz zamanınızı veya hayatınızı gereksiz yere tıraş edersiniz!

Tavsiyeme uyun ve elinizdeki araçları kullanın.

Dosyalarınızı Manuel Olarak Küçültmeye Yönelik Çevrimiçi Araçlar

Neyse ki, site dosyalarınızı küçültmek için geliştirici olmanıza veya programlama dillerinden herhangi birini bilmenize gerek yok. Küçültme, web tasarımı dünyasında standart bir uygulama haline geldi, bu yüzden işi sizin için yapacak çok sayıda harika (ve ücretsiz) araç olduğunu öğrenmek sizi şaşırtmamalı.

İşte başlamanıza yardımcı olacak bazı yardımcı araçların bir listesi. Bunların birçoğu birden fazla kod türünü küçültebildiğinden, kod türü seçeneklerini parantez içine aldım.

• Kapanış Derleyicisi (yalnızca JS) – Kapanış Derleyicisi, Google Developers'ın bir araç paketi olan Kapatma Araçları'nın bir parçasıdır. Javascript'inizi diğer yararlı optimizasyonlarla birlikte küçültmenize olanak tanır. Js dosyası konumunun URL'sini girerek Javascript'inizi alabilir ve ardından kodun nasıl optimize edilmesini ve biçimlendirilmesini istediğinizi seçebilirsiniz. Örneğin, yalnızca isterseniz kodunuzu Beyaz Alan için optimize etmeyi seçersiniz. Derleme düğmesine bastığınızda, kodu sizin için küçültür (veya derler) ve kodunuzda herhangi bir hata olup olmadığını kontrol eder.
• cssminifier.com ve javascript-minifier.com (CSS ve JS) – Andrew Chilton'ın bu iki küçültücüsünün kullanımı kolaydır. Basitçe kodunuzu yapıştırın ve ardından küçültülmüş kodun çıktısını almak için Küçült düğmesini tıklayın. Kolaylık olması için çıktı kodunu bir dosya olarak bile indirebilirsiniz.
• csscompressor.net (yalnızca CSS) – Bu çevrimiçi CSS sıkıştırıcı hızlı, kolay ve kullanımı ücretsizdir.
• jscompress.com (yalnızca JS)- Bu JavaScript sıkıştırma aracı, JavaScript kodunu Kopyala ve Yapıştır yoluyla sıkıştırmanıza olanak tanır, ancak aynı anda birden fazla JavaScript dosyası da yükleyebilirsiniz. Bu, daha iyi sayfa yükleme hızı için JavaScript dosyalarını tek bir dosyada birleştirmek için harikadır.
• yenileme-sf.com (HTML, CSS ve JS) – Bu sıkıştırıcı JavaScript, CSS ve HTML kod türlerini küçültür. Ayrıca, ihtiyaç duymanız halinde her bir kod türü için tüm sıkıştırıcı seçeneklerini içerir.
• htmlcompressor.com (HTML, CSS ve JS) – Bu çevrimiçi sıkıştırıcı/minifier aracı HTML, CSS ve JS kod türlerini destekler. Hatta CSS + PHP ve JavaScript + PHP gibi farklı kod türlerinin kombinasyonlarını bile destekler. Hatta sıkıştırılmış kodu hatalar için de kontrol edebilirsiniz.
• minifycode.com (HTML, CSS ve JS) – Bu site, tek bir düğme tıklamasıyla kodunuzu küçülten basit ve temiz bir kullanıcı arayüzü ile JavaScript, CSS ve HTML için küçültücüler sunar. Ayrıca, okumayı kolaylaştırmak için küçültülmüş kodu açmak için bir "güzelleştirici" aracı içerir (temelde küçültmenin tersi).
• Dan's Tools – Dan's Tools, bir CSS Minifier ve bir JavaScript Minifier sunar. Her iki araç da kullanımı kolay ve gerçekten temiz bir kullanıcı arayüzüne sahiptir. Herhangi bir gelişmiş seçenek sunmazlar, ancak genel küçültme amaçları için mükemmeldir.

HTML CSS veya JavaScript'inizi yerel olarak küçültmek için bazı çevrimdışı araçlar arıyorsanız, işte birkaç seçenek:

• Daha küçük (HTML, CSS ve JS)
• phpied.com/cssmin-js/ (yalnızca CSS)
• yui.github.io/yuicompressor (JS ve CSS)

Web Sitenizin CSS, HTML ve Javascript'ini Nasıl Küçültebilirsiniz?

Youtube Kanalımıza Abone Olun

Çevrimiçi Bir Araç Kullanarak HTML, CSS ve JavaScript'inizi Nasıl Küçültebilirsiniz

Bu çevrimiçi araçların çoğu, aşağıdaki adımları içeren benzer bir sürece sahiptir:

Kaynak kodunuzu yapıştırın veya kaynak kod dosyasını yükleyin.
Belirli bir çıktı için ayarları optimize edin (seçenekler mevcutsa)
Kodu küçültmek veya sıkıştırmak için bir düğmeyi tıklayın.
Küçültülmüş kod çıktısını kopyalayın veya küçültülmüş kod dosyasını indirin.

Bu örnek için, minifycode.com'daki küçültme araçlarını kullanacağım.

İlk olarak, site dosyalarınızda css dosyasını (genelde style.css olarak adlandırılır) bulun ve bir sayfa düzenleyici kullanarak dosyayı açın. Ardından tüm css kodunu panonuza kopyalayın.

minifycode.com'a gidin ve CSS minifier sekmesine tıklayın. Ardından CSS kodunu giriş kutusuna yapıştırın ve CSS'yi Küçült düğmesini tıklayın.

Yeni küçültülmüş kod oluşturulduktan sonra kodu kopyalayın.

Ardından web sitenizin css dosyasına geri dönün ve kodu yeni küçültülmüş sürümle değiştirin.

Bu kadar!

Sitenizin JavaScript ve Html dosyalarını da küçültmek için aynı işlemi tekrarlayın.

Eklentileri Kullanarak WordPress'te HTML, CSS ve JavaScript Nasıl Küçültülür

WordPress'te HTML, CSS ve JavaScript'inizi küçültmenin en kolay yolu bir eklenti kullanmaktır. Bu, WordPress site dosyalarınızı birkaç düğme tıklamasıyla otomatik olarak azaltılmış sayfa yükleme süreleri için optimize etmenize olanak tanır.

İşi yapacak pek çok eklenti var ama ben kısaca öne çıkanlardan bahsedeceğim.

Otomatik Optimize Et (ÜCRETSİZ)

Autoptimize, muhtemelen oradaki en popüler küçültme eklentisidir. Kullanımı kolay olduğu ve güçlü performans özellikleriyle dolu olduğu için popülerdir. Kodunuzu toplayabilir (komut dosyalarını birleştirebilir), küçültebilir ve önbelleğe alabilir. Bonus olarak, Google Yazı Tiplerini, resimleri ve daha fazlasını optimize etmek için ek seçenekleriniz vardır.

Autoptimize'ı kullanmak için, Eklenti > Yeni Ekle altındaki WordPress Kontrol Panelinden eklentiyi indirebilir, yükleyebilir ve etkinleştirebilirsiniz.

Eklenti etkinleştirildiğinde, Ayarlar > Otomatik Optimize Et'e gidin. Ardından, ana ayarlar sekmesi altında, optimize etmek istediğiniz kodu (HTML, CSS ve/veya JavaScript) işaretleyin ve Değişiklikleri Kaydet'i tıklayın.

Kodunuzun nasıl optimize edilmesini istediğinizi daha fazla özelleştirmek için sayfanın üst kısmındaki Gelişmiş Ayarları Göster düğmesini de tıklayabilirsiniz.

Bu konuda! Oldukça basit ve güçlü.

Hızlı Hız Küçült (ÜCRETSİZ)

Fast Velocity Minify, küçültmekten fazlasını yapan bir başka popüler, ücretsiz ve güçlü WordPress eklentisidir. Sunucunuza gelen HTTP isteklerini azaltmak için CSS ve Javascript'inizi küçültür ve birleştirir, böylece size hızlı hızlı sayfa yükleme süreleri sağlamak için adının hakkını verir. Kullanılabilir ek optimizasyon seçenekleri vardır, ancak varsayılan ayarlar çoğu site için güzel çalışır.

Eklentiyi kullanmak için önce WordPress Kontrol Panelinizden Eklentiler > Yeni Ekle'ye giderek if'yi kurun ve etkinleştirin. Ardından, "hızlı hız küçültme" ifadesini arayın ve arama sonuçlarında bir kez açıldığında, yüklemek ve etkinleştirmek için tıklayın.

Eklenti etkinleştirildiğinde, dosyalarınız otomatik olarak küçültülür ve en iyi performans için optimize edilir. Kolaydı!

Mevcut tüm seçenekleri görmek için eklenti ayarları sayfasına (Ayarlar > Hızlı Hız Küçült) gidin. Durum sekmesi altında, işlenmiş JavaScript ve CSS dosyalarınızın yararlı bir listesini görebilirsiniz.

Ayarlar sekmesi altında, dosyalarınızın optimize edilme şeklini özelleştirebilirsiniz. HTML, CSS ve JavaScript'in küçültülmesi zaten etkin olduğundan, varsayılan seçenekleri ayarlamak veya belirli kod türleri için küçültmeyi devre dışı bırakmak için bu ayarları kullanabilirsiniz. Google Yazı Tiplerini ve Harika Yazı Tiplerini optimize etmek için bile seçenekler var.

Bu kadar!

W3 Toplam Önbellek (ÜCRETSİZ)

W3 Total Cache, HTML, JS ve CSS'nizi küçültme seçeneğini içeren harika bir önbellek eklentisidir.

WP En Hızlı Önbellek (ÜCRETSİZ)

WP En Hızlı Önbellek – Bu ÜCRETSİZ WordPress önbelleğe alma eklentisi, yüksek incelemelerle son derece popülerdir. Eklenti, daha iyi performans için HTML CSS ve JavaScript'inizi birleştirme ve küçültme dahil olmak üzere çeşitli performans optimizasyonları gerçekleştirir.

Eklenti yüklendikten sonra, WordPress Kontrol Paneli kenar çubuğundaki (harika çita simgesine sahip olan) WP En Hızlı Önbellek sekmesine tıklamanız yeterlidir. Ayarlar sekmesi altında, HTML ve CSS dosyalarını birleştirme ve küçültme seçeneklerini bulacaksınız. JavaScript'i küçültmek yalnızca profesyonel sürümde mevcut olsa da.

Son düşünceler

Daha hızlı sayfa yükleme süreleri ve daha iyi performans puanları istiyorsanız, HTML, CSS ve Javascript dosyalarınızı küçültmek isteyeceksiniz. Mevcut tüm çevrimiçi araçlarla, herhangi bir web sitesi için kodunuzu kolayca küçültebilirsiniz. Ve siz WordPress kullanıcıları için, bu dosyaları birkaç tıklamayla otomatik olarak küçültmek için bazı güçlü eklentiler mevcuttur. Yukarıdaki eklentiler, diğer performans optimizasyonları arasında küçültmeyi yöneten harika eklentilerden sadece birkaçıdır. Aslında, zaten mevcut olan bir performans türü eklentiniz olabilir. Örneğin, önbelleğe alma eklentilerinin çoğu, küçültme seçeneğini içerir. Umarım bu yazı sizin için en iyi seçeneğin hangisi olduğuna karar vermenize yardımcı olur.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!