HTML, JavaScript ve CSS sıkıştırma / küçültme (minify), kodun çalıştırılmasında katma değeri olmayan, yani gereksiz tüm karakterleri kaldırma işlemi için kullanılan bir programlama terimidir. Sıkıştırma işlemi kodu küçültmektir ve dolayısı ile sayfanın hızını artıran kullanıcı ve arama dostu bir işlemdir. Kod üzerinden kaldırılabilen karakterler şunlardır:
- Gereksiz boşluk karakterleri,
- Blok ayırıcıları,
- Satır sonları,
- Yorumlar.
Bunlar her ne kadar okunabilirlik ve
görsel amaçlar için kullanılıyor olsa da, kodun düzgün yürütülebilmesi için çok
da gerekli değildir ve kaldırılabilir.
Kısacası HTML, JavaScript ve CSS sıkıştırma; kodun
indirilme, ayrıştırılma ve çalıştırılma süresini hızlandıran bir işlemdir.
Peki, bu nasıl yapılabilir? Sıkıştırma için en iyi uygulamalar nelerdir?
Sıkıştırmanın avantajları ve dezavantajları nelerdir? HTML, JavaScript ve CSS
sıkıştırma/küçültme için gerekli olan tüm bilgileri bu yazımızda derledik.
HTML, JavaScript ve CSS Sıkıştırma İçin En İyi Uygulamalar Nelerdir?
Web
sitenizde bulunan HTML, JavaScript, CSS dosyalarını sıkıştırmak için
programlama dili bilmenize veya bir web site geliştiricisi olmanıza gerek
yoktur. Sıkıştırma işlemi için kullanılabilecek pek çok araç bulunmaktadır. Bu
araçlar, birden çok kod üzerinde işlem yapabilmekte, online / offline olarak ve
ücretli / ücretsiz olarak kullanılabilmektedir. Sıkıştırılmamış HTML, JavaScript ve CSS dosyalarını tespit etmek için
GTmetrix’i kullanabilirsiniz.
En iyi online
sıkıştırma araçları şunlardır:
- Closure Compiler: Yalnızca
JavaScript kodları için kullanılabilir.
- cssminifier.com ve javascript-minifier.com:
CSS ve Javascript kodları için kullanılabilir.
- csscompressor.net: Sadece CSS kodları
için kullanılabilir, ücretsizdir.
- jscompress.com: Sadece Javascript kodları
için kullanılabilir.
- refresh-sf.com: HTML, CSS,
JavaScript kodları için kullanılabilir.
- htmlcompressor.com: HTML, CSS ve
JavaScript kodları için kullanılabilir.
- minifycode.com: HTML, CSS ve
JavaScript kodları için kullanılabilir.
En iyi offline sıkıştırma araçları ise şunlardır:
- Smaller: HTML,CSS ve JavaScript
kodları için kullanılabilir.
- phpied.com/cssmin-js/: CSS kodları
için kullanılabilir.
- yui.github.io/yuicompressor: JavaScript
ve CSS kodları için kullanılabilir.
HTML, Javascript, CSS Sıkıştırma İçin Manuel Düzenlemeler
GTmetrix kullanarak tespit ettiğiniz sıkıştırılmamış kodları manuel
olarak düzenleyebilirsiniz. GTmetrix kullanımı çok kolaydır; GTmetrix dosya
adının yanında bulunan ‘Optimize Edilmiş Sürümü Göster’ butonuna basarak HTML,CSS
ve JavaScript dosyalarının düzenlenmiş versiyonunu görebilirsiniz. Daha sonra
bu dosyaları indirebilir ve herhangi bir FTP istemcisi kullanarak bu dosyaları
sitenize yükleyebilirsiniz. Burada indirdiğiniz bu dosyaların isimlerinin eski
dosya isimleriyle aynı olduğundan emin olmalısınız.
Eğer bir WordPress sitesine sahipseniz, aynı sonuca ulaşmak için Better
WordPress Minify ya da W3 Total Cache gibi eklentileri kullanabilirsiniz.
Son olarak, manuel olarak yapmak istediğiniz sıkıştırma işlemi için
CloudFare servisini kullanabilirsiniz. CloudFare, sitenizi hızlandırır ve
korur; ayrıca ücretsizdir. Ücretsiz sürümünün sunduğu özelliklerden biri de
CSS, JavaScript ve HTML kodlarını sıkıştırmaktır. Bunu Performance >
Auto-Minify üzerinden yapabilirsiniz.
Manuel olarak sıkıştırdığınız kodları tekrar GTmetrix kullanarak test
etmeyi unutmayın
HTML, JavaScript, CSS Sıkıştırma Avantaj ve Dezavantajları Nelerdir?
Bu Yazıları da Sevebilirsiniz
Yazımızın
giriş kısmında da bahsettiğimiz gibi, JavaScript, CSS, HTML sıkıştırma sayfa
hızınızı artıracağından hem SEO (arama motorları için) hem de kullanıcı
açısından yarar sağlayacaktır. Yarı yarıya bir artıştan söz edemesek de,
unutulmamalıdır ki sayfa hızınızda en küçük artış bile SEO açısından çok
önemlidir; daha fazla trafik ve tıklanma sağlayacaktır.
Kod
sıkıştırmanın dezavantajları oldukça azdır. Bunlar:
- Sıkıştırılmış kodlarda bir satır içerisinde daha fazla kod yer alacağından, kod ile ilgili bir hatada uzun ve anlaşılması zor olan kod satırında hatayı bulmak zaman alabilir.
- Kodu inceleyen siz değil de başkası ise, sıkıştırılmış JavaScript kodlarının anlaşılması zor olabilir. Çünkü bu tür sıkıştırılan kodlar için isim değişkenleri tek bir harf olarak belirtilir ve bu durumda programın ve kodun işlevini anlamak zaman alabilir.
Dopinger SEO hizmetleri ile Google’da bir numara olun!