CSS sıkıştırma nedir? Nasıl yapılır? ~ Blog Düzenim

Özellikle site analiz sonuçlarında sıklıkla rastlamış olduğumuz uyarılardan biride CSS sıkıştırmalarıdır. Gtmetix gibi performans ölçücü sitelerde yaptığımız analizler neticesinde karşımıza çıkan ''optimize edin'' uyarısının neden bu kadar önemli olduğunu bu yazımda anlatmaya çalışacağım.

Öncelikle CSS nedir ne işe yarar bu konu üzerinde kısaca bilgilendirme yapayım.

Bir saat düşünün, saatin görsel dizaynı ile ilgili ne varsa hepsi CSS kodları tarafından sağlanır. Saatin motorunu ise javascript olarak düşünebilirsiniz. Neyin nerede olacağını ise HTML kodları ile gerçekleştiririz.

Sıkıştırma işlemi ise, düşündüğünüz gibi küçültme işlemidir. Peki CSS sıkıştırma işlemi gerekli midir?

Eğer yeterince kod bilginiz yoksa sıkıştırma işlemi yapmanızı önermiyorum.

Çünkü daha sonra CSS kodları içinde değişiklik yapmanız, kodlar sıkıştırıldığından dolayı hayli zorlaşacaktır. Neyin nerede olduğunu bulamaz hale geleceksiniz.

Sıradan bir web sitesini açtığınızda tarayıcınız o siteyi kısmen download eder. O yüzden dış kaynaktan çağırılan bir CSS ya da script dosyasına ulaşılmadığında muhtemelen o web sitesi bozuk ya da çok geç yüklenir. Sıkıştırma işleminin faydası ise, bu download hızını birazcıkta olsa düşürmektir.

Örneğin bir web sitesi hiçbir sıkıştırma işlemi yapmadan kaynak dosyalarını doğrudan 5 saniyede indiriyorsa, aynı web sitenin tüm dosyalarını sıkıştırmanızın ardından sayfa açılış hızının 3 ya da 4 saniyeye düşmesi muhtemeldir.

CSS sıkıştırma ve javascript sıkıştırma her zaman ayrı program ya da online araçlarla yapılır. Çünkü her iki yazılım dili birbirinden farklı olduğundan, sıkıştırma işlemi için de ayrı programlar kullanılır.

Aşağıda örneği inceleyerek sıkıştırma işlemi sonuçlarına göz atabilirsiniz.

Sıkıştırmadan önce :

/* CSS Page Navigation */
.pagenav {background:#fff;clear:both;margin:-5px 0 10px;margin-top:10px;padding:5px;text-align:center;font-size:13px;font-family:'Open Sans';font-weight:700;border-radius:3px;border:1px solid #eceeee;}
.pagenav span,.pagenav a {padding:6px 12px;display:inline-block;background-color:#838888;color:#fff;margin-left:2px;margin-right:2px;border-radius:3px;transition:all .5s linear;}
.pagenav .pages {background-color:#838888;color:#fff;transition:all .2s linear;}
.pagenav a:hover {background-color:#2e3639;color:#fff;transition:all .2s linear;}
.pagenav .current {background-color:#ea5c35;color:#fff;transition:all .2s linear;}
.pagenav .pages {display:none;}

Sıkıştırdıktan sonra :

.pagenav{background:#fff;clear:both;margin:-5px 0 10px;margin-top:10px;padding:5px;text-align:center;font-size:13px;font-family:'Open Sans';font-weight:700;border-radius:3px;border:1px solid #eceeee}.pagenav span,.pagenav a{padding:6px 12px;display:inline-block;background-color:#838888;color:#fff;margin-left:2px;margin-right:2px;border-radius:3px;transition:all .5s linear}.pagenav .pages{background-color:#838888;color:#fff;transition:all .2s linear}.pagenav a:hover{background-color:#2e3639;color:#fff;transition:all .2s linear}.pagenav .current{background-color:#ea5c35;color:#fff;transition:all .2s linear}.pagenav .pages{display:none}

Sıkıştırma işlemi için faydalanacağınız siteler :