HTML küçültücü

HTML küçültücü, HTML kodundaki gereksiz karakterleri kaldıran ve işlem öncesi ile sonrasındaki karakter sayılarını göstererek daha kompakt bir sürüm oluşturan ücretsiz bir araçtır.

HTML küçültme ne işe yarar?

HTML küçültme, tarayıcıya gönderim için gerekli olmayan biçimlendirmeleri kaldırarak HTML belgesinin boyutunu azaltır. Genellikle girintiler, satır sonları ve öğeler arasındaki gereksiz boşluklar kaldırılır. Amaç, aynı işlevi gören ancak daha az karakter içeren bir işaretleme elde etmektir.

Küçültme işlemi çoğunlukla üretim derlemesi sırasında veya statik HTML dağıtılmadan hemen önce uygulanır. Aktarılan veri miktarını azaltabilir, ancak Brotli veya gzip gibi HTTP sıkıştırma yöntemleri genellikle buna ek ve çoğu zaman daha büyük bir azalma sağlar. Bu işlemler birbirini tamamlar. Küçültme kaynak kodunu, sıkıştırma ise bu kaynağın aktarılma biçimini değiştirir.

Okunabilir, küçültülmemiş HTML kaynağını sürüm kontrolünde sakla. Küçültülmüş HTML'nin incelenmesi, karşılaştırılması ve hatalarının ayıklanması daha zordur. Özellikle belge tek bir uzun satıra dönüştüğünde, belirli bir satır ve sütuna işaret eden hataları bulmak güçleşir.

HTML küçültücü nasıl kullanılır?

Kaynak belgeyi HTML alanına gir ve aracı çalıştır. Araç, kompakt kaynak kodunu Küçültülmüş HTML alanında gösterir. Ayrıca HTML karakterleri ve Küçültülmüş HTML karakterleri sayılarını verir.

1. HTML belgesinin tamamını veya kendi başına anlamlı bir HTML parçasını kullan.
2. Küçültme işlemini çalıştır ve döndürülen işaretlemeyi incele.
3. İşlemin işe yarar bir azalma sağladığını doğrulamak için iki karakter sayısını karşılaştır.
4. Üretimdeki bir dosyayı değiştirmeden önce küçültülmüş HTML belgesini ve tarayıcıda oluşturduğu çıktıyı test et.

İşlem sunucuda yapılır. Girdiğin içerik HTTPS üzerinden sunucuya gönderilir ve saklanmaz. Kuruluşun kod işlemenin tamamen yerel bir bilgisayarda yapılmasını şart koşuyorsa gizli kaynak kodlarını gönderme.

Küçültülmüş çıktı nasıl okunur?

Sonuç bölümünde küçültülmüş işaretleme ile işlem öncesi ve sonrasındaki karakter sayıları gösterilir. Küçültülmüş HTML karakterleri değerinin daha düşük olması, bazı karakterlerin kaldırıldığı anlamına gelir. Ancak bu değer, indirilen dosyanın boyutuyla aynı ölçüm değildir.

Karakter sayıları, çok baytlı karakterleri dikkate alan dize uzunluğu yöntemiyle hesaplanır. Bu nedenle aksanlı harfler ve Latin dışı alfabelerdeki işaretler, tek tek baytlar olarak değil karakter olarak değerlendirilir. Birden fazla Unicode kod noktasından oluşan görünür bir simge yine de sayıma birden fazla karakter olarak yansıyabilir.

Döndürülen alanlar arasında doğrulama raporu bulunmaz. Bu nedenle bu araç bir HTML doğrulayıcı olarak kullanılmamalıdır. Hatalı iç içe yerleştirme, yinelenen ID'ler, eksik zorunlu kapanış etiketleri veya boşluk içeren tırnaksız bir öznitelik değeri konusunda uyarı vermeden kompakt çıktı oluşturabilir. Sondaki virgül HTML söz dizimi hatası değildir, ancak gömülü JSON veya JavaScript içindeki böyle bir virgül, ilgili içeriğin çalışmamasına yol açabilir.

Uygulamalı örnekler ve sorun çıkarabilecek girdiler

Sıradan blok öğelerinin çevresindeki girintiler, küçültme işleminin en basit örneklerinden biridir.

Girdi, burada \n satır sonunu temsil eder <main>\n <p>Ready</p>\n</main>

Kompakt biçim <main><p>Ready</p></main>

Metin içindeki boşluklarda daha dikkatli olmak gerekir. Örneğin, iki satır içi öğe arasındaki boşluk oluşturulan sayfada görünür olabilir.

Girdi <span>Account</span> <span>settings</span>

Güvenli olmayan kompakt biçim <span>Account</span><span>settings</span>

İkinci biçim "Accountsettings" olarak görüntülenebilir. Etiketler arasındaki her boşluğun gereksiz olduğunu varsayma, satır içi içeriği mutlaka kontrol et.

• <pre>, <textarea> ve boşluklara duyarlı benzer içeriklerdeki boşluklar ile satır sonları anlam taşıyabilir.
• Metinlerde veya öznitelik değerlerinde bulunan sayılar ve noktalama işaretleri belge içeriğidir, kaldırılacak biçimlendirme değildir.
• Belge doğru karakter kodlamasını kullandığında aksanlı ve Latin dışı karakterler geçerli HTML metnidir.
• Şablon ifadeleri, sunucu tarafı yönergeleri ve koşullu yorumlar, genel amaçlı bir HTML küçültücünün anlayamayacağı kurallara sahip olabilir.
• Boş bir HTML girdisinde küçültülecek yararlı bir içerik yoktur. Çok uzun bir HTML belgesi için elle kopyalamaya güvenmek yerine tekrarlanabilir bir HTML derleme süreci kullan.

HTML'yi küçültmeye ne zaman değer?

Okunabilir bir kaynak dosyanın üretim ortamında sunulmaya hazırlanması ve çıktının tekrar tekrar gönderilmesi gerekiyorsa HTML'yi küçültmek faydalıdır. Statik açılış sayfaları, dokümantasyon derlemeleri ve sunucu tarafında oluşturulan şablonlar, dağıtım öncesi adım olarak küçültme işlemini kullanabilir.

Zaten küçültülmüş HTML'yi yeniden küçültmek genellikle anlamlı değildir, çünkü ikinci işlem çok az azalma sağlayabilir veya hiç sağlamayabilir. Yalnızca bir makinenin okuyacağı JSON ya da HTML'yi güzelleştirerek biçimlendirmek de bir kişinin hata ayıklaması gerekmiyorsa gereksizdir. Üçüncü taraf HTML kodlarında ise tarayıcı geliştirici araçları veya bir biçimlendirici genellikle daha kullanışlıdır. Küçültme, tanımadığın işaretlemeyi incelemeyi zorlaştırır.

Geçersiz veya hatalı işaretlemeyi düzeltmek için HTML küçültme kullanma. İşaretleme farklı tarayıcılarda farklı davranıyorsa önce okunabilir kaynak kodunu doğrula ve test et. Bir sayfa Markdown'dan oluşturuluyorsa son üretim küçültme adımından önce işaretlemeyi Markdown'dan HTML'ye aracıyla oluşturabilirsin.

Sık sorulan sorular

Satır içi CSS veya JavaScript içeren HTML küçültülebilir mi?

Satır içi CSS ve JavaScript kendi dil bilgisi kurallarına tabidir. Bu nedenle HTML küçültme işleminin bunların içeriğini de optimize edeceği varsayılmamalıdır. Uygun bölümlerde CSS küçültücü veya JS küçültücü kullan, ardından birleştirilmiş belgeyi test et. Gömülü kapanış etiketi dizileri HTML ayrıştırmasını etkileyebilir.

Küçültülmüş HTML arama sıralamasını iyileştirir mi?

Küçültme işlemi tek başına içeriği arama motorları açısından daha alakalı hâle getirmez. Aktarım boyutunu azaltabilir, ancak önbellekleme, sıkıştırma, görseller, betikler ve sunucu yanıt süresi de sayfanın sunulmasını etkiler. Üretim dosyasını hazırlarken başlıkları, meta verileri, yapılandırılmış verileri ve görünür içeriği koru.

Twig, Blade veya başka HTML şablonları küçültülebilir mi?

Şablon söz dizimi sıradan HTML değildir ve genel amaçlı bir küçültücünün tanımadığı boşluklara veya sınırlayıcılara bağlı olabilir. Daha güvenli yöntem, oluşturulmuş çıktıyı küçültmek ya da şablonları anlayan bir derleme entegrasyonu kullanıp temsili sayfaları testlerle kapsamaktır.

Karakter sayısı neden dosya boyutundan farklı?

UTF-8 gibi Unicode kodlamalarında karakter ve bayt farklı ölçümlerdir. Birçok ASCII karakteri bir bayt yer kaplarken diğer karakterler birkaç bayt kullanabilir. Dosyalar ayrıca bayt sırası işareti içerebilir veya bayt boyutunu etkileyen farklı satır sonları kullanabilir.

Küçültme işlemi HTML yorumlarını güvenli biçimde kaldırır mı?

Yorumlar çoğu zaman kaldırılabilir, ancak bazıları derleme yönergeleri, sunucu tarafı ekleme talimatları veya uyumluluk işaretlemeleri içerir. Her yorumun gereksiz olduğunu varsayma. Yorumların projende işlevsel bir anlamı varsa döndürülen kaynak kodunu ve oluşturulan sayfayı kontrol et.

Son kontroller

Küçültme öncesinde ve sonrasında oluşturulan sayfayı karşılaştır. Özellikle satır içi boşluklara, önceden biçimlendirilmiş metinlere, formlara ve gömülü betiklere dikkat et. Okunabilir asıl dosyayı sakla, işaretlemeyi ayrıca doğrula ve küçültülmüş kopyayı yalnızca sayfa beklendiği gibi çalıştıktan sonra dağıt.