Web sitenisi hızlandırma 2 – CSS ve JS dosyalarını birleştirme
Merhaba arkadaşlar bugün sizlere web sitenizi nasıl hızlandırırsınız onun 2.bölümünü yazıcam.
ilk bölümünü
Yukarıdaki linkten bulabilirsiniz.
Şimdi ilk yazımda anlattığım gibi sitenin içindeki sorgu sayısı CSS,JS ve resim dosyalarının çağrılmasıyla artıyor. ilk yazımda resim dosyalarının optimize edilip küçültülmesini anlatmıştım bu yazımda ise CSS ve JS dosyalarının küçültüp veya birleştirip nasıl sorgu sayısını azaltıcağınızı göstericem.
İlk olarak bir kaç bilgi vermek istiyorum. Siteniz ilk yüklendiğinde CSS dosyaları önce yüklenmeli. Neden derseniz googlenin hız optizimasyon aracında bunun sitenizin hız kaybı olduğunu söylüyor. Onun için ilk önce css dosyalarımızdan başlıyacağız.
CSS dosyasını sıkıştırma.
http://www.csscompressor.com/
Yukarıdaki linkten Css dosyanızı sıkıştırabilirsiniz aslında sıkıştırmadan kasıt gereksiz boşlukları silme CSS”i siz yazıyorsanız eğer buna dikkat ederseniz kendinizde sıkıştırmış bir CSs yazmış olursunuz.
CSS dosyası birleştirme
Birden fazla CSS dosyanız var diyelim bazen bi bakıyorsunuz ki 10 taneyi geçmiş bunları tek tek yüklemek tarayıcı açısından da büyük eziyor o yüzden bunları tek bir css içinde toplayabiliriz.
@import url("reset.css") screen; @import url("css2.css") screen;
yukarıdaki kod ile css dosyanızın içerisine diğer CSS dosyalarınızın yolunu belirterek tek bir dosyada yükleyebilirsiniz. Ve araştırdığıma göre import ile yüklenen cssler link ile yüklenenden daha önce derleniyormuş ama şöyle bir kötü yanı var eski tarayıcılarda import kodu çalışmıyor gerçi şimdi eski tarayıcı kalmadı herşey kontrol altında 🙂
buradan yapamaz iseniz css import kodunu biraz araştırın.
Bu yukarıdakini yaptıktan sonra htmlniz sadece bir tane link etiketi kullanarak bütün cssleri yükleyebilirsiniz.
JS ön bilgi
Js dosyaları yukarıdan aşağıya derlenir o yüzden js dosyalarının sırası bile önemlidir yani diyelim Jquery ile çalışıyorsunuz jquery kütüphanesi en başta olmalı sonradan eklerseniz kütüphaneyi görmez ve kodunuz çalışmaz.
JS dosyası sıkıştırma
http://jscompress.com/
yukarıdaki adresten JS dosyasınızı sıkıştırabilirsiniz tabi yine boşlukları silme gibi işlemler yapıyor.
js dosyalarını sağlam bir birleştirme bulamadım ama size başka bir tavsiyem var eğer biraz js den anlıyorsanız dosyaları tek tek açın ve içlerine bakın 50 satırı geçmiyorsa tek tek kopyala yapıştır yaparak tek bir js dosyasında birleştirin. Sonra o js dosyasını yükleyerek birleştirmiş olursunuz.
Şimdilik bu kadar kolay gelsin.