JavaScript’in yüklenmesini erteleme

Javascript’in gerçekten ertelenmesi, o javascript’in yüklenmesi veya ayrıştırılmasının yalnızca sayfa içeriği yüklendikten sonra başlaması anlamına gelir (Bu, sayfa hızını veya kritik oluşturma yolunu etkilemeyeceği anlamına gelir).

  1. “Onload” olayını kullanarak harici bir javascript diyoruz
  2. Harici javascript, sayfa içeriği yüklenmeden önce yüklenmeyecek
  3. Harici javascript daha sonra çalışacak ve sayfayı etkileyecektir
web sayfası ve javascript dosyası


açıklama

Javascript’in ertelenmesi, internette bir çözüm bulmaya çalışırken saçınızı dışarı çekmek istemenize neden olabilecek sorunlardan biridir.

Çoğu kişi “sadece ertelemeyi kullan” veya “eşzamansız kullan” der veya diğerleri “javascript’i sayfanın altına koy” der, ancak bunların hiçbiri bir web sayfasının tam olarak yüklenmesine ve ardından (ve ancak o zaman) yüklenmesine izin verme sorununu çözmez harici JS. Ayrıca, Google sayfa hızı aracından aldığınız “JavaScript yüklemesini ertele” uyarısını geçmenize de izin vermezler. Bu çözüm olacak.

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

Bu kod, HTML’nizde </body> etiketinin hemen öncesine (HTML dosyanızın altına yakın bir yere) yerleştirilmelidir. Harici JS dosyasının adını vurguladım.

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

Bu ne yapar?

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

Özel talimatlar

1. Yukarıdaki kodu kopyalayın.

2. Kodu HTML’nizdeki </body> etiketinin hemen önüne (HTML dosyanızın altına yakın bir yere) yapıştırın.

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

4. Dosyanızın yolunun doğru olduğundan emin olun. Örnek: “defer.js” koyarsanız, “defer.js” dosyası HTML dosyanızla aynı klasörde olmalıdır.

Bu kodu ne için kullanabilirsiniz (ve ne için kullanamazsınız)

Bu kod, belge yüklenene kadar belirttiğiniz harici dosyayı yüklemeyecektir. Bu nedenle, sayfanın düzgün yüklenmesi için gerekli olan herhangi bir javascript koymamalısınız. JavaScript’inizi iki gruba ayırmalısınız. Bir grup, sayfanın yüklemesi gereken javascript ve ikinci grup, sayfa yüklendikten sonra işler yapan javascripttir (tıklama olaylarını veya başka bir şeyi aramak gibi). Sayfa yüklenene kadar bekleyebilecek javascript, yukarıda aradığınız tek bir harici dosyaya yerleştirilmelidir.

Örneğin, bu sayfada yukarıdaki dosyayı ertelemek için kullanıyorum – Google analytics, Viglink (nasıl para kazanıyorum) ve altbilgimde görüntülenen Google plus rozeti (sosyal medyam ). Bu dosyaları ilk sayfa yüklemesi için yüklemem için hiçbir neden yok çünkü bunların hiçbiri ekranın üst kısmındaki içeriği yüklemek için gerekli değil. Muhtemelen sayfalarınızda aynı türde şeyler var. Kullanıcılarınıza içeriğinizi göstermeden önce bunları yüklemeleri için bekletiyor musunuz?

Diğer yöntemler neden işe yaramıyor?

Satır içi, komut dosyalarını en alta yerleştirme, “erteleme” kullanma veya “async” kullanma yöntemlerinin tümü, önce sayfanın yüklenmesine izin verme, ardından JS’yi yükleme amacını gerçekleştirmez ve kesinlikle evrensel olarak ve tarayıcılar arası çalışmazlar.

Neden fark eder?

Bu önemli çünkü Google sayfa hızını bir sıralama faktörü olarak değerlendiriyor ve kullanıcılar sayfaların hızlı yüklenmesini istiyor. Aynı zamanda mobil seo’nuz için de çok önemlidir . Google, sayfa hızınızı sayfanın ilk yüklendiğinde çağrıldığı andan itibaren ölçer . Bu, sayfa yükleme olayına olabildiğince çabuk ulaşmak istediğiniz anlamına gelir. Bu ilk sayfa yükleme süresi, Google’ın web sayfanızı yargılamak için kullandığı şeydir (ve kullanıcıların sayfanın yüklenmesini beklediğini unutmayalım). Google, ekranın üst kısmındaki içeriğin önceliklendirilmesini aktif olarak teşvik eder ve önerir , böylece tüm kaynakları (js, css, resimler vb.) Kritik oluşturma yolundan çıkarır.çabaya değer. Kullanıcılarınızı mutlu ediyorsa ve Google’ı mutlu ediyorsa, muhtemelen yapmalısınız.

Testiniz için örnek dosya

Tamam, sadece açıklamak için ve oynamanız için örnek sayfa hazırladım.  İki saniye bekledikten sonra “merhaba dünya” diyen bir komut dosyası kullanan düz bir HTML sayfasıdır. Bunları test edebilir ve 2 saniyelik beklemeyi içermeyen bir yükleme süresini yalnızca bir yöntemin kaydedeceğini görebilirsiniz.

  • Satır içi komut dosyası içeren sayfa – burada

Kilit nokta

İçeriğin kullanıcıya mümkün olan en kısa sürede ulaştırılmasına büyük öncelik verilmelidir. Bunu javascript’imize nasıl davrandığımızla yapmıyoruz. Bir kullanıcının, ekranın alt kısmındaki içeriğe bir şeyler yapması muhtemel bazı komut dosyası nedeniyle içeriğini görmek için beklemek zorunda kalmamalıdır. Altbilginiz ne kadar havalı olursa olsun, altbilginizi hiçbir zaman aşağı kaydırmayan bir kullanıcının altbilginizi havalı yapan javascript’i yüklemesi için gerçekten bir neden yoktur.