Genel / Nasıl yapılır · 2 Ağustos 2016 10

#Css birleştirme




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..