HTML'i Tek Tıkla Küçült
Dosya boyutunu küçültmek için HTML'deki boşlukları daraltın ve yorumları anında kaldırın.
İşaretlemeniz cihazınızda kalır
Sonradan silinecek bir şey yok
Duyurulmamış metinler için güvenli
Her modern tarayıcıda çalışır
Nasıl çalışır
- 1
HTML’inizi yapıştırın
Tam bir belge, bir e-posta şablonu ya da bir sunucunun sayfaya yerleştirdiği bir parça.
- 2
Raporu okuyun
Küçültülmüş boyutu sıkıştırılmışla karşılaştırın ve aslını değiştirmeden önce uyarıları gözden geçirin.
- 3
Çıktıyı kopyalayın
Bir derleme çıktısına, bir şablon dosyasına ya da gömülü bir belgeye taşıyın.
Neden bu araç
Anlamlı boşluk korunur
Satır içi öğeler arasındaki boşluk işlenmiş bir sözcük aralığıdır; daraltılıp yok edilmek yerine korunur.
pre ve textarea’ya dokunulmaz
İkisi de şartnameyle boşluğu korur ve içeriklerini yeniden biçimlendirmek ziyaretçinin okuduğunu değiştirir.
Kapanış etiketleri yerinde kalır
İsteğe bağlı etiketleri silmek ayrıştırıcının hata toparlamasına bel bağlar; bu araç o kumarı oynamaz.
script ve style doğru ele alınır
Gömülü bloklar farklı dillerdir ve kapanış script dizisi içeren bir metin yanlışlıkla işaretleme sanılmaz.
Kazanç konusunda dürüst
Belge genellikle üç varlığınızın en küçüğüdür ve gösterilen sayılar bunu söyler.
Hiçbir şey tarayıcıdan ayrılmaz
İşaretleme bu sayfada işlenir; taslak metinler ve hazırlık ortamı adresleri bir sunucuya teslim edilmez.
HTML’de boşluk bazen anlamlıdır ve bütün zorluk buradadır
CSS ve JavaScript’te metin dışındaki boşluk hiçbir anlam taşımaz ve toptan silinebilir. HTML böyle işlemez. İki satır içi öğe arasındaki boşluk dizisi hiçliğe değil tek bir boşluğa daralır ve hayatta kalan o boşluk işlenmiş bir sözcük aralığıdır: `<span>Toplam</span>` ile `<span>Fiyat</span>` arasındaki satır sonunu silin, iki sözcük ekranda birbirine yapışır. Aynısı bir bağlantı ile ardındaki metin arasında, bir gezinme çubuğundaki komşu `<a>` öğeleri arasında, `<img>` ve `<button>` çevresinde geçerlidir. Küçültülmüş bir sayfanın birden “ÇıkışAyarlar” diye okunmasının nedeni budur ve güvenli kural, boşluğu yalnızca blok düzeyi öğeler arasında daraltmaktır; tarayıcı orada zaten bir aralık işlemiyordu. Hangi durumda olduğunuza karar vermek her öğenin display değerini bilmeyi gerektirir, o da sizin CSS’inize bağlıdır — dolayısıyla yalnızca işaretlemeyi gören bir aracın temkinli olması gerekir ve bu araç öyledir.
pre ve textarea boşluğu şartnameyle korur
İki öğe boşluğu en güçlü anlamda taşıyıcı kılar. `<pre>` içinde her boşluk ve her satır sonu yazıldığı gibi işlenir; kod örnekleri ve ASCII yerleşimi orada yaşar, başka yerde yaşamaz. Bir `<pre>` bloğunu yeniden girintilemek okurunuzun gördüğü kodu değiştirir, daraltmak ise örneği tümüyle yok eder. `<textarea>` başlangıç değeri için aynı davranır; bir formun varsayılan metnindeki boşluk biçim değil içeriktir — üstelik ayrıştırıcı açılış etiketinden hemen sonraki tek bir satır sonunu siler, yani satır sonu ekleyen ya da silen bir araç kullanıcının alanda bulacağını sessizce değiştirir. `<script>` ve `<style>` içerikleri de işaretleme düzeyindeki boşluk kurallarının dışındadır, aşağıda anlatılan başka bir nedenle. Belgeyi tek tip bir etiket ve metin akışı sayan her küçültücü er geç bunlardan birini bozar.
HTML bağışlayıcıdır ve bu, agresif küçültmeyi daha güvenli değil daha riskli kılar
HTML’de, CSS ve JavaScript’teki anlamda ayrıştırma hatası yoktur. `</p>`’yi atlayın, `</li>`’yi atlayın, `</tbody>`’yi atlayın, bir özniteliğin tırnaklarını düşürün; tarayıcı yine de toparlanıp bir ağaç kurar — şartname bunun nasıl olacağını tam olarak tanımlar. Küçültücüler bunu kullanır: isteğe bağlı kapanış etiketlerini silmek gerçek bir bayt tasarrufudur ve şartnameye göre yasaldır. İşin püf noktası, toparlamanın yalnızca zaten geçerli olan işaretleme için aynı kalacağının garanti edilmesidir. Bir etiketin hâlihazırda dengesiz olduğu ya da bir `<p>` içinde bir `<div>` bulunduğu bir belgede, isteğe bağlı etiketleri silmek ayrıştırıcının bir öğenin bittiğine karar verdiği yeri kaydırır ve ortaya çıkan ağaç başka bir ağaçtır — genellikle içeriğin ait olduğu kutunun dışına fırlaması olarak görünür. Bu, başkalarının da okuduğu bir işaretlemedir: örtük kapanışlı bir parça, sonraki bir şablon motorunu, bir e-posta istemcisini ya da daha katı bir XML ayrıştırıcısı kullanan bir toplayıcıyı bozabilir. Bu araç kapanış etiketlerine dokunmaz, çünkü tasarruf küçük, arıza yapısaldır.
Gömülü script ve style aynı dosyanın içindeki farklı dillerdir
Bir `<script>` ya da `<style>` bloğu işaretleme değildir ve ayrıştırıcı içine girerken kip değiştirir. Bunun, saf araçları yakalayan belirli bir sonucu vardır: klasik bir betiğin içinde ayrıştırıcı harfi harfine `</script` karakterlerini arar ve öğeyi orada bitirir, bunlar bir JavaScript metninin içinde olsa bile. `document.write("</script>")` yazan kod bu yüzden kendi bloğunu sonlandırır ve standart çözüm diziyi `"<\/script>"` biçiminde kırmaktır. Metin tırnaklarını yeniden yazan ya da bunu anlamadan yeniden kaçış uygulayan bir küçültücü, diziyi var olmadığı yerde yaratabilir ve sayfa o noktadan sonra kesilir. Ayna durumu ise betik içeriğini metin sayıp içindeki boşluğu daraltan bir küçültücüdür; bu, bir şablon metniyle ya da satır sonunun noktalı virgülün işini gördüğü bitmemiş bir satırla karşılaşana kadar zararsızdır. Bu blokları doğru ele almak, üzerlerinde işaretleme geçişi değil gerçek bir JavaScript ve CSS geçişi çalıştırmak demektir.
Karakter kümesi bildirimi ilk 1024 baytın içinde olmalıdır
Türkçe yazan herkesin er geç çarptığı, küçültmenin de doğrudan etkilediği bir kural var. Bir tarayıcı belgenin kodlamasını `<meta charset>` etiketinden öğrenir ve şartname bu bildirimi yalnızca belgenin ilk 1024 baytı içinde arar; orada bulamazsa kodlamayı tahmin etmeye başlar. Tahmin yanlış çıktığında ş, ğ, İ ve ı en önce bozulan harflerdir, çünkü ASCII dışındadırlar — sayfa “şirket” yerine “Åirket” gösterir. Küçültme bu sınırı iki yönde de hareket ettirir: baş bölümünden boşluk ve yorum silmek bildirimi güvenli biçimde yukarı çeker, ama etiketleri yeniden sıralayan ya da belgenin en başına bir lisans banner’ı ekleyen bir araç onu aşağı itebilir. Bu yüzden charset bildirimini baş bölümünün ilk satırına koymak, küçültücünüzün ne yaptığından bağımsız bir alışkanlıktır — ve bu araç baş bölümündeki öğelerin sırasını hiç değiştirmez.
HTML, küçültmenin en az şey satın aldığı varlıktır
Bunu açıkça söylemek gerekir, çünkü çabanızı nereye harcayacağınızı değiştirir. Bir sayfanın yüklediği üç metin varlığı arasında belge genellikle en küçüğüdür ve genellikle önbelleğe alamadığınız olandır — bir stil sayfası ve bir paket parmak iziyle işaretlenip bir yıl saklanırken HTML neredeyse her ziyarette taze çekilir. Bu, onu küçültmek için bir argüman gibi durur ve kısmen öyledir, ama sayılar mütevazıdır: işaretleme son derece iyi sıkışır, çünkü aynı etiket adlarını ve öznitelik kalıplarını yüzlerce kez tekrarlar; dolayısıyla sunucudaki gzip ya da Brotli bir küçültücünün alacağının çoğunu zaten almıştır. Bir belgedeki gerçek kazançlar yapısaldır — daha az gömülü veri yığını, kaynağa yapıştırılmış dev base64 görselleri yok, bir script etiketine boşaltılmış sunucu durumu yok. HTML’iniz gerçekten büyükse çözüm küçültme değildir; içinde ne olduğunu öğrenmek genellikle çözümdür.
Kaçınılması gereken yaygın hatalar
- Satır içi öğeler arasındaki boşluğu daraltmak. O boşluk işlenmiş bir sözcük aralığıdır; silmek işaretleme doğru görünse bile iki sözcüğü ekranda birbirine yapıştırır.
- `pre` ya da `textarea` içeriğini yeniden biçimlendirmek. İkisi de boşluğu şartnameyle korur; yeniden girintilemek kod örneğini ya da formun varsayılan metnini değiştirir.
- Karakter kümesi bildirimini belgenin ilk 1024 baytının dışına itmek. Tarayıcı o zaman kodlamayı tahmin eder ve ş, ğ, İ, ı ilk bozulan harfler olur.
- Bayt kazanmak için isteğe bağlı kapanış etiketlerini silmek. Toparlamanın aynı kalacağı yalnızca zaten geçerli işaretleme için garantidir; dengesiz olan her şeyde ayrıştırıcı öğeleri başka yerde bitirir.
- İşaretleme düzeyinde bir geçişin `script` içeriğine dokunmasına izin vermek. Harfi harfine `</script` bir JavaScript metninin içinde bile öğeyi bitirir, yani yeniden kaçış sayfayı kesebilir.
Karşılaştırma
| Ölçüt | Bu araç | Çevrimiçi küçültücüler | Bir derleme hattı |
|---|---|---|---|
| İşaretleme sunucuya gönderilir | Asla | Genellikle evet | Hayır |
| Satır içi sözcük aralıklarını korur | Her zaman | Değişir | Ayarlanabilir |
| pre ve textarea’ya dokunmaz | Evet | Değişir | Genellikle |
| Baş bölümünün sırasını korur | Evet | Nadiren | Ayarlanabilir |
| İsteğe bağlı kapanış etiketlerini siler | Hayır | Sıkça | Ayarlanabilir |
| Fiyat | Ücretsiz | Ücretsiz / ücretli katmanlar | Ücretsiz |
Özellikler
Yorum kaldırma
Geliştirme notları ve bölüm işaretleri gider; hâlâ iş gören koşullu yorumlar kalır.
Güvenli boşluk daraltma
Boşluk dizileri yalnızca blok düzeyi öğeler arasında azaltılır; orada zaten hiçbir aralık işlenmiyordu.
Öznitelik derlenip toplanması
HTML şartnamesinin varsayılan saydığı gereksiz type öznitelikleri ve boş değerler atılır.
Görebildiğiniz tırnak işlemi
Öznitelik tırnakları yalnızca değerin bunlara ihtiyaç duyması imkânsızsa kaldırılır, son öznitelikte ise asla.
İki boyut da bildirilir
Ham ve gzip; çünkü sunucu sıkıştırması küçültmenin işaretlemeden aldığının çoğunu zaten alıyor.
Büyük belgeleri kaldırır
Her boyutta işlenmiş bir sayfa yükleme ya da boyut tavanı olmadan küçülür.
Kurulacak bir şey yok
Derleme aracı yok, çalışma zamanı yok, bağımlılık yok — web sayfasında çalışır.
Arapça ve RTL hazır
Sekiz dilde tam arayüz, sağdan sola Arapça dahil.
Varsayılan olarak güvenli
HTTPS üzerinden sunulur; içerik takibi ve üçüncü taraf yüklemesi yoktur.
Kimler kullanıyor
Ön yüz geliştiricileri
Bir derleme adımından geçmeyen bir şablonu küçültmek.
E-posta geliştiricileri
Bir şablonu tablo yerleşimini bozmadan istemcinin boyut sınırının altına indirmek.
Sunucu geliştiricileri
Sayfaya döndürülmeden önce sunucuda işlenmiş bir parçayı derleyip toplamak.
Belge gömen herkes
Katı bir boyut tavanı olan bir yere gömülmesi gereken işaretlemeyi sıkıştırmak.
Sıkça Sorulan Sorular
Hayır. Her şey tarayıcınızda yerel çalışır — metniniz asla yüklenmez, saklanmaz veya paylaşılmaz.
Evet — tamamen ücretsiz, hesap ve sınır yok.