2 Ağu, 2016

" Css birleştirme "

Css birleştirmeCss birleştirme Kod yazarları ve Web site sahipleri için site sayfalarının yavaş açılması çok büyük bir sorundur. Bu sorun yerine göre ziyaretçi yerine göre müşteri kitlenizi bile etkileyebilir.
Bu neden ile farklı testler ile farklı çalışmalar yapılabilir site dosyaları üzerinde, Bende bu yazıda Css dosyalarını birleştirmeyi anlatacağım.
Css dosyalarımızı birleştirerek sitelerimizi hızlandırmayı anlatacağım Ama bu yönteme bağlı olarak tabiki sitenizin uçacağını dşünmeyin 🙂 Css ile site hızlandırma işlemi tabiki önemli ama tamamen bu işleme güvenmeyin yani ama uygulamanızı tavsiye ederim.
Başlayalım şimdi şöyle olduğunu varsayarsak;
<link href="./assets/css/style.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="./assets/css/responsive.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="./assets/css/animate.min.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="./assets/css/fontello.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="./assets/css/jcarousel.responsive.css" media="screen" rel="stylesheet" type="text/css" />

şimdi yapmamız gereken şey css dosyalarımızı tek bir dosya içinde toplamak bunu nasılmı yaparız şimdi detaylara girelim hemen 🙂 şimdi yukardaki örnekte verdiğimiz css dosyalarımızın ana dosyası hangisi ise açıp en başa bu şekilde dahil ediyoruz;

@import "./responsive.css";
@import "./animate.min.css";
@import "./fontello.css";
@import "./jcarousel.responsive.css";
Şimdi şöyle bir durum var öncelikle css ve javascript dosyalarınızı sıkıştırma yapmanızı tavsiye ederim bu sıkıştırma için ;

CSS dosyasını sıkıştırma.
http://www.csscompressor.com/

JS dosyası sıkıştırma
http://jscompress.com/

Yukarda birleştirme işlemi yaptıktan sonra sıkıştırma da yaparak sitenizin yüklenme hızını bir nebze de olsa artırabilirsiniz.

Alternatif kaynakları da inceleyebilirsiniz..

Bu yazı 6658 Defa okundu, Beğendiyseniz üstteki benzer yazıları okumanızı öneririm, isterseniz site içinde farklı içerikleri arama yapabilirsiniz.

Ali Çömez / Slaweally

Kaldırımda yürürken beyaz çizgilere basmamaya çalışan, Sabah yüzünü yıkarken dirseklerinden su sızmasından nefret eden, Dönerle ayranı aynı anda bitirebilen, son dakikada otobüsü kaçırsada grur yapıp arkasından koşmayan... bir insanım :)

  1. Burak İşci dedi ki:

    Evet verimli bir yöntem ancak @import tekniği arama motorları tarafından pek önerilmiyor, bunun yerine mümkünse tüm CSS dosyalarının içinde ki kodları tek bir dosya da toplamak daha iyi olacaktır ancak bu nokta da da bazı kodların çakışabileceğine dikkat etmek lazım.

    • Ali Çömez dedi ki:

      Evet arama motorları konusunda senin bahsettiğin mevzu var. tek dosyada toplamak ta dosya boyutunu artıracağı için yüklenme hızını artıracaktır. yerine göre tarayıcı çökmeleri görülecektir. dolayısıyla @import arama motorları tarafından desteklenmese de hala en iyi çözüm diyebiliriz 😉

  2. Servet dedi ki:

    Css birleştirmek yerine CDN kullanmak daha mantıklı bence 🙂 css siteyi ne kadar yavaşlatabilir ki :))))))

  3. hocam teşekkürler ancak şöyle bir sorum olacak css dosyalarımı tektek yüklemek zorunda kalıyor çözüm nedir

  4. Ahmet dedi ki:

    Hocam merhaba şimdi mesala

    other.css dosyamız var bunu ana.css dosyasının içine yapıştırıp mı tek bir dosya halinde getiriyoruz?

  5. Ahmet dedi ki:

    Teşekkürler güzel yazı olmuş eline sağlık

Bir Cevap Yazın

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

Spam olmadığınızı doğrulamak için aşağıdaki alana slaweally yazın