12 Eki, 2016

" Harici’mi Satır içi’mi ? "

Merhabalar efenim, Bu yazıda Harici’mi Satır içi’mi ? sorusunu düşünüp tartışalım diilerseniz.

Harici’mi Satır içi’mi ?

Harici’mi Satır içi’mi ?

Harici’mi Satır içi’mi ? sorusunu neye dayanarak soruyorsun ? Öncelikle bu soruyu Webtasarımcılar için Javascript ve Css Dosyaları için soruyorum, Dışardan çağırmak mı yoksa Satır içi mi ?

Öncelikle İmport(Harici) tekniğini inceleyelim dilerseniz;

Bu method ile css, js dosyamızı oluşturacak kodları; script.js veya stil.css  olarak kaydettiğimizi düşünelim, Dosyamızı kök dizinde bulunduğunu varsayarsak puplic_html/stil.css olarak bizim bunu yine kök dizindeki html şablonuna çağırdığımızı düşünelim,


<link rel="stylesheet" type="text/css" href="ornek.css" />
İmport tekniği olarak;
<style type="text/css">
    @import "ornek.css";
  </style>

Tarayıcılar, içeriği ekranda göstermeden önce dış CSS dosyalarını engeller. Bu durum, ek ağ gecikmesine neden olur ve içeriğin ekranda görüntülenmesi için gereken süreyi artırır. [PageSpeed Insights]

Dolayısıyla Uzaktan çağırılan dosyanın tarayıcıda yorumlanıp diğer kodları okumasına geçme sayfanın yüklenme süresini artıracağından pek kullanışlı bir yöntem değil, Ben önermiyorum.

Peki 5k satır sayısına sahip bir css dosyasını satır için nasıl yapacağız ?  mecburi hariciden çağıracağız diyebilirsiniz, Burada devreye Css compressor   Giriyor, Uzaktan çağrılan dosyayı masimum derecede küçülterek yüklenme hızını artıracaktır, küçültekten kasıt olarak css kodlarınıza zarar vermeden gereksiz boşluklardan ve açıklama satırlarından arındırarak temiz ve seıkıştırılmış bir css dosyasına sahip olursunuz.

Bu css dosyasını da Sayfanın başında (header) içinde değilde sayfanın alt kısmında (Footer) içinde çağırırsanız tarayıcı sayfayı yukardan aşağı okuyarak geldiğini düşünürsek sizin css dosyasına ulaşana kadar zaten sayfayı yüklemiş olacaktır. css ulaştığında da zaten sitenin genel stil yapısını üzerine giydireceğinden yüklenme süresı oldukça artacaktır.

Aynı mevzu Javascript dosyaları için de aynı mantık geçerlidir, header da değil footer’da yüklemek geçerlidir. Peki js dosyasını nasıl küçültüp sıkıştırırız diyorsanız onun için de js compressor sitesini kullanabilirsiniz.

Harici’mi Satır içi’mi ?

Harici’mi Satır içi’mi ?

Satır içi Css / js

Bu mantık çok daha hızlı ve protik olmasına rağmen çok fazla kullanılmaz (büyük çalışmalarda zahmetli olduğu için) örneğin 5k bir stil dosyası ile halledebildiğiniz bir tasarımın yapımı 20 gün sürdüğünü düşünürsek, Satır içi ile 25 gün süreceğini varsayabilirsiniz.

Örneğini göstermek gerekirse hemen şöyle bir;

<div style="color:red">Deneme yazımız</div>

Bu şekilde tüm Html eiketlerine css kod gömerek stillendirmek çok hızlı ve kkullanışlı olmasına karşın kullanım zorluğu okunabilirlik ve sizden sonra gelen’in düzenlemesinde karşılaşacağı sorluk gibi nedenlerden dolayı pek kullanılmaz, ki zaten büyük css/js kodlarını satır içine yazmak büyük yürek ister 🙂

Yukardaki gibi satır içine ek olarak sayfa başında stil etiketi içinde de kullanılabilir,

 <style type="text/css">
    div{
      color:red;
    }
  </style>

Şeklinde de yapılabilir ancak dediğim gibi kullanıma elverişli değil, her sayfa için farklı css ile fazladan zaman kaybına gerek yok, diye düşünüyorum.

Bu konulardaki Css ve Javascript kullanımı hakkında PageSpeed Insights  ‘ta gerekli dökümanları ve anlatımları bulabilirsiniz.

Diğer bir makalemde Css birleştirme üzerine anlatımım mevcut okumanızı öneririm.

Yukarda belirttiğim yapılandırma ve şekiller benim görüşümdür, Aksini düşünen mantıklı bir açıklama gönderebilir 🙂

 

Bu yazı 1161 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. İzzet Can dedi ki:

    stil.css demişsin kod geçince ornek.css yapmışsın 🙂 kafanda ne vardı acaba bu yazıyı yazarken 😀

  2. Burak dedi ki:

    Güzel paylaşım eline sağlık, bence de satıriçi daha hızlı yorumlanma açısından. ve hız konnusunda da daha etkilidir ancak yüzlerce satır css kodunu html içine gömmek tabiki saçmalık 😀

    • Ali Çömez dedi ki:

      Basit işleri sarıriçi yapmak daha iyidir yani, sizin düzenlemeleriniz için örnek kenera bir çiçek böcek koyacaksanız style.ss yerine satır içine gömmek daha mantıklı.

  3. Cem dedi ki:

    Güzel bir konuya değinmişsiniz. Teşekkürler.

Bir cevap yazın

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