CSS ve Javascript Sırası Nasıl Olmalıdır?

Stiller ve betiklerin sırasını optimize etme

Stil etiketleri ve stil sayfalarına yapılan çağrılar, senaryonuzdan önce yerleştirilmelidir. Bunu yaparsanız, sayfalarınız daha hızlı yüklenir, bunları aşağıda anlatacağız.

Çözüm, yalnızca stilinizin (css) sayfanızdaki komut dizilerinden daha yüksek olduğundan emin olmaktır. Google’un hızlı olduğunu bir ana nedeni vardır, birkaç farklı senaryolar ve stiller ve komut kombinasyonlarını test ederek bu  yola varmıştır.

Bir tarayıcı web sayfanızı yüklediğinde HTML alır ve daha sonra HTML’nizin isteyeceği her şeyi (css, scriptler, resimler, vb.) Aramaya başlar. Tarayıcılar bir betik indirmeye başladığında, betik yüklenene kadar başka bir şey yüklemeyi durdururlar. Google, “Tipik web sayfaları, yükleme sürelerinin% 80-90’ını ağ beklerken geçiriyor” diyor. Ağda engellenmiş harcanan süreyi azaltmak için kullanılan güçlü bir teknik, bazı tarayıcıların kaynak indirmelerini seri hale getirmesine neden olan kalıplardan kurtulmaktır.

Stiller ve betiklerin sırasını nasıl optimize ederim?

Web sayfanızdaki birkaç satırı değiştirerek html. Stillerin ve komut dizilerinin HTML’den çağrıldığı yer, baş bölümdür. İşte bir Varvy.com sayfasından bir örnek …

<head>
<meta name=description content="description"/>
<title>title</title>
<style>
page specific css code goes here
</style>
<script type="text/javascript">
javascript code goes here
</script>
</head>

Yukarıdaki kodda, stil talimatlarının sayfada komut satırından daha yüksek olduğunu görürsünüz. Sayfalarınızda, komut dosyalarına yapılan çağrılar, stiller ve stil sayfaları çağrıları öncesinde gerçekleşiyorsa, yalnızca bu sırayı değiştirebilirsiniz.

Teknik referanslar

Bu takip etmek oldukça basit bir kuraldır, ancak izlememiz gereken nedenler oldukça teknik olabilir.

Stillerin senaryoların önünde neden olması gerektiğinin kısa versiyonu CSS’nin sayfayı oluşturmada daha yüksek bir rol oynaması ve JavaScript ile kesintiye uğrarsa, sayfanın yüklenmesi daha uzun sürebilir. Aşağıda, bunu daha ayrıntılı olarak açıklayan yazmış olduğum yazı bulunmaktadır.

 

Kısa Özet
Yayın Tarihi
Konunun Adı
CSS ve Javascript Sırası Nasıl Olmalıdır?
Verilen Puan
51star1star1star1star1star

Leave a Reply

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