Ana Sayfa / Bilmedikleriniz / Duymadıklarınız / CSS ve JavaScript Dosyalarını Sıkıştırmak

CSS ve JavaScript Dosyalarını Sıkıştırmak

CSS ve JavaScript Dosyalarını Sıkıştırmak

CSS ve JavaScript dosyaları sitenizin arka planında çalışan ve hem görselini hemde kod yapısını oluşturmaya yarayan dosyalardır. Bu dosyalar yazılırken anlaşılır olması için alt alta ve detaylı kodlanır ki bu kodlar arasındaki boşluklar aslında gereksizdir. Gereksiz boşlukların çok olması sayfa açıldığında boş kısımlarından okunmasından dolayı gecikme yaşanmasını sağlar. Bunu söyle açıklayalım:

Elinizde 100 yapraklı bir defter olsun. Bu defterin ilk 10 sayfası dolu, sonraki 5 sayfası boş ve sonraki sayfalarında da 2 si yarı dolu 2 si tam dolu olsun. Siz bu 100 sayfayı okumak için boş da olsa dolu da olsa o sayfaya bakmak zorundasınız. Buda sizin için bir zaman kaybı demek. İşte bu dosyalarıda böyle düşünün. Sayfanızın açılması için internet tarayıcılar o boşlukları da okumak zorunda. Bu milisaniye bile olsa gecikmeye sebep olmakta. Bu aradaki milisaniye farkları ortadan kaldırmak içinde bu dosyaların sıkıştırılmasını tavsiye ediyoruz.

Peki bunu nasıl yapacaksınız?

İşin en kolay kısmı bilmeyenlerin bile yapabileceği online sıkıştırma siteleri. Aşağıda linklerini paylaştığım sayfalar online olarak kodlarınızı sıkıştırıyor. Sizin yapmanız gereken sıkıştırmak istediğiniz dosyayı bir html düzenleyeci program ile açmanız ve içindeki kodları kopyalayarak aşağıda yazdığım sitelerdeki ilgili yere yapıştırmanız. Daha sonra sistem otomatik olarak kodlarınızı düzenler ve size yeni halini verir. Sıkıştırılmış kodları tekrar html düzenleyici bir program ile ilgili dosyadaki kodlar ile değiştirerek dosyanızı optimize etmiş olursunuz. Bu sayede dosyalarınızın boyutu küçülür ve sitenizin açılış hızı gözle görülür şekilde değişir.

CSS Dosyalarını Sıkıştırmak İçin Tıklayın

JavaScript Dosyalarını Sıkıştırmak İçin Tıklayın

Örnek:

  • Normal CSS Kodları 
  • Sıkıştırıldıktan Sonraki CSS Kodları 
/* Post Head Area */

.single-post-thumb {
margin: 0 -1px !important;
line-height: 0 !important;
}

.single-post-thumb img {
width: 50%;
height: auto;
max-width: 100%;
}

.full-width .single-post-thumb {
margin: 0 !important;
}

.google-map iframe {
width: 100%;
}

.head-lightbox a {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}

.head-lightbox a:hover {
opacity: .8;
}

 .single-post-thumb{margin:0 -1px!important;line-height:0!important}.single-post-thumb img{width:50%;height:auto;max-width:100%}.full-width .single-post-thumb{margin:0!important}.google-map iframe{width:100%}.head-lightbox a{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.head-lightbox a:hover{opacity:.8}

 

Sıkıştırıldıktan sonra kodlar size karmaşık gibi gelebilir. Aslında burada yapılan işlem kodları değiştirmek değil aradaki gereksiz boşlukları kaldırmaktır.

Yorum Yazın

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir