Css 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..
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.
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 😉
Css birleştirmek yerine CDN kullanmak daha mantıklı bence 🙂 css siteyi ne kadar yavaşlatabilir ki :))))))
CSS Birleştirmenin yönteminin CDN ile ne alakası var CSS'ler CDN'de yüklü olsa bile birleştirme işlemi olmayınca yine tek tek yüklüyor buda sitemiz ve seo açısından kötü bir puan
CDN'den bahseden yok zaten sen nereden çıkardın ki 🙂
hocam teşekkürler ancak şöyle bir sorum olacak css dosyalarımı tektek yüklemek zorunda kalıyor çözüm nedir
Tek tek yüklemek derken anlamadım ama şöyle birşey yapabilirsin;
Tüm ss dosyalarını tek bir dosya içinde birleştirirsen olabilir.
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?
Css import özelliğinden faydalanın.
Teşekkürler güzel yazı olmuş eline sağlık