Kitaptan Bir Başka Kısım
script sayıları ve style sheet sayıları yükleniş biçimleri
Google Page Speed Insights aracını biraz inceleyip haşır neşir olduysanız en büyük problemi scriptler, Css lerde ve resimlerde yakaladığını kolaylıkla görebilirsiniz.
Bu durumun sebebi sayfaya harici bazı kaynaklardan veri çekilmesi gerektiği ve bu yüzden de sayfanın açılmasının geçe bırakıldığıdır. Günümüz modern tarayıcıları bir seferde 6 farklı kaynaktan veri çekebilmekteler bu sebeple bir seferde indirilen veri dosyası sayısı 6 adedi aşmamalıdır. ayrıca mümkün olduğu kadar js, css ve img dosyalarının açılışı sayfa açıldıktan sonraya bırakılması gerekmektedir ki sayfa tarayıcıya hızlı bir şekilde yüklensin.
Ayrıca sayfaya yüklenen js ve css dosyalar karmaşık bir şekilde değil belirli bir sıralama ile yüklenmesi gerekmektedir.
Önce CSS dosyalar Sonra Javascript dosyalar Sonra Resim dosyaları gibi
SEOwarp.net te bunun için bazı değişiklikler yaptım ve sonunda meta bölümünde çağrılan dosyalar şu şekli aldı.
<link rel="stylesheet" href="http://cdn.seowarp.net/cache/template/widgetkit-4b2872a6-362d9063.css" type="text/css" />
<link rel="apple-touch-icon-precomposed" href="http://cdn.seowarp.net/templates/yoo_sync/apple_touch_icon.png" />
<link rel="stylesheet" href="http://cdn.seowarp.net/cache/template/template-4567ceed.css" />
<script src="http://cdn.seowarp.net/cache/template/mootools-core-77359419.js" type="text/javascript" async></script>
<script src="http://cdn.seowarp.net/cache/template/core-86b26dff.js" type="text/javascript" async></script>
<script src="http://cdn.seowarp.net/cache/template/mootools-more-a58c6151.js" type="text/javascript"></script>
<script src="http://cdn.seowarp.net/cache/template/jquery-6384b557.js" type="text/javascript" async></script>
<script src="http://cdn.seowarp.net/cache/template/widgetkit-dd42e631-2b11eea7.js" type="text/javascript" async>
Burada Dikkat Etmişsinizdir. script çağrılarında async parametresi bulunmaktadır. bu parametre dosyanın asenkron bir şekilde çağrılacağı ve çağrılma esnasında tarayıcının script dosyasını beklememesi gerektiğidir. ;Ayrıca Mevcut Şablonda bulunan bir dosyayoda kısa olduğu için script çağrısından çıkardım ve html kodları arasına scripti gömdüm böylelikle gereksiz bir script çağrısından da kurtulmuş oldum
tercihe göre basit bir kodlama ile tüm css çağrılarından da kurtulunabilir.
function loadjscssfile(filename, filetype){
if (filetype=="js"){ //if filename is a external JavaScript file
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ //if filename is an external CSS file
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
function init(){
loadjscssfile("style/reset.css", "css");
loadjscssfile("style/style.css", "css");
}Burada loadjscssfile dosyası verile bir css dosyasını veya javascript dosyasını istenildiği anda çağırmaktadır. biz dosya çağrısını sayfa tamamen yüklendikten sonra yapmak üzere sona bırakabilirz bu durumda Jquery ile
$(document).ready(function(){
init();
});Çağrısı yapıldığında dosyalar sayfa tamamen yüklendikten sonra çağrılacaktır.
