CSS ve JS Sıkıştırma İşlemleri Nasıl Yapılır? - Bloglara Özel İpuçları - Önemli Bilgiler

Bu terimleri birçoğunuz duymuştur. Ben de ilk duyduğumda pek fazla bilgi bulamamıştım bu yüzden böyle bir yazı yazma gereği duydum. Umarım faydalı olur.

Js, Css sıkıştırma işlemi nedir ne işe yarar?

Öncelikle biraz ondan bahsedeyim.
Dışarıdan çağrılan ya da kendi blog temanız içinde bulunan stil kodlarının sıkıştırılması işlemidir. Sıkıştırma sonrasında blog sayfanızın açılış hızında olumlu etkileri de vardır.


Daha iyi anlamanız için şöyle bir örnek verelim.

Sıkıştırılmamış kod örneği:

#paylas { 
border:1px dotted #000; 
padding-left:65px; 
background: #ffc039; 
padding-top:10px; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
}
ul.sosyal { 
list-style:none; 
display:inline-block; 
margin:auto; 
} 
ul.sosyal li { 
display:inline; 
float:left; 
background-repeat:no-repeat; 
margin:auto; 
} 
ul.sosyal li a { 
display:block; 
width:50px; 
height:50px; 
padding-right:40px; 
position:relative; 
text-decoration:none; 
} 
ul.sosyal li.bh-facebook { 
background-image:url(https://lh5.googleusercontent.com/-JLfuSKykzKo/VCAE0bfHhzI/AAAAAAAALCk/S22NVeaImtA/s48/Facebook.png); 
} 
ul.sosyal li.bh-twitter { 
background-image:url(https://lh6.googleusercontent.com/-qzc9NDO1By4/VCAE0_XWIAI/AAAAAAAALCY/WvWgk1h6mW4/s48/Twitter2.png); 
} 
ul.sosyal li.bh-googleplus { 
background-image:url(https://lh4.googleusercontent.com/-ZqCBN69o3E4/VCAE0SHiZaI/AAAAAAAALCc/v5Nn_l0_ZWg/s48/Google%252B.png); 
} 
ul.sosyal li.bh-pinterest { 
background-image: url(https://lh6.googleusercontent.com/-I9KiNkQjXOE/VCAE0orP4aI/AAAAAAAALCU/zoDpDFCrn-c/s48/Pinterest.png); 
} 
ul.sosyal li.bh-linkedin { 
background-image:url(https://lh6.googleusercontent.com/-uyM4tazl7qY/VCAE0SkEB1I/AAAAAAAALCQ/b3bvQJNLeIs/s48/Linkedin.png); 
}

Aynı kodu sıkıştırdıktan sonra:
#paylas{border:1px dotted #000;padding-left:65px;background:#ffc039;padding-top:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}ul.sosyal{list-style:none;display:inline-block;margin:auto}ul.sosyal li{display:inline;float:left;background-repeat:no-repeat;margin:auto}ul.sosyal li a{display:block;width:50px;height:50px;padding-right:40px;position:relative;text-decoration:none}ul.sosyal li.bh-facebook{background-image:url(https://lh5.googleusercontent.com/-JLfuSKykzKo/VCAE0bfHhzI/AAAAAAAALCk/S22NVeaImtA/s48/Facebook.png)}ul.sosyal li.bh-twitter{background-image:url(https://lh6.googleusercontent.com/-qzc9NDO1By4/VCAE0_XWIAI/AAAAAAAALCY/WvWgk1h6mW4/s48/Twitter2.png)}ul.sosyal li.bh-googleplus{background-image:url(https://lh4.googleusercontent.com/-ZqCBN69o3E4/VCAE0SHiZaI/AAAAAAAALCc/v5Nn_l0_ZWg/s48/Google%252B.png)}ul.sosyal li.bh-pinterest{background-image:url(https://lh6.googleusercontent.com/-I9KiNkQjXOE/VCAE0orP4aI/AAAAAAAALCU/zoDpDFCrn-c/s48/Pinterest.png)}ul.sosyal li.bh-linkedin{background-image:url(https://lh6.googleusercontent.com/-uyM4tazl7qY/VCAE0SkEB1I/AAAAAAAALCQ/b3bvQJNLeIs/s48/Linkedin.png)}
İşte bu kadar yer kaplar. Şimdi sitenizin akıllı bir robot olduğunu düşünün. Görevi bu kodları okumak ve size yorumlamak yani göstermek. Siz kodları bu şekilde küçültürseniz onun okuma hızını en aza indirmiş olursunuz. Kafası karışmaz ve ulaşmak istediğine daha çabuk ulaşır. Böylelikle sayfanızın açılış hızını da arttırmış olursunuz.

Peki bu kodları sıkıştırmazsanız ne tür sorunlarla karşılarsınız?

Kodları sıkıştırmak zorunda değilsiniz. Fakat bir süre sonra kodlardaki yoğunluk nedeniyle sayfanızdaki ağırlaşmalar kaçınılmaz olacaktır. Ayrıca her kodu sıkıştırmanıza da gerek yoktur. Hangi kodları sıkıştırmalıyım diye düşünüyorsanız. İşte size bir yol gösterici.

gtmetrix  Sitenizin genel sağlık durumunu öğrenebileceğiniz bir web sayfasıdır. Sayfa adresinizi yazıp sonuçları incelediğinizde hangi kodları sıkıştırmanız önerildiyse o kodlar doğrultusunda çalışmalar yapabilirsiniz. Sayfa ingilizce olduğu için biraz ingilizce bilmek gerek tabi. Nitekim uyarılar şu şekildedir. Eğer mümkünse şu kodu sayfanızdan tamamen kaldırın ya da küçültün gibi.
Ya da tamamen Türkçe olan wmaraci sayfasından da sayfanızın durumunu analiz ederek sıkıştırmanız gereken kodlar hakkında bilgi edinebilirsiniz.

Kodları nasıl sıkıştıracağım?

Sıkıştırmanız gereken kodların tespitini yaptıktan sonra şimdi sıra sıkıştırma işleminde. Bu işlem için hizmet veren internet sitelerinden faydalanabilirsiniz. Bazıları hem css hem de js kodları için hizmet verirken bazıları ise sadece css ya da js kodları için imkan sunmaktadır.

Css kodlarınız için: csscompressor.com
Js kodlarınız için: jscompress.com

Sitelerinden faydalanabilirsiniz.

Dikkat etmeniz gereken hususlar!

  • Sıkıştırma işlemini her kod için uygulamanıza gerek yoktur. Sadece analiz sonucu önerilen kodlar üzerinde çalışmanız yeterli olacaktır.
  • Sıkıştırdığınız kodun javascprit ya da css mi olduğuna dikkat edin.
  • Yedek almayı unutmayın. Sıkıştırma işleminden sonra sayfanız hata verebilir. Ayrıca kodunuzun sıkıştırılmamış halini de her ihtimale karşı silmeyin.
  • Sıkıştırma yaptıktan sonra kodlar içinde düzenleme yapmak biraz eziyetli olabilir. Bunu göz önünde bulundurun. 
  • Sıkıştırma işlemi yaparken yüksek bir sıkıştırma yaparsanız kod içinde bazı karakterler silinebilir dikkat edin.

Fazla bilgi göz çıkarmaz

Kodları sıkıştırmanız her ne kadar sayfa açılış hızınız için önemli olsa da sayfaya yüklemiş olduğunuz yüksek boyutta ki görseller de olumsuz etkilemektedir. Eğer sayfanızda çok fazla resim paylaşıyorsanız bu uygulamayı göz ardı etmemenizde fayda var. Resim kalitelerinde hiç bir fark yoktur.

Sıkıştırılmış resim:
.JPG Formatlı resimleriniz için jpegmini ve 

.PNG Uzantılı resimleriniz için tinypng adresini ziyaret edebilirsiniz.


Yazar Hakkında; Kişisel bir blog yazarı olarak 1delinin günlükleri adıyla bir yıldır yazıyorum. Genellikle düşünebildiğim ve düşündükçe beni yoran her şeyi yazarak atıyorum içimden.  Adımı deli olarak koymamın tek nedeni ise, insanların kalıplaşmış ve anlamsız yaşamına göstermiş olduğum tepkidendir.

Yorumlar

  1. Js, Css kütübanesi kullanmak, host olarak başka yerde barınan , mesela WP bir site 3-5 kuruş için kalitesiz bir host firması ile çalışıyorsa yük oluşturan dataları hızlı bir sunucuda barındırmak , site yada sayfa açılış hızına olumlu katkı sağlar. Yada lokal host olarak kişisel server kullananlar için faydalıdır.
    lakin blogger veya üst düzey sunucularda barınan siteler için site yada sayfa açılış hızını düşürür. Mesela blogger zaten google sunucularda barınıyor , dolayısıyla şuan en hızlı yanıtı buradan alabilirsin , bunun dışındaki veri paketleri daha geç yanıt vereceğinden site hızını düşürür.
    Çok ayrıntı bir bilgi kısaca bloggerde kullanmayın, birde bunların ücretsiz olanlarına güven olmuyor, kapanıyor, değişiyor vs.

    YanıtlaSil
    Yanıtlar
    1. Blogger da kullanmayın demişsiniz de herhangi bir yayın ihlali durum söz konusu olmadıkça ben güvenilir olduğunu düşünüyorum. Hem google den sağlam host mu olur :)

      Sil
  2. Daha önce hiç denememiştim belki ilerleyen zamanlarda sıkıntı olursa deneyebilirim.Faydalı bir paylaşım olmuş,sağolasın..

    YanıtlaSil
  3. Çok faydalı bir paylaşım olmuş.Verdiğiniz bilgiler için teşekkürler :)

    YanıtlaSil

Yorum Gönder

Dikkat! Konu ile ilgili özgürce yorumunuzu yazabilirsiniz fakat lütfen yazacağınız yorum konu ile alakalı, hakaret içermeyen ve düzgün bir Türkçe ile yazılmış olsun. Aksi takdirde yorumunuz "spam" olarak kabul edilecektir. İlginiz için teşekkür ederim.