Javascript’in Yüklenmesini Erteleme

Javascript’in yüklenmesini ertelemek için

Gerçekten ertelenen javascript, sayfa içeriği yüklendikten sonra yalnızca o JavaScript’in yüklenmesi veya ayrıştırılması anlamına gelir (Sayfa hızını veya kritik oluşturma yolunu etkilemeyeceği anlamına gelir).

  1. Harici bir javascript olarak adlandırdığımız “onload” olayını kullanarak
  2. Sayfa içeriği yüklenmeden harici javascript yüklenmeyecektir
  3. Harici javascript çalışacak ve sayfayı etkileyecektir
  4. Sınamanız için örnek dosyalar

    Tamam, sadece göstermek için oynamak için bazı örnek sayfalar hazırladım. Her sayfa aynı şeyi yapar. İki saniyede bekleyen ve “hello world” yazan bir betik kullanan düz bir HTML sayfasıdır. Bunları test edebilir ve yalnızca bir yöntemin 2 saniye beklemeyi içermeyen bir yükleme süresi kaydedeceğini görebilirsiniz.

  5. Javascript’in ertelenmesi, bir çözüm bulmaya çalışırken saçlarınızı dışarı çekmek isteyebileceğiniz web üzerindeki konulardan biridir.Birçok kişi “yalnızca gecikmeli kullan” veya “sadece zaman uyumsuz kullan” veya diğerleri “sadece javascriptinizi sayfanın altına koy” derler ancak bunların hiçbiri tam olarak bir web sayfasının tam olarak yüklenmesine ve daha sonra yüklenmesine (ve ancak o halde) sorun çözülmediğini söyler Harici JS. Ayrıca, sizi Google sayfa hızı aracından alıyor olduğunuz “Defer loading of javascript” uyarlamasını da geçemezsiniz. Bu çözüm olacak.

     Harici javascript dosyası çağırmak için komut dosyası

    Bu kod, </ body> etiketinin hemen önündeki HTML dosyanıza yerleştirilmelidir (HTML dosyanızın en yakınında). Harici JS dosyasının adını vurguladım.

  6. <script type="text/javascript">
    function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
    </script>

Bu ne işe yarıyor?

Bu kod, tüm belgenin yüklenmesini beklediğini ve ardından “defer.js” harici dosyasını yüklediğini söyler.

Özel talimatlar

1. Yukarıdaki kodu kopyalayın.

2. HTML kodunu </ body> etiketinin hemen önüne (HTML dosyanızın en yakınında) yapıştırın.

3. “defer.js” dosyasını harici JS dosyanızın adıyla değiştirin.

4. Dosyanızın yolunun doğru olduğundan emin olun. Örnek: “defer.js” yazarsanız, “defer.js” dosyası HTML dosyanızla aynı klasöre yerleştirilmelidir.

Bu kodu ne için kullanabilirsiniz (ve yapamayacağınız şey)

Bu kod, belge yüklendikten sonra belirttiğiniz harici dosyayı yüklemeyecektir. Bu nedenle sayfanın düzgün yüklenmesi için gereken herhangi bir javascript koymamalısınız. Javascriptinizi iki gruba ayırmanız gerekir. Bir grup, sayfanın yüklenmesi gereken javascriptdir ve ikinci grup, sayfa yüklendikten sonra (tıklama etkinlikleri veya başka şeyler aramak gibi) şeyler yapan javascriptdir. Sayfa yüklenene kadar bekleyebilen javascript, yukarıda çağırdığınız bir harici dosyanın içine yerleştirilmelidir.

Örneğin, bu sayfada Google Analytics’i, Adsense’ile (parayı nasıl kazanacağım) ve altbilgimde (sosyal medyamda) görüntülenen Google plus rozetini ertelemek için yukarıdaki dosyayı kullanıyorum.Hiçbiri yukarıdaki içeriği yüklemek için gerekli olmadığından, ilk sayfa yüklemesi için bu dosyaları yüklemek için hiçbir sebep yok. Muhtemelen sayfalarınızda aynı türden şeylere sahipsinizdir. İçeriğinizi göstermeden önce kullanıcılarınızı bunları yüklemeyi beklettiriyor musunuz?

Neden diğer yöntemler çalışmıyor?

Yerleştirme, yerleştirme metotları, “erteleme” ya da “async” kullanan metnin en altına yerleştirilmesi, sayfanın ilk yüklenmesine, daha sonra JS’in yüklenmesine izin vermez ve kesinlikle evrensel olarak çalışmaz ve tarayıcı çapraz çalışır.

Neden fark eder?

Önemlidir çünkü Google, sayfa hızını bir sıralama faktörü olarak değerlendiriyor ve kullanıcılar hızlı yükleme sayfaları istiyor. Aynı zamanda cep telefonu SEO için de önemli . Google, sayfa hızını , sayfanın ilk yüklendiği zamana denk gelen zamandan ölçer . Bu, sayfa yüklemesine mümkün olduğunca çabuk ulaşmak istediğiniz anlamına gelir. İlk sayfa yükleme süresi, Google’ın web sayfanızı yargılamak için kullandığı şeydir (ve kullanıcılarınızın yüklenmesini bekleyen kullanıcılarını unutmayalım). Google , kritik oluşturma yolunun dışındaki herhangi bir kaynağı (js, css, resim vb.) Elde etmek için, katlama içeriğinin üzerinde öncelik vermeyi aktifleştirir ve önermenizi önerir . Kullanıcılarınızın mutluluğu altındaysa ve Google’ı mutlu hale getirirse,

Örnek kullanım

Lütfen bekleyiniz. 10 saniye kaldı…

Merhaba WPDersler

Kilit nokta

Ezici öncelik, içeriği kullanıcıya mümkün olan en kısa sürede sunmaya odaklanmalıdır. Bunu, javascriptimizi nasıl kullandığımız ile yapmadık. Bir kullanıcının içeriğini görmek için beklemek zorunda kalmamalı, çünkü muhtemelen kat içeriğinin altında bir şeyler yapıyor olan bazı senaryo. Altbilginiz ne kadar serin olursa olsun, altbilginizi serin kılan javascript’i yüklemek için altbilginize bile geçemeyecek bir kullanıcı için hiçbir neden yoktur.

Araçlar

Javascript’in bir sayfada ne şekilde kullanıldığını incelemek için javascript kullanım aracını kullanın.

 

Kısa Özet
Yayın Tarihi
Konunun Adı
Javascript'in Yüklenmesini Erteleme
Verilen Puan
51star1star1star1star1star

Leave a Reply

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