Press "Enter" to skip to content

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

Buna benzer diğer yazılarım

 Meta Etiketler ve Görevleri Merhaba arkadaşlar. Meta Etiketler ve Görevleri hakkında genel bilgi vermeye çalışacağım. Arkadaşlar meta etiketleri gerek Google gerekse diğer ...
 Mozilla için Gerekli eklentiler #Mozilla için Gerekli eklentiler // Mozilla firefox  tarayıılar içinde en kaliteli en sağlam iş yapanıdır. Tabi bunun en önemli sebeplerinden biri de ...
 Güvenli SSH resetleme Merhabalar, SSH servisini güvenle yeniden derlemek için aşağıdaki komutu uygulayabilirsiniz. Bu otomatik tamamlayıcı, mevcut SSH sunucusu aracını ...
 Mysql ile MariDB nasıl değiştirilir ? Önemli: Bu kurulumun cPanel / WHM ekibi tarafından desteklenmediği kabul edilir. CPanel / WHM'nin artık sisteminizde MySQL'i korumayacağını unutmayın,...
 Video Scripti nasıl yapılır ? Pdo ile Video Scripti Kodlamak - Udemy Kursum Merhabalar dostlar, bu içerik tamamen Yavuz'a aittir destek amaçlı paylaştım ki daha çok insana ula...
 SSL Yeşil Bar Hatasının Merhaba arkadaşlar. Bu yazıda birçok kişinin başına gelen SSL Bağlantısı Hatasının Çözümü nasıl olur neden kaynaklıdır ? kısaca bahsedeyim. SSL ...

Bu yazı 6766 Defa okundu. Diğer yazılarımı da oku süper yazarım :)

||||

Ali Çömez
Ali Çömez

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 :)

View all posts

10 Comments

  1. Burak İşci Burak İşci

    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.

    Reply
    • Ali Çömez Ali Çömez

      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 😉

      Reply
  2. Servet Servet

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

    Reply
    • İskender Turgut İskender Turgut

      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

      Reply
  3. bahçeşehir çilingir bahçeşehir çilingir

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

    Reply
    • Ali Çömez Ali Çömez

      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.

      Reply
  4. Ahmet Ahmet

    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?

    Reply
  5. Ahmet Ahmet

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

    Reply
Bir cevap yazın

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