HTML kodunu dosya boyutunu azaltmak ve web yükleme hızını artırmak için anında küçültün.
Giriş
Düzenlemek için yazdığınız HTML ile tarayıcıya giden HTML'in aynı dosya olması gerekmez. Siz sayfayı kurarken girinti ve satır sonları yapıyı izlemeyi kolaylaştırır, işaretlemede bıraktığınız açıklamalar da bölümleri anlatır ya da sonrası için not düşer. Tarayıcının sayfayı doğru göstermek için bunların hiçbirine ihtiyacı yoktur — ona yalnızca geçerli, düzgün kurulmuş etiketler gerekir. Küçültme, orada sırf insan okur diye duran şeyleri ayıklar; böylece aynı sayfa tarayıcıya daha küçük bir dosya olarak ulaşır.
Bu Araç HTML'inizi Nasıl Küçültür
- Bütün açıklamalar istisnasız kaldırılır. Her
<!-- ... -->bloku ayıklanır; eski tarz Internet Explorer koşullu açıklamaları da, saklamak isteyebileceğiniz bir lisans ya da atıf notu gibi herhangi bir açıklama da buna dahildir. Bu sitedeki CSS küçültücünün desteklediği “şunu koru” anlayışının burada bir karşılığı yoktur — bir açıklama sizin için önemliyse onu çalışma kopyanızda tutun, küçültmeden sağ çıkacağına güvenmeyin. <pre>,<code>,<script>ve<textarea>etiketlerinin içindeki içerik boşluklarını birebir korur. Bu etiketlerin içinde satır sonları ve aralıklar anlam taşır — bir kod örneği ya da önceden biçimlendirilmiş bir metin bloku, iç aralıkları daraltılırsa yanlış görünür — ve bu araç o boşluklara dokunmaz.- Başka yerlerdeki boşluk daraltılır, silinmez. İki satır içi öge arasındaki (örneğin cümlenin ortasındaki bir bağlantı) art arda gelen boşluk, sekme ya da satır sonu dizisi, bütünüyle kaldırılmak yerine tek bir boşluğa indirilir; böylece yan yana duran sözcükler birbirine yapışmaz. Yalnızca en üst düzey yapısal etiketler arasındaki ve
<head>içindeki boşluk tümüyle kırpılır, çünkü orada hiçbir şey akan metin olarak görünmez zaten. - Kendi kendini kapatan etiketlerdeki sondaki eğik çizgi sadeleştirilir.
<img src="photo.jpg" />şuna dönüşür:<img src="photo.jpg">— ikisi de geçerli HTML'dir ve kısa biçim, sayfadaki kendi kendini kapatan her etiketten birkaç karakter kazandırır.
Tek Gerçek Risk: Önceden Biçimlendirilmiş İçerikteki Açıklamalar
Açıklama ayıklaması, araç herhangi bir şeyin hangi etiketin içinde olduğuna bakmadan önce, girdinizin tamamı üzerinde ilk geçişte yapıldığından, silinmesi gereken sıradan bir açıklama ile bir <pre> ya da <code> bloku içinde bilerek gösterdiğiniz <!-- ... --> metninin kendisini birbirinden ayırt edemez — örneğin bir öğreticide HTML açıklamasının neye benzediğini gösteren bir kod örneğini. Tam bu durumda, aynı blokun içinde çevresindeki boşluk doğru korunsa bile örnek metin ayıklanıp gider. Bu yalnızca, önceden biçimlendirilmiş bir blokun içinde <!-- ve --> karakterlerini harfiyen barındıran metni etkiler; gösterdiği şeyin parçası olarak açıklama söz dizimi içermeyen sıradan kod örneklerini etkilemez.
Küçültmeden Önce Bilinmesi Gerekenler
Bu araç yalnızca biçimlendirmeyi değiştirir — ögeleri yeniden sıralamaz, etiketleri birleştirmez ve sayfanın gerçek yapısından bir şey çıkarmaz. Yapıştırdığınız metin için boyut sınırı yoktur, çünkü dosya yüklemek yerine doğrudan metinle çalışıyorsunuz; bir sayfanın uzun da olsa tam HTML'i, kısa bir parça gibi yapıştırılır ve aynı biçimde işlenir.
Her küçültücüde olduğu gibi, küçültülmüş çıktıyı yayımlamadan önce bir tarayıcıda açmakta yarar var — dönüştürme güvenilmez olduğundan değil, bir sayfanın yayına girmeden önce beklediğiniz gibi göründüğünü ve davrandığını doğrulamak iyi bir alışkanlık olduğundan; tıpkı teslim etmeden ya da yayımlamadan önce başka her şeyi gözden geçirdiğiniz gibi.
Bu Aracın Doğru Seçim Olduğu Durumlar
- Düzenlemeyi bitirdikten sonra bir sayfayı yayına hazırlarken. Sayfayı kurarken okunur sürümle çalışmayı sürdürün ve tam yayına girmeden hemen önce bir kez küçültün — çalışma biçimi olarak değil.
- Kısıtlı barındırmada ya da yavaş bağlantıda sayfa ağırlığını düşürürken. Daha küçük bir HTML dosyası daha hızlı iner; bu da bir okul ağında ya da mobil veriyle bağlanan bir telefonda göründüğünden daha çok fark eder.
- Yayındaki HTML'in gerçekte neye benzediğini görmek için kaynak kodu karşılaştırırken. Gerçek bir web sitesinin kaynağına bakmak, çoğu kez elle yazdığınıza hiç benzemeyen sıkışık bir HTML gösterir — kendi sayfanızı küçültüp ikisini yan yana koymak, bunun nedenini somut biçimde görmenin bir yoludur.
Örnek
Bir öğrenci web tasarımı dersi için kişisel bir portfolyo sayfasını bitiriyor; işaretlemenin içinde önceki taslaklardan kalma açıklamalar var, ayrıca öğrendiklerini anlatmanın bir parçası olarak bir <pre> bloku içinde HTML açıklamasının neye benzediğini gösteren bir kod örneği duruyor. Projeyi teslim etmeden önce sayfanın tamamını buraya yapıştırıyor. Görüntülenen sayfa bire bir aynı görünüyor ve aynı davranıyor, taslaktan kalan açıklamalar gitmiş ve dosya küçülmüş durumda — ama kod örneğinin içindeki açıklama örneği de kaybolmuş, çünkü içinde harfiyen <!--/--> karakterleri geçiyordu. O tek örneği tam açıklama söz diziminden kaçınacak şekilde düzeltmek ya da o bölümü küçültülen metnin dışında bırakmak sorunu ortadan kaldırır.
Sık Sorulan Sorular
Küçültmek sayfamın görünüşünü değiştirir mi?
Hayır. Etiketler ve yapı korunur — yalnızca biçimlendirme, boşluk ve açıklamalar değişir; bunların hiçbiri sayfanın nasıl göründüğünü etkilemez.
HTML'imdeki açıklamalara ne olur?
Hepsi istisnasız kaldırılır — bu sitedeki CSS küçültücünün tersine, bir açıklamayı korunacak diye işaretlemenin bir yolu yoktur.
<pre> ya da <code> blokunun içindeki boşluk korunuyor mu?
Evet; o etiketlerin ve ayrıca <script> ile <textarea> ögelerinin içindeki aralıklar ve satır sonları tam yazdığınız gibi bırakılır. Tek istisna, o içeriğin gösterdiğiniz metin olarak harfiyen açıklama söz dizimi (<!-- -->) barındırmasıdır — o, gerçek açıklamalarla birlikte kaldırılır; çünkü açıklama ayıklaması, araç bunun hangi etiketin içinde olduğuna bakmadan önce yapılır.
Boyut sınırı var mı?
Yok — dosya yüklemiyor, metin yapıştırıyorsunuz; dolayısıyla bu sitedeki dosya yükleme araçlarındaki gibi sabit bir sınır burada söz konusu değil.
Kodum bir yerde saklanıyor mu?
Hayır. Yapıştırılan HTML, küçültülmüş sonucu üretmek için işlenir; dosya olarak saklanmaz ve sonrasında tutulmaz. Yalnızca aracın kullanıldığı kaydedilir, kodun kendisi değil.
Hangi ilgili araçları kullanabilirim?
Diğer kod biçimleri için küçültmek üzere CSS Minifier ve JavaScript Minifier, işlemi tersine çevirmek üzere CSS Beautifier ve JavaScript Beautifier araçlarını kullanın.
