Eğer web sitenize ait dosyalarda, JavaScript, CSS, HTML sıkıştırma (minify) yaparsanız web sayfanızın çok daha hızlı yüklenmesini sağlayabilirsiniz. Tabi bu işlem ile web sayfanızın yüklenme hızının yarı yarıya artacağı garantisi yoktur, fakat unutulmamalıdır ki yüklemeye ilişkin olarak ufacık bir hız artışı bile sayfanızın talep oranını artıracak ziyaretçi sayısını yükseltecektir.
JavaScript, CSS, HTML Sıkıştırma Nedir, Ne işe Yarar?
Sayfanızın ne kadar hızlı yüklendiği sadece ilk ziyaretçiler açısından değil, Arama Motoru Optimizasyonu (SEO) açısından da oldukça önemlidir.
Minification (Sıkıştırma) Ne Demektir?
JavaScript, CSS, HTML sıkıştırma için programlama dilinde kullanılan en gelen tabir İngilizce kökenli olan minify terimidir. Peki dosya sıkıştırma (minification) ne anlama gelmektedir?
Dosya sıkıştırma ile kast edilen aslında gereksiz karakterlerin kodlardan çıkarılmasıdır. Bu karakteler insanların kodları okuması için gerekli olmakla beraber makinalar için anlam ifade etmezler ve genel olarak aşağıdaki listeden ibarettirler.
- Boşluk (Whitespaces)
- Satır Sonları (Line breaks)
- Yorumlar (Comments)
- Blok Ayrıştırıcılar (Block delimiters)
Binlerce satırdan oluşan bir kodun sıkıştırıldığında ne derece küçüleceğini düşünün. Tabi arzu edersiniz bütün bu sıkıştırma işlemlerini manuel olarak ellede yapabilirsiniz. Fakat sizinde bildiğiniz gibi ufak bir hata bile binlerce satır kodun çalışmasına engel olacaktır. Ayrıca bu işlemi yaparken sarf edeceğiniz zamanı söylemiyorum bile. Bu noktada mantıklı olan tavsiye edeceğimiz sıkıştırma programlarını kullanmak olacaktır.
On Yazılım WEB tasarım hizmeti hakkında detaylı bilgi sahibi olmak isterseniz https://www.onyazilim.com/web-tasarim sayfasını inceleyebilirsiniz.
En İyi Sıkıştırma Uygulamaları Nelerdir?
Web sitenize ait JS, CSS, HTML dosyalarını sıkıştırmak için neyse ki web site geliştiricisi olmanıza veya her hangi bir yazılım dilini biliyor olmanıza gerek yoktur. Sıkılaştırma (minification) web tasarım alanında artık standart bir uygulama haline gelmiş durumdadır. Haliyle bu maksat ile kullanılan bir çok uygulama olduğunu hatta bunların bazılarının ücretsiz olduğunu bilmekte fayda vardır.
Sıkılaştırma işlemine başladığınızda kullanabileceğiniz bazı uygulamalar aşağıda sıralanmıştır. Bu uygulamaların bir çoğu parantez içerisinde belirtildiği üzere birden çok kod türünde işlem yapabilmektedir.
- Closure Compiler (JS sadece) – Closure Compiler, Google geliştiricilerin kullandığı Closure Tools’un bir parçasıdır. Bazı optimizasyon işlemleri ile beraber JavaScript kodlarını da sıkıştırmanızı sağlar. JS dosya konumunuzun burada bulunan URL adresine kopyalamanız ve kodun nasıl format ve optimize edileceğini belirtmeniz yeterli olacaktır. Örneğin isterseniz sadece boşlukların kaldırılmasını sağlayabilirsiniz. Compile düğmesine bastığınız anda size ait olan kodu sıkıştıracak ve varsa koda ilişkin hatlarıda ortaya çıkaracaktır.
- cssminifier.com ve javascript-minifier.com (CSS ve JS ) – Bu iki sıkıştırma uygulamasıda kullanım açısından oldukça kolaydır. Oluşturmuş olduğunuz kodu sitedeki alana kopyaladıktan sonra Minify butonuna basmanız yeterli olacaktır. Hatta bu uygulama sayesinde sıkıştırılmış kodu indirebilirsiniz.
- csscompressor.net (Sadece CSS)- Bu online CSS sıkıştırma uygulaması hızlı, kolay ve ücretsizdir.
- jscompress.com (Sadece JS) – Bu JS kod sıkıştırma uygulaması size kopyala ve yapıştır yöntemi ile JavaScript kodlarını sıkılaştırma imkanı sunar. Ayrıca bu uygulama ile bir çok kodu aynı anda işleme sokabilirsiniz.
- refresh-sf.com (HTML,CSS ve JS)- Bu uygulama JavaScript, CSS ve HTML kodlarını sıkıştırmanızı sağlayacaktır. Ayrıca bu uygulama ile her kod türünde bütün sıkıştırma yöntemlerini kullanmanız mümkündür.
- htmlcompressor.com (HTML,CSS ve JS) – Bu online uygulama JavaScript, HTML ve CSS kod türlerini desteklemektedir. Bu uygulama hatta CSS+ PHP ve JavaScript+ PHP gibi farklı verisyon kod türlerinide desteklemektedir. Ayrıca uygulama üzerinden sıkıştırılan kodlarda hata olup olmadığınıda kontrol edebilirsiniz.
- minifycode.com (HTML,CSS ve JS) – Bu online uygulamada sadece basit bir butona basmak kaydı ile JavaScript, HTML ve CSS kod türlerini sıkıştırabilmektedir. Ayrıca site üzerinde “beautifier” adı altında ayrı bir uygulama mevcuttur. Bu uygulama sıkıştırılan kodların tekrardan açılmasını ve böylece kontrol edilmesini sağlamaktadır.
SEO alanında önemli olan bu konulara On Yazılım olarak dikkat etmekteyiz. On Yazılım SEO Hizmeti hakkında bilgi almak isterseniz lütfen https://www.onyazilim.com/arama-motoru-optimizasyonu-seo-hizmeti sayfasını ziyaret ediniz.
Offline Sıkıştırma Uygulamaları Nelerdir?
Eğer talebiniz offline JavaScript, HTML ve CSS sıkıştırma uygulamaları ise bu durumda aşağıda sunduğumuz listeye bakmanız sizin için faydalı olacaktır.
- Smaller (HTML,CSS ve JS kodları)
- phpied.com/cssmin-js/ (CSS kodları için)
- yui.github.io/yuicompressor (JS ve CSS kodları için)
HTML, JavaScript, CSS Sıkıştırma Avantaj ve Dezavantajları Nelerdir?
Aslında makalemizin başındada belirttiğimiz gibi JavaScript, CSS, HTML sıkıştırma hem Arama Motoru Optimizasyonu (SEO) açısından hemde sayfanızın hızlı yüklenmesi açısından fayda sağlayacaktır. Bu durumda daha fazla tıklanma ve kullanıcı çekmenizi sağlayacaktır. Makalemiz boyunca bahsettiğimiz için bu alanda kod sıkıştırma avantajlarından ziyade konunun dezavantajlarına yer vermek istiyorum. Az olmakla beraber kod sıkıştırmanın dezavantajları şöyledir;
- Kod sıkıştırdığınızda genelde bir satır içerisine bir çok kod yer almaktadır. Haliyle kodunuz ile ilgili bir hata ile karşılasırsanız çok uzun ve okuması zor olan bu kod satırında hatayı bulmanız oldukça zor olacaktır.
- Özellikle JS kod sıkıştırmalarında bütün isim değişkenleri tek bir harf olarak değişmektedir. Haliyle bu durumda programın veya kodun ne yaptığını tam olarak anlamak zorlaşacaktır. Özellikle kodu inceleyen yazan değilde başkaları ise.
Bir site için WEB yazılım hizmetinin ne kadar önemli olduğu yazımızdan da anlaşılmaktadır. On Yazılım olarak size en iyi hizmeti sunmak için elimizden geleni yapmaktayız. https://www.onyazilim.com/web-yazilim sayfasından WEB yazılım hizmeti özelinde incelemelerinizi yapabilirsiniz.
_1226.jpg)
