Javascript Dosyalarının Yüklenmesini Sonraya Bırakmak Çözümü

Merhaba Arkadaşlar

Bildiğiniz üzere Google Pagespeed kullanan arkadaşlarımız Oluşturmayı önleyen JavaScript ekranın üst kısmındaki içerikten kaldırın hatasını alıyorlardı.Google’in bu hataya çözüm olarak gösterdiği öneri ise hem html dosya boyutunu artırıyor hem de Google Pagespeed de Sayfa hızı ile ilgili uyarılara neden oluyordu.İşte bügün size burada bu uyarıyı nasıl çözeceğinizi göstermeye çalışacağım.

Aslında bu uyarının çözümü fazlasıyla basit.Şimdi size nasıl çözüleceğini kodlar üzerinde anlatıyım.Öncelikle aşağıdaki kod bizim örnek javascript kodumuz olsun

<script type="text/javascript" src="http://tr.analizcik.com/jscripts/prototype.js?ver=1603"></script>

Şimdi burada yapmamız gereken geciktirici defer kodunu eklemek.Yani şöyle ;

<script type="text/javascript" src="http://tr.analizcik.com/jscripts/prototype.js?ver=1603" defer></script>

Kodlamada gördüğünüz üzere kodun sonuna sadece defer kelimesi eklenmiş.Defer sizin eklediğiniz javascript kodunun veya dosyasının sayfanın açılmasından sonra yüklenmesine olanak sağlar.Yani javascript dosyanız sayfa yüklendikten sonra yüklenmeye başlıyacak.Ve artık hatanız çözülmüş oldu.Başka sorularınız varsa buradan sorabilirsiniz.

 

Hayırlı Günler

37 Yorum

  1. bu güzel anlatım için teşekkür ederim…
    fakat bunu wordpress ile nasıl yapacağım…
    kodu nereye ekleyeceğim… bunu anlatsanız daha iyi olurdu 🙂

    1. Merhaba

      Basit bir şekilde yapacaksınız.Wordpress temanızın düzenleme bölümüne gelip üst kısım header bölümünü düzenleyeceksiniz.Javascript kodları orada bulunmaktadır.Yapamazsanız resimli anlatım olarak ekleyebilirim

  2. bu güzel anlatım için teşekkür ederim…
    fakat bunu wordpress ile nasıl yapacağım…
    kodu nereye ekleyeceğim… bunu anlatsanız daha iyi olurdu 🙂

  3. Selam benim kod bu şekilde bu şekilde yaptım ama sitem açılmadı. Neyi yanlış yapmış olabilirim

  4. Selam benim kod bu şekilde bu şekilde yaptım ama sitem açılmadı. Neyi yanlış yapmış olabilirim

  5. hocam benim wp teması biraz karışık. o linkleri oluşturan dosya da urller şu şekilde örnek: e_script(‘jquery’, get_bloginfo(‘template_url’).’/includes/js/jquery.min.js’, false, ‘1.7.2’) ne ettiysem defer i halledemedim. ya tema iptal oluyor, ya da js uzantı dosya iptal. deferi bu sekıldekı urllere nasıl yerleştirebilirim yardımcı olursanız sevinirim.

  6. onlinekpss.org hocam sayfa kaynağında kodlar sizin yazdığınız gibi ama temada benim belirttiğim gibi başlıyor. if (function_exists(‘register_nav_menus’)) add_action( ‘init’, ‘register_main_menus’ );

    // Register and deregister Scripts files
    if(!is_admin()) {
    add_action( ‘wp_print_scripts’, ‘my_deregister_scripts’, 100 );
    }

    function my_deregister_scripts() {
    wp_deregister_script( ‘jquery’ );

    //wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’, false, ‘1.7.2’);
    wp_enqueue_script(‘jquery’, get_bloginfo(‘template_url’).’/includes/js/jquery.min.js’, false, ‘1.7.2’);
    sanırım onun için functions’a kod eklemem lazım.

  7. defer tanımı tag yapısına aykırı arkadaşlar. bu yüzden w3c validator da hata sorgusunda script tagları- hata verecektir. şeklinde tanımlamak daha mantıklı..
    Sayfam açılmıyor diyenlere söyle söyliim. sayfa içinde tekrar bi script çağırmış olabilirsiniz bunlara da aynı şeyleri uygulamanız gerekiyor.

  8. Güzel anlatım olmuşta ben bir blog acemisi olarak bu dediğiniz kodları nereye nasıl eklicez detaylı birşekilde anlatırsanız sevinirim.

    1. Merhaba Yağmur Hanım

      Gereken anlatımı en kısa zamanda yayınlacağımı belirtmek isterim.Yorumunuz için teşekkür ederim.

  9. Merhaba..
    Bayan Yağmurla aynı soruyu paylaşıyorum.Ben üzerinde denedim olmadı.
    Başarılar

  10. merhaba wordpress için nasıl yapacagız, kodlar hangi dosyaların içerisinde, yardımcı olurmusnuz

  11. Arkadaşlar bu ayarı Worpress tema dosyasında değil wp-includes klasöründe bulunan “class.wp-scripts.php” dosyasından yapacaksınız. WordPress’i çok soran olmuş sayfayı gezerken yorum yapayım dedim 🙂 yardımcı olmuştur umarım.

    1. Merhaba

      Bildiğim kadarıyla bazı temalarda değişiklik olabiliyor.Videolu anlatım hazırlıyacam demiştim ancak vize sınavlarımın araya girmesi nedeniyle biraz gecikecek

    2. WP kullanıcıları için çözüme en yakın yanıtı siz vermişsiniz. Bahse konu php dosyasının neresine ve nasıl editleyeceğimizi de söylerseniz, bu sorunla boğuşan herkes size minnettar kalacaktır.

  12. bilgiler için teşekkürler.

    merak ettiğim “defer” özelliğini desteklemeyen tarayıcılarda “defer” kodu eklenen script`in çalışma sorunu oluyormu?

    mesela x.js A tarayıcısında çalışıyor ama bu tarayıcı “defer” desteklemiyor “defer” eklendiği zaman x.js scriptinin çalışmasında sorun olurmu

  13. Aşağıdaki şekilde “defer”‘i nereye yazmamız gerekiyor acaba? Örneğin; yaptığımda, sayfa açılmasına rağmen, yeri boş kalıyor. Teşekkürler.

  14. Normalde yorum yazmayı sadece backlink için kullanırım ama sen varya adamın dibisin 😀 büyük dertten kurtardın sağol

  15. Öncelıkle Tsk Ederim Hocam Güzel Paylaşım
    wordpress baslangiç- temalar-düzenleyici header.php bulun kodu
    iste ismi kendi sitenizi yazın en tepeye yağiştirip kaydedin oluyo şimdiden tşkelr

Bir Cevap Yazın

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