CSS Küçülterek Siteyi Hızlandır
Dosya boyutunu küçültmek için CSS'ten yorumları ve gereksiz boşlukları anında kaldırın.
Stil sayfanız cihazınızda kalır
Sonradan silinecek bir şey yok
Yayınlanmamış arayüzler için güvenli
Her modern tarayıcıda çalışır
Nasıl çalışır
- 1
CSS’inizi yapıştırın
Bir stil sayfası, bir bileşenin stilleri ya da yayına girmeden küçültmek istediğiniz bir blok.
- 2
Boyutları denetleyin
Küçültülmüş ile sıkıştırılmışı karşılaştırın ve özgün dosyayı değiştirmeden önce uyarıları okuyun.
- 3
Çıktıyı kopyalayın
Bir derleme çıktısına, bir `<style>` bloğuna ya da bir şablona taşıyın.
Neden bu araç
Bildirim sırası korunur
Hiçbir şey yeniden sıralanmaz, çünkü kademe eşitliği konumla çözer ve bir kuralı taşımak neyin işleneceğini değiştirir.
Yedekler olduğu gibi bırakılır
İki kez bildirilmiş bir özellik genellikle eski tarayıcılar için bilinçli bir yedektir, silinecek bir yineleme değil.
Güvensiz kısayol birleştirme yok
Uzun özellikleri bir kısayolda toplamak, anmadığınız kenarları sıfırlar; bu yüzden sessizce yapılmaz.
Sıkıştırılmış boyut gösterilir
Küçültülmüş sayının yanında gzip sayısı, çünkü tarayıcının indirdiği yalnızca ikincisidir.
Ait olduğu yerde ayrıştırılır
Tarayıcı zaten bir CSS motorudur, dolayısıyla hiçbir isteğe gerek yoktur ve dosya sayfada kalır.
Sınırsız ve kayıtsız
Tek bir kuralda ya da bütün bir çerçeve derlemesinde, istediğiniz kadar çalıştırın.
Sıra anlamdır ve bu, bir küçültücünün güvenle yapabileceğini sınırlar
CSS çekişen bildirimleri önce özgüllükle, sonra belge sırasıyla çözer: iki kuralın ağırlığı eşitse, sonra yazılan kazanır. Bu, konumu bir stil sayfasının anlamının parçası kılar ve saldırgan iyileştirmenin burada çoğu dilden daha riskli olmasının nedeni de budur. Aynı seçiciyi paylaşan bütün kuralları gruplayan, ya da daha iyi sıkıştırma için bildirimleri sıralayan, ya da aynı özellikleri bildirmesi tesadüf olan iki bloğu birleştiren bir araç, bayt bayt daha küçük ve görsel olarak farklı bir dosya üretebilir — çünkü eskiden en sonda gelen bir kural artık orada değildir. Her zaman güvenli olan azaltmalar hiçbir şeyi taşımayanlardır: boşlukları silmek, yorumları silmek ve anlamı sabit olan değerleri kısaltmak. Yeniden sıralayan her şey bütün kademenizi anlamayı gerektirir ki metin düzeyinde bir araç bunu yapmaz.
Aynı özelliğin iki kez yazılması genellikle bir yedektir, hata değil
“Yinelemeyi sil”in bir sayfayı bozduğu belirli durum budur. Aynı blokta bir özelliği iki kez bildirmek, eski tarayıcıları desteklemenin standart yoludur: `color: #ccc`’nin ardından `color: rgba(0, 0, 0, .5)` gelmesi, ikinciyi anlayan tarayıcının onu kullandığı, anlamayanın ise birinciye döndüğü anlamına gelir; çünkü ayrıştırılamayan bir bildirim ölümcül değil, atılır. Aynı örüntü `display: flex`’ten önceki `display: -webkit-box`’ı, bir `calc()` genişliğinden önceki piksel genişliğini ve bir gradyandan önceki düz rengi kapsar. Bir özelliğin iki bildirimini görüp yalnızca sonuncuyu tutan bir küçültücü desteği kaldırmıştır; yalnızca ilkini tutan ise özelliği kaldırmıştır. İkisi de yanlıştır ve doğru davranış çifti olduğu gibi bırakmaktır.
Uzun yazımı kısayolda birleştirmek anmadığınızı sıfırlar
Bu, CSS iyileştirmesindeki en incelikli doğruluk tuzağıdır. Bir kural `margin-top` ve `margin-left` ayarlıyorsa, bunları tek bir `margin` bildiriminde toplamak öteki iki kenarı olduğu gibi bırakmaz — bir kısayol, grubundaki her özelliği ayarlar, dolayısıyla anılmayan kenarlar başlangıç değerlerine sıfırlanır ve devralınan ya da daha önceki bir kuralın ayarladığı her şey atılır. `background` daha kötüdür, çünkü `background-size` ve `background-position` dahil uzun bir listeyi sıfırlar; bir birleştirme başka yerde bildirilmiş bir `background-size: cover`’ı sessizce geri alabilir. `font`, `line-height` ile aynı biçimde davranır. Bu birleştirmelerden gelen kazanç küçüktür ve arıza, dosyada iyi görünüp tarayıcıda yanlış görünen bir yerleşimdir; bu araç bu yüzden onları yapmaz.
Büyük kazanç kullanılmayan kurallardır ve göründüğünden zordur
Bir stil sayfasını küçültmek belki beşte birini kırpar. Bir sayfanın hiç kullanmadığı kuralları kaldırmak yüzde doksanını kırpabilir, çünkü genel amaçlı bir çerçeve her bileşen ve her varyant için stil gönderir, oysa belirli bir sayfa bir tutam kullanır. Asıl boyut orada — ve bunu güvenle yapmak, CSS’e özgü bir nedenle gerçekten zordur. Bir ayıklama aracı, şablonlarınızı ve kodunuzu sınıf adları için tarayıp eşleşen kuralları tutarak çalışır. Çalışma zamanında birleştirilmiş bir sınıf adını göremez; `"btn-" + variant` ona hiçbir şey gibi görünür ve `btn-danger` kuralı silinirken ona ihtiyaç duyan kod hâlâ çalışır. Dinamik kurulan, üçüncü taraf bir bileşen tarafından enjekte edilen ya da yüklemeden sonra JavaScript ile eklenen her şey bir istisna olarak listelenmelidir ve ayıklamayı bir düğme değil bir proje kılan da o listedir.
CSS işlemeyi engeller, dolayısıyla boyutu başka bir şeye mal olur
Boyutun neden önemli olduğu CSS için betiklerde olduğuyla aynı değildir. Bir tarayıcı, bekleyen bir stil sayfasının yeniden biçimlendirebileceği içeriği boyamaz; dolayısıyla baştaki bir stil sayfası işlemeyi engeller: o gelip ayrıştırılana kadar sayfa boş kalır. Bu, CSS ağırlığının maliyetini doğrudan ilk boyamaya yükler ki yüklemenin kullanıcıların en çok fark ettiği kısmı odur ve kritik stil sayfasını küçük tutmanın en güçlü gerekçesidir. Standart öğüdün, görünür alan için gereken az miktarda CSS’i satır içine almak ve gerisini eşzamansız yüklemek olmasını da açıklar — küçültmenin sağladığından çok daha fazla yardım eden yapısal bir değişiklik. Yalnızca bir şey yapabilecekseniz, stil sayfasını bölmek onu sıkıştırmayı geçer.
Bu tür dosyada yerel küçültme neden önemlidir
Bir stil sayfası, uygulama kodundan daha az apaçık gizlidir ve yine de insanların fark ettiğinden fazlasını betimler. Sınıf adları arayüzünüzü haritalar: henüz yayınlanmamış bileşenleri, hâlâ süren bir deneye ait varyantları, yalnızca yöneticilerin gördüğü panelleri ve bir bayrağın arkasındaki özellikleri adlandırır. CSS’teki yorumlar, başka yerlerdeki yorumların olmadığı bir açık sözlülüktedir — bir müşteri adı, hangi tarayıcının bozulduğuna dair bir not, bir değerin belirli bir sürümdeki hata için geçici çözüm olduğunu anımsatan bir satır. Bir üretim stil sayfasını barındırılan bir küçültücüye yapıştırmak, yerel olarak da elde edilebilecek bir boyut azalması için bunların tümünü teslim eder. Bu araç dosyayı sayfada işler ve hiçbir şey iletmez; bunu geliştirici araçlarının Ağ sekmesinde doğrulayabilirsiniz.
Kaçınılması gereken yaygın hatalar
- Bir blokta iki kez bildirilmiş bir özelliği silmek. Bu neredeyse her zaman eski tarayıcılar için bilinçli bir yedektir — çiftten yalnızca birini tutmak ya desteği ya özelliği kaldırır.
- Uzun özellikleri bir kısayolda birleştirmek. Bir kısayol grubundaki her özelliği ayarlar, dolayısıyla anmadığınız kenarlar olduğu gibi bırakılmak yerine başlangıç değerlerine sıfırlanır.
- Bir aracın daha iyi sıkıştırma için kuralları yeniden sıralamasına ya da gruplamasına izin vermek. Kademe eşitliği belge sırasıyla çözer, dolayısıyla daha küçük bir dosya farklı işlenebilir.
- Küçültmenin stil sayfası boyutunu çözmesini beklemek. Kullanılmayan kurallar genellikle yığının kendisidir; küçültme, kullanılmayan CSS geçişinin kırptığının yaklaşık beşte birini kırpar.
- Dinamik sınıf adlarını listelemeden kullanılmayan CSS’i ayıklamak. `"btn-" + variant` diye kurulan bir ad tarayıcıya görünmezdir, dolayısıyla ihtiyaç duyduğu kural silinirken kod hâlâ çalışır.
Karşılaştırma
| Ölçüt | Bu araç | Çevrimiçi küçültücüler | Bir derleme hattı |
|---|---|---|---|
| Stil sayfası sunucuya gönderilir | Asla | Genellikle evet | Hayır |
| Bildirim sırasını korur | Her zaman | Genellikle | Genellikle |
| Tarayıcı yedeklerini tutar | Evet | Değişir | Yapılandırılabilir |
| Kullanılmayan kuralları kaldırır | Hayır | Hayır | Bir ayıklama adımıyla |
| Sıkıştırılmış boyut gösterilir | Evet | Nadiren | Bir eklentiyle |
| Fiyat | Ücretsiz | Ücretsiz / ücretli paket | Ücretsiz |
Özellikler
Boşluk ve yorum silme
Ayrıştırıcının yok saydığı her şey atılır, kurallarınızı gruplayan boş satırlar dahil.
Güvenli değer kısaltma
Renkler en kısa eşdeğer biçimine indirilir ve sıfır birimleri kırpılır — anlamın değişemeyeceği yerlerde.
Tasarımı gereği sıra güvenli
Kurallar konumlarını korur, böylece özgüllük ve kaynak sırası aynı biçimde çözülmeyi sürdürür.
Her iki boyut bildirilir
Ham ve sıkıştırılmış, çünkü sıkıştırma küçültmenin kaldırdığının çoğunu zaten toplar.
Modern söz dizimi anlaşılır
Özel özellikler, iç içe yazım, kapsayıcı sorguları ve katmanlar bozulmadan geçer.
Büyük stil sayfalarını kaldırır
Bütün bir çerçeve derlemesi yükleme ya da boyut sınırı olmadan küçültülür.
Kurulum gerekmez
Derleme aracı, çalışma ortamı ya da bağımlılık yok — web sayfasında çalışır.
Arapça ve RTL uyumlu
Sağdan sola Arapça dahil sekiz dilde tam arayüz.
Varsayılan olarak güvenli
HTTPS üzerinden sunulur, içerik izleme ve üçüncü tarafa yükleme yoktur.
Kimler kullanıyor
Ön uç geliştiricileri
Bir derleme adımından geçmeyen bir stil sayfasını küçültmek.
Web performansı mühendisleri
İlk boyamayı kapatan, işlemeyi engelleyen stil sayfasını küçültmek.
E-posta geliştiricileri
Boyut sınırı olan bir şablona satır içi alınması gereken stilleri sıkıştırmak.
Stil bloğu gömen herkes
Bileşen stillerini bir sayfa başlığına gömülebilecek kadar küçültmek.
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.