Kod Biçimlendirici rehberi
XGM Kod Biçimlendirici, HTML, CSS ve JavaScript'i küçültürken ya da XML'i biçimlendirirken neyi kaldırır, neyi korur ve hangi boşluklar düzeni bozabilir.
HTML küçültme ne yapar
İnsanların ve şablonların yazdığı HTML, tarayıcıların ihtiyaç duymadığı girintiler, satır sonları ve yorumlar içerir. Küçültme, ağ üzerinden gönderilen bayt sayısını azaltmak için bunları kaldırır. Sayfanın yapısı ve içeriği aynı kalır. Kaldırılan tek şey, kodu insan gözü için okunaklı tutan biçimlendirmedir; etiketler, öznitelikler ve ziyaretçinin gördüğü metin olduğu gibi durur. Tarayıcı belgeyi ayrıştırdığında ortaya çıkan DOM ağacı da değişmez, yani betikleriniz ve stil kurallarınız aynı yapıyla çalışmayı sürdürür.
<!-- product card -->
<div class="card">
<h2> Shoes </h2>
<p>
Size 42
</p>
</div>
<div class="card"><h2> Shoes </h2><p> Size 42 </p></div>Kod Biçimlendirici ile HTML nasıl küçültülür
- Kod Biçimlendirici aracını açın ve HTML'inizi yapıştırın.
- Küçültülmüş çıktıyı ve kazanılan boyutu okuyun.
- Sonucu kopyalayın ya da derlemeniz veya şablonunuz için indirin.
- Küçültülmüş HTML'i içeren sayfayı açın ve düzenin aynı göründüğünü kontrol edin.
Neyin kaldırıldığını ve neyin korunduğunu görmek için Örnek yükle düğmesine basın: bir yorum, girintiler ve bir pre bloğu içeren küçük bir sayfa yüklenir.
Küçültme tarayıcınızda çalışır. Üretimdeki siteler için küçültmeyi derleme sürecinin bir parçası yapın; böylece her dağıtım kendiliğinden küçültülmüş olur. Bu aracı ise tek seferlik kod parçacıkları, e-posta şablonları ya da bir küçültücünün neyi değiştireceğini görmek için kullanın. Elle yapılan bir adım olduğu için en çok inceleme ve deneme aşamasında işe yarar, düzenli teslimat akışında değil.
XML biçimlendirme ve küçültme
Kod Biçimlendirici'nin XML modu girdiyi tarayıcının XML ayrıştırıcısıyla çözümler; bu yüzden bozuk belgeler sessizce yeniden biçimlendirilmek yerine ayrıştırıcının kendi hata mesajıyla bildirilir. Biçimlendir her seviye için iki ya da dört boşluk girinti verir; Küçült öğeler arasındaki boşlukları kaldırır ve yorumları atar. CDATA bölümleri ile XML bildirimi gibi işleme yönergeleri korunur.
Biçimlendirme sırasında öğelerin içindeki metnin baştaki ve sondaki boşlukları kırpılır. Bu, yapılandırma dosyaları ve DMARC toplu raporları gibi beslemeler için güvenlidir; metnin başındaki boşlukların anlam taşıdığı XML biçimlerinde ise değildir, onlarda özgün belgeyi saklayın. Küçültücüler gibi XML modu da tamamen tarayıcınızda çalışır ve belgeniz hiçbir sunucuya gönderilmez. Araç yalnızca belgenin iyi biçimli olup olmadığına bakar; bir DTD ya da XSD şemasına karşı doğrulama yapmaz.
Küçültme mi, sıkıştırma mı
Web sunucuları ve CDN'ler metin yanıtlarını gzip ya da Brotli ile sıkıştırır; bu da tekrarlanan örüntüleri, küçültmenin kaldıracağı boşlukların çoğu dahil, çok verimli biçimde ortadan kaldırır. Zaten sıkıştırılmış bir HTML'i ayrıca küçültmenin getirdiği ek kazanç genellikle mütevazıdır. Küçültme yine de biraz yardımcı olur ve hiç sıkıştırılmayan sayfalarda, örneğin bazı e-posta HTML'lerinde, katkısı belirgin biçimde büyür. Bu yüzden küçültmeyi sıkıştırmanın yerine geçen bir çözüm değil, onun üstüne eklenen küçük bir iyileştirme olarak düşünmek daha doğrudur.
| Sürüm | Göreli boyut |
|---|---|
| Özgün HTML | %100 |
| Küçültülmüş | Yaklaşık %80–90 |
| Özgün, gzip ile sıkıştırılmış | Yaklaşık %20–25 |
| Küçültülmüş ve sıkıştırılmış | Tek başına sıkıştırmadan biraz daha az |
Sitenizde sıkıştırmanın açık olup olmadığını kontrol edin: yanıt Content-Encoding: gzip ya da br içermelidir. HTTP Başlıkları Kontrolü bu başlık da dahil olmak üzere bütün yanıt başlıklarını listeler. Başlık hiç yoksa, sunucu yapılandırmanızda sıkıştırmayı açmak, HTML'i küçültmekten çok daha fazla bayt kazandırır.
gzip on;
gzip_types text/html text/css application/javascript application/json image/svg+xml;
gzip_min_length 1024;Boşluk ne zaman önemlidir
HTML, sayfayı görüntülerken arka arkaya gelen boşlukları tek boşluğa indirir, ama boşluğu her zaman tamamen kaldırmaz. İki satır içi öğe arasındaki boşluk, örneğin iki bağlantı ya da bir etiket ile bir giriş alanı arasındaki boşluk, ekranda görünür durumdadır. Etiketler arasındaki boşluğu kaldırmak sözcükleri birbirine yapıştırabilir ya da düğmeler arasındaki küçük aralıkları yok edebilir. Fark çoğu zaman birkaç pikselliktir, ama yan yana duran bağlantılarda ya da rozetlerde hemen göze çarpar.
| İşaretleme | Risk |
|---|---|
<a>Home</a> <a>About</a> | Etiketler arasındaki boşluk kalkınca bağlantılar birbirine yapışabilir |
| Satır sonlarıyla ayrılmış inline-block düğmeler | Aralarındaki küçük boşluk kaybolur |
<pre> ve <textarea> | Küçültücü bunları korur; elle yazılmış küçültücüler sıkça bozar |
Şablon dizeleri içeren satır içi <script> | Küçültücü korur; dizelerin içindeki boşluk anlam taşır |
| Bilerek çift boşluk konmuş metin düğümleri | Tek boşluğa iner (tarayıcılar pre dışında zaten tek gösterir) |
Küçültücü etiketler arasındaki boşluğu cesurca sıkıştırır; gözle kontrol tam da bu yüzden önemlidir. Bir aralık kaybolduysa, işaretlemedeki boşluğa güvenmek yerine aralığı CSS ile, örneğin gap özelliğiyle ya da kenar boşluklarıyla verin. Bu aynı zamanda düzeni daha öngörülebilir kılar ve aynı bileşen başka bir şablonda kullanıldığında da doğru görünmesini sağlar.
Derleme akışında küçültme
Kaynak dosyalarınızda ve şablonlarınızda okunaklı HTML tutun; yalnızca yayına giden çıktıyı küçültün. Küçültülmüş HTML'i elle düzenlemek hataya açıktır ve küçültülmüş dosyaların farkları kod incelemesinde okunmaz. Çoğu statik site üreticisinin ve çatının, üretim derlemesi sırasında çalışan bir küçültme adımı ya da eklentisi vardır. Böylece küçültme, kimsenin unutamayacağı otomatik bir adım hâline gelir ve sürüm geçmişiniz okunabilir kaynak dosyalarla dolu kalır.
- Şablonları okunaklı biçimde yazın ve inceleyin.
- Siteyi derleyin; küçültücü üretilen HTML dosyaları üzerinde çalışır.
- Görsel ya da uçtan uca testleri yalnızca geliştirme derlemelerine değil, küçültülmüş çıktıya karşı da çalıştırın.
- Yayına alın ve canlı sitede sıkıştırma başlıklarını doğrulayın.
- Gerektiğinde hata ayıklayabilmek için kaynak haritalarını ya da küçültülmemiş derleme çıktısını saklayın.
Sunucuda oluşturulan uygulamalar yanıtları bir ara katmanda küçültebilir, ama bu her istekte işlemci zamanı harcar. Oluşturulmuş ve küçültülmüş çıktıyı önbelleğe almak ya da şablonları derleme zamanında küçültmek, aynı işi her istekte yeniden yapmayı önler. Yoğun trafik altında bu fark, kazandığınız birkaç yüz bayttan çok daha önemli hâle gelebilir.
E-posta HTML'i özel bir durumdur. Birçok e-posta istemcisinin kendine özgü görüntüleme tuhaflıkları vardır ve bazıları belirli bir boyutun üzerindeki iletileri keser; küçültme, uzun bir bültenin kesilmesini engelleyebilir. Göndermeden önce küçültülmüş sürümü, alıcılarınızın gerçekten kullandığı istemcilerde test edin.
Küçültücünün değiştirmedikleri
XGM küçültücüsü bilerek ihtiyatlıdır. İsteğe bağlı kapanış etiketlerini, öznitelik tırnaklarını ve varsayılan öznitelik değerlerini kaldırmaz; satır içi CSS ya da JavaScript'i yeniden yazmaz. Bu daha agresif iyileştirmeler birkaç bayt daha kazandırır, ama alışılmadık işaretlemeyi ya da HTML'i sonradan ayrıştıran araçları bozma olasılığı en yüksek olanlar da tam olarak onlardır. Çıktının girdiyle aynı biçimde ayrıştırılacağından emin olmak, birkaç yüz baytlık ek kazançtan daha değerlidir.
Daha agresif bir küçültmeye ihtiyacınız varsa, sayfalarınız için bir test takımı bulunan özel bir derleme aracı kullanın. Hızlı kontroller, kod parçacıkları ve şablonlar için ihtiyatlı küçültme, israfın büyük bölümünü temizlerken riski düşük tutar. Araç ayrıca tanımlayıcıları yeniden adlandırmaz, kuralları birleştirmez ve kullanılmayan kodu atmaz; bunlar için bir paketleyiciye ihtiyacınız olur.
CSS, JavaScript ve derleme araçları
CSS modu ve JavaScript modu stil sayfalarını ve betikleri aynı şekilde ele alır: yorumları ve boşlukları kaldırır, ama değişken adlarını değiştirmez ve kodu yeniden yapılandırmaz. Çatıların kullandığı derleme araçları genellikle daha ileri gider; JavaScript için ölü kod temizliği ve ad kısaltma da yapar. Her iki mod da girdi ile çıktı boyutunu UTF-8 bayt cinsinden gösterir, böylece kazancın gerçekten ölçmeye değer olup olmadığını hemen görürsünüz.
https://www.example.com gibi bir site için etkinin sırası genellikle şudur: yanıtları sıkıştırın, statik varlıkları uzun ömürlerle önbelleğe alın, görselleri iyileştirin, JavaScript'i azaltın ve ancak ondan sonra HTML'i küçültün. Küçültme kolaydır, ama nadiren en büyük başarım kazancını getirir.
SSS
Küçültülmüş HTML farklı mı görüntülenir?
Görüntülenmemeli, ama satır içi öğeler arasındaki boşluğun kaldırılması küçük aralıkları değiştirebilir ya da sözcükleri birbirine yapıştırabilir. Sonucu gözle kontrol edin.
Koşullu yorumlar kaldırılır mı?
Hayır. <!--[if ile başlayan yorumlar korunur, çünkü bazı e-posta istemcileri ve eski tarayıcılar için anlam taşırlar.
script ve style içeriği değişir mi?
Hayır. script ve style bloklarının içeriği, pre ve textarea ile birlikte olduğu gibi korunur.
Küçültme ne kadar kazandırır?
Sıkıştırılmamış HTML'in çoğu zaman yüzde 10 ila 20'si kadar. gzip ya da Brotli açıkken ek kazanç daha küçüktür.
HTML e-postalarımı küçültmeli miyim?
Dikkatli olun. Bazı e-posta istemcilerinin boyut sınırı vardır ve küçültme burada işe yarar, ama önemsediğiniz istemcilerde test edin, çünkü e-posta görüntüleme işaretleme değişikliklerine karşı hassastır.
HTML'im bir yere yükleniyor mu?
Hayır. Küçültme tarayıcınızda çalışır.
Küçültme SEO'ya yardımcı olur mu?
En fazla dolaylı olarak, sayfaları bir miktar hızlandırarak. İçerik, yapı ve genel başarım çok daha önemlidir.
Küçültmeyi geri alabilir miyim?
Biçimlendirme araçları HTML'i yeniden girintileyebilir, ama kaldırılan yorumlar geri gelmez. Özgün kaynağı saklayın ve küçültmeyi derleme sırasında yapın.
CDN kullanan bir sitede HTML'i küçültmeli miyim?
Derlemenizin bir parçasıysa evet. CDN'ler yanıtları sıkıştırır, ama küçültülmüş girdi yine de biraz daha küçük bir sıkıştırılmış çıktı ve biraz daha hızlı bir ayrıştırma üretir.
Küçültme doctype'ı ya da html etiketlerini kaldırır mı?
Hayır. Yalnızca yorumlar ve boşluklar kaldırılır. Belge yapısı, öznitelikler ve metin içeriği olduğu gibi kalır.
Satır içi SVG'im neden değişti?
SVG etiketleri arasındaki boşluk da diğer işaretlemeler gibi sıkıştırılır. SVG <text> öğelerinin içindeki metin, bilerek konmuş aralıkları kaybedebilir; böyle grafikleri küçülttükten sonra kontrol edin.