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?
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!
Hakkında Sıkça Sorulan Sorular
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. Sıkıştırma; kodun indirilme, ayrıştırılma ve çalıştırılma süresini hızlandıran bir işlemdir.
Bu işlemi manuel ya da çeşitli online ve offline uygulamalar ile gerçekleştirebilirsiniz. Sıkıştırılmamış HTML, JavaScript ve CSS dosyalarını tespit etmek için ve işlem sonrası sıkıştırılmış dosya ve kodları test etmek için GTmetrix’i kullanabilirsiniz. WordPress siteleri için Better WordPress Minify ya da W3 Total Cache gibi eklentileri kullanarak sıkıştırma işlemini gerçekleştirebilirsiniz.
JavaScript, CSS, HTML sıkıştırma sayfa hızınızı artıracağından hem SEO hem de kullanıcı açısından avantajlıdır. Dezavantajları; 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. Ayrıca JavaScript kodları için isim değişkenleri tek bir harf olarak belirtilir ve bu durumda programın ve kodun işlevini anlamak siz değil de başkası için zaman alabilir.
Gösterilecek yorum yok.