Sayfalarınızı Daha Hızlı Açmak İçin CSS Nasıl Küçültülür

Yazdığınız CSS, tarayıcıların ihtiyaç duymadığı şeylerle doludur: girintiler, boş satırlar, yorumlar ve dosyayı sizin için okunabilir kılan o yararlı boşluklar. Bunların hiçbiri sayfanın görünümünü değiştirmez, ama hepsi her indirmeye ağırlık katar. Küçültme bu fazlalığı söküp atar ve daha hızlı yüklenen daha küçük bir dosya bırakır. Bu rehber, küçültmenin ne yaptığını ve ücretsiz CSS Küçültücü aracı ile bunu temiz bir şekilde nasıl yapacağınızı açıklar.

CSS küçültme aslında ne demek

Küçültme, stil sayfanızı tarayıcıda yine aynı sonuçları üreten en kompakt biçimine yeniden yazar. Stil ile ilgili hiçbir şey değişmez; yalnızca baytlar küçülür. Bir küçültücü genellikle şunları kaldırır:

• Boşluklar, girintiler, satır sonları ve okunabilirlik için eklediğiniz boşluklar dahil.
• Yorumlar, çünkü tarayıcı zaten onları yok sayar.
• Gereksiz karakterler, kapanış küme parantezinden önceki son noktalı virgül gibi.

Çıktı, yoğun ve okunması zor tek bir bloktur. Asıl amaç da budur: tarayıcı okunabilirliği umursamaz ve indirmek zorunda kalmadığı her karakter küçük bir kazançtır.

Daha küçük bir stil sayfası sayfanızı neden hızlandırır

CSS, oluşturmayı engeller. Bir tarayıcı, stil sayfasını getirip ayrıştırana kadar sayfanızı çizmez; bu nedenle o dosyanın boyutu, yükleme sürenizin kritik yolunda doğrudan yer alır. Daha küçük bir dosya, ağ üzerinden daha az bayt ve daha hızlı bir ilk çizim demektir ve bu etki katlanarak artar:

• Yavaş veya mobil bağlantılardaki ziyaretçiler bunu en çok hissedenlerdir.
• Sayfa hızı bir sıralama sinyalidir, dolayısıyla daha hafif bir stil sayfası SEO’ya sessizce yardımcı olur.
• Daha düşük bant genişliği kullanımı, binlerce ziyaret boyunca birikir.

Küçültme, mevcut en ucuz performans kazanımlarından biridir. Sitenin görünümüne dair hiçbir şeyi değiştirmezsiniz, yine de her ziyaretçi daha az indirir.

Okunabilir bir kaynak tutun, küçültülmüş bir sürüm yayınlayın

Kaçınılması gereken hata, gerçekte düzenlediğiniz dosyayı küçültmektir. Küçültülmüş bir stil sayfasında çalışmak içler acısıdır, bu yüzden küçültmeyi kaynağınızın yerini alan bir şey olarak değil, bir derleme adımı olarak ele alın. Aklınızı korumanızı sağlayan iş akışı:

1. Sevdiğiniz tüm boşluklar ve yorumlarla, normal ve okunabilir .css dosyanızda yazın ve düzenleyin.
2. Yayınlamaya hazır olduğunuzda bir kopyasını küçültün ve styles.min.css gibi bir şey üretin.
3. Ziyaretçilerin küçük dosyayı indirmesi için küçültülmüş sürümü HTML’inize bağlayın.
4. Kaynağı düzenlemeye devam edin ve her sürümde yeniden küçültün.

Okunabilir dosyanız gerçeğin kaynağı olmaya devam eder; küçültülmüş dosya yalnızca yayınladığınız sürümdür.

CSS tarayıcınızda nasıl küçültülür

Ücretsiz CSS Küçültücü aracı tamamen tarayıcınızda çalışır, bu yüzden stil sayfanız asla bir sunucuya yüklenmez. Bu, bilinmeyen bir siteye yapıştırmayı tercih etmeyeceğiniz tescilli işler veya müşteri işleri için kullanışlıdır.

1. Aracı açın ve CSS’inizi yapıştırın veya bir .css dosyası yükleyin.
2. Küçültme adımını çalıştırın. Boşluklar ve yorumlar kendi cihazınızda söküp atılır.
3. Küçültülmüş çıktıyı .min.css dosyanıza kopyalayın veya doğrudan indirin.

Sekmede çalıştığı için, özel stil sayfalarını hiçbir yere göndermeden küçültebilirsiniz.

Ön yüzünüzün geri kalanını da küçültün

CSS, hızlı bir sayfanın yalnızca bir parçasıdır. JavaScript’iniz de tam olarak aynı işlemden yararlanır ve JS Küçültücü aracı betiklerinizden aynı tür fazlalığı söker; bu, yükleme süresi için çoğu zaman daha da önemlidir. İşaretlemeniz de kırpılabilir: HTML Küçültücü aracı sayfalarınızdan gereksiz boşlukları ve yorumları kaldırır.

İlgili bir ipucu: küçültme yalnızca bayt tasarrufu sağlar, bozuk kodu düzeltmez. Bir yapılandırmada veya veri özniteliğinde satır içi JSON varsa ve bir şeyler başarısız oluyorsa, yayınlamadan önce yapıyı doğrulamak için onu JSON Biçimlendirici içine yapıştırın.

Kısa özet

CSS’i küçültmek, hiçbir görsel değişiklik olmadan daha hızlı yüklenen daha küçük bir dosya üretmek için boşlukları ve yorumları söküp atar. Okunabilir, yorumlu kaynağınızı düzenlediğiniz dosya olarak tutun ve küçültmeyi, gerçekte bağladığınız küçük sürümü üreten bir derleme adımı olarak ele alın. İşi hızlı ve gizli bir şekilde halletmeniz gerektiğinde, ücretsiz CSS Küçültücü aracı bunu yükleme ve kayıt olmadan, doğrudan tarayıcınızda yapar.