Daha Hızlı Web Siteleri için Çevrimiçi CSS Küçültücü

Giriş

Yazılan CSS ile yayına çıkan CSS'in aynı görünmesi gerekmez. Bir stil dosyası üzerinde çalışırken girintiler, kurallar arasındaki boş satırlar ve bir kuralın neden var olduğunu anlatan yorumlar kodu okumayı ve bakımını kolaylaştırır. Bunların hiçbiri tarayıcının sayfayı çizmesine katkı sağlamaz — tarayıcıya yalnızca geçerli seçiciler, özellikler ve değerler gerekir; boşluklar ya da bir kuralın açıklanmış olması onu ilgilendirmez. Küçültme, sadece insan okuyucu için orada duran her şeyi ayıklar; böylece aynı kurallar tarayıcıya daha küçük bir dosyayla ulaşır. Kısa bir stil dosyasında kazanç birkaç kilobayt olabilir; uzun bir proje boyunca büyümüş, birkaç düzenleme turundan geçmiş ve denemelerden kalma yorumlar barındıran bir dosyada ise sayfa doğru görünmeden önce indirilmesi gereken yük gözle görülür biçimde azalabilir.

Bu araç CSS'inizi nasıl küçültür

CSS'i yapıştırıp “küçült” düğmesine basmak, boşlukları silmekten fazlasını yapar:

• Yorumlar silinir, tek bir istisnayla. Yaygın /*! ... */ biçimiyle yazılmış ya da içinde @license veya @preserve geçen bir yorum korunur. Bir yorumu, derleme araçlarının silmemesi gereken bir lisans ya da künye notu olarak işaretlemenin standart yolu budur. /* button hover state */ gibi sıradan bir açıklama yorumu ise silinir — lisans başlığınızı korumak istiyorsanız onu bu biçimlerden biriyle yazın.
• Boşluklar, satır sonları ve boş kurallar temizlenir. Bir ifadeyi diğerinden ayırmak için gerekmeyen ne varsa atılır; geriye kalan boş bir kural bloğu (içinde hiçbir şey olmayan .old-banner {} gibi bir seçici) ölü yük olarak taşınmak yerine tümüyle silinir.
• Bazı değerler anlamları değişmeden kısaltılır. #ffffff biçiminde yazılmış bir renk #fff olur, gereksiz sıfırlar kırpılır (0.500 değeri .5, -0px gibi bir değer ise 0 hâline gelir); font-weight için kullanılan normal ve bold anahtar sözcükleri de sayısal karşılıkları olan 400 ve 700 ile değiştirilir.
• CSS özel özellikleri ve calc() ifadeleri korunur. -- önekiyle tanımlanan değişkenler (örneğin --brand-color) ve calc() ifadeleri, sıradan bir değer gibi sıkıştırılsalar bozulacak noktalama ve boşluklara dayanır; bu yüzden boşluk temizleme ve sıfır kısaltma adımları çalışmadan önce bir kenara alınır, sonrasında da hiç dokunulmadan yerlerine konur.

Küçültmeden önce bilmeniz gerekenler

Bu araç kurallarınızı yeniden sıralamaz, birleştirmez ya da tekrar edenleri ayıklamaz — çıktıda aynı seçiciler aynı sırayla, yalnızca sıkıştırılmış hâlde yer alır. Sayfanızın aslında kullanmadığı CSS'i temizleyen bir şey arıyorsanız, aradığınız küçültücüden başka türden bir araçtır. Buradaki küçültme, kural yapısını yeniden yorumlayarak değil, boşlukları atıp değerleri kısaltarak çalıştığı için, iç içe geçmiş içerik — sözgelimi bir @media sorgusunun içindeki kurallar — olduğu yerde kalır; içeriği de her şey gibi sıkıştırılır.

Bu sitedeki dosya yükleme araçlarındaki gibi ayrı bir boyut sınırı yok: dosya yüklemek yerine doğrudan metin yapıştırıyorsunuz, dolayısıyla pratik tavan tarayıcınızın bir metin alanında rahatça taşıyabildiği kadarıdır; bu da elle çalıştığınız her stil dosyasını fazlasıyla kapsar. Bir sayfanın ya da projenin kendi stilleri değil de eksiksiz bir çatı paketi gibi gerçekten büyük bir stil dosyası söz konusuysa, tarayıcıdaki bir araca yapıştırmak yerine yayımlama sürecinizin parçası olan bir derleme adımı genelde daha uygundur.

Buradaki küçültme CSS'inizin ne yaptığını değiştirmez; yine de yayımlamadan ya da teslim etmeden önce küçültülmüş çıktıyla bir sayfaya hızlıca göz atmakta yarar var — gönderilmeden önce her şeyi son bir kez okuma alışkanlığının aynısı.

Bu araç ne zaman doğru seçim

• Bir ders projesini ya da kişisel siteyi yayına hazırlarken. Daha küçük bir CSS dosyası daha hızlı yüklenir; okul ağında ya da mobil veriyle bağlanan bir telefonda bunun etkisi sanıldığından büyüktür.
• Üretimdeki kodun gerçekte nasıl göründüğünü görmek için. Gerçek bir sitenin kaynağına bakıldığında çoğu zaman derste yazılanlara hiç benzemeyen bir CSS çıkar karşınıza — kendi stil dosyanızı küçültüp özgün hâliyle yan yana karşılaştırmak bunun nedenini somut olarak gösterir; ters yönde de CSS Beautifier ile güzel tamamlanır.
• Teslim tarihinden önce ya da kısıtlı barındırmada sayfa yükünü azaltmak için. Okulun sağladığı kimi barındırma hizmetlerinde alan ya da veri aktarımı sınırları dardır; dosyaları yüklemeden önce küçültmek bu sınırların altında kalmanın hızlı bir yoludur.

Bir stil dosyası üzerinde hâlâ çalışıyorsanız okunabilir sürümle devam edin ve yalnızca bir kez, yayımlamadan hemen önce küçültün — küçültme son adımdır, çalışma biçimi değil. Dosya boyutunun sayfa hızı açısından neden önemli olduğunu ayrıntılı görmek için daha hızlı siteler için hazırlanan bu CSS sıkıştırma rehberine bakabilirsiniz.

Örnek

Bir öğrenci web tasarımı dersi için kişisel sitesini tamamlıyor: yerleşim, renk teması ve duyarlı kurallar için ayrı stil dosyaları ve her birinde yol boyunca farklı fikirler denenirken bırakılmış yorumlar var. Projeyi teslim etmeden önce CSS'i birleştirip bu araca yapıştırıyor. Sayfa sonrasında birebir aynı görünüyor ve aynı şekilde çalışıyor, ama onunla birlikte giden dosya daha küçük ve siteyi kurarken yazılan deneme yanılma yorumlarını artık taşımıyor.

Sık sorulan sorular

Küçültmek sayfamın görünümünü değiştirir mi?

Hayır. Kurallar, seçiciler ve değerler korunur — yalnızca biçimlendirme, yorumlar ve birkaç değer kısaltması (onaltılık renkler ve gereksiz sıfırlar gibi) değişir; bunların hiçbiri sayfanın çizilmesini etkilemez.

CSS'imdeki yorumlara ne olur?

Sıradan yorumlar silinir. /*! ... */ biçiminde yazılmış ya da içinde @license veya @preserve geçen bir yorum korunur — bir lisans ya da künye notunu işaretlemenin standart yolu budur.

CSS değişkenlerini ve calc() ifadelerini destekliyor mu?

Evet. Özel özellikler ve calc() ifadeleri küçültme sırasında sıradan değerler gibi sıkıştırılmaz, korunur.

Boyut sınırı var mı?

Bu sitedeki dosya yükleme araçlarındaki gibi sabit bir sınır yok — dosya yüklemiyor, metin yapıştırıyorsunuz. Örneğin eksiksiz bir kitaplık paketi gibi çok büyük yapıştırmalar, yayımlama sürecinizin parçası olan bir derleme aracıyla daha iyi yönetilir.

Kodum bir yere kaydediliyor mu?

Hayır. Yapıştırdığınız CSS yalnızca küçültülmüş sonucu üretmek için işlenir; dosya olarak saklanmaz ve sonrasında tutulmaz. Kaydedilen tek şey aracın kullanıldığı bilgisidir, kodun kendisi değil.

Aynı anda birden fazla stil dosyası küçültebilir miyim?

Her seferinde tek bir CSS bloğu yapıştırıp küçültün. Birden fazla dosyayı birlikte küçültmeniz gerekiyorsa önce onları birleştirin; gerekmiyorsa işlemi her dosya için ayrı ayrı yineleyin.

Hangi ilgili araçları kullanabilirim?

İşlemi tersine çevirip küçültülmüş CSS'i yeniden okunur hâle getirmek için CSS Beautifier, başka kod işleri için de HTML Minifier ve JavaScript Beautifier araçlarını kullanabilirsiniz.