Scriptleri ihtiyaç duyulana kadar erteleyin

Scriptleri ihtiyaç duyulana kadar erteleyin

Bu makalede, sayfa yüklemesinin başlangıcında ihtiyaç duyulmayan scriptleri daha sonra, tam ihtiyaç duyulmadan hemen önce yüklemek için harika bir kalıbı gösterip açıklayacağım.

Core Web Vitals söz konusu olduğunda JavaScript ile yapabileceğiniz en etkili şey, bir kaynağın yüklenmesini ihtiyaç duyulana kadar geciktirmektir. Bu, kullanılmayan ve gereksiz JavaScript'i sayfadan kaldıracak ve yalnızca ihtiyaç duyulduğunda yükleyecektir. Bu, Lighthouse 'reduce unused JavaScript' uyarısını düzeltecek ve ayrıca Interaction to Next Paint (INP) gibi yanıt verebilirlik metriklerini iyileştirecektir.
Bunu resimlerle uzun süredir yapıyoruz. Buna lazy loading denir. Lazy loading ile ekranın altında kalan bir resim, görüntü alanına kaydırılmadan hemen önce yüklenir. Bu sayede resmi sayfa yüklemesi sırasında hemen yüklememize gerek kalmaz ve tarayıcı değerli kaynaklarını gerçekten ihtiyaç duyulan şeyleri indirmek, ayrıştırmak ve boyamak için harcayabilir.

Şimdi aynı şeyi resimler yerine scriptlerle yapabildiğimizi hayal edin. Yapabiliyoruz! Ne yazık ki bir resme loading="lazy" eklemek kadar basit değil ama biraz çabayla çalışmasını sağlayabiliriz

Adım 1: Scriptleri talep üzerine yükleyin

Sayfa yüklemesinden sonra sayfaya script eklemek için bunu bizim yerimize yapacak küçük bir scripte ihtiyacımız olacak.

function injectScript(scriptUrl, callback) {
  var script = document.createElement("script");
  script.src = scriptUrl;
  if (typeof callback === "function") {
    script.onload = function () {
      callback();
    };
  }
  document.head.appendChild(script);
}        

Bu fonksiyon, yeni bir script elementi oluşturup belgenin head bölümüne ekleyerek mevcut web sayfasına bir script enjekte eder. scriptUrl parametresi, enjekte edilecek scriptin URL'sini belirtir. callback parametresi, script yüklenmeyi tamamladığında çağrılacak isteğe bağlı bir fonksiyondur. Script yüklenmeyi tamamladığında, script elementinin onload olayı tetiklenir. Eğer bir callback fonksiyonu sağlanmışsa, bu noktada çağrılacaktır.

Adım 2: Scriptleri talep üzerine yükleyin

Bir sonraki adım scriptleri talep üzerine yüklemektir. Bunu yapmanın 2 yaygın yöntemi vardır. Birincisi daha güvenilir olan 'sayfanın bir bölümü görünür olduğunda' ve ikincisi daha hızlı olan 'etkileşimde' yöntemidir.

2a: Intersection observer

Bir scripti tam ihtiyaç duyulmadan hemen önce yüklemek için ilk yöntem intersection observer kullanır. Intersection observer, bir element ekranın görünür kısmıyla kesiştiğinde 'tetiklenen' güvenilir bir yöntemdir. Bu davranışı, yalnızca bir element görünür olduğunda script indirmesini tetiklemek için kullanabiliriz. Bu yöntemin dezavantajı, bir element 'ekranda' olsa bile hâlâ kullanılmayabilmesidir.

function injectScriptOnIntersection(scriptUrl, elementSelector) {
  var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        injectScript(scriptUrl);
        observer.unobserve(entry.target);
      }
    });
  });

  var element = document.querySelector(elementSelector);
  observer.observe(element);
}
        

Bu fonksiyon iki parametre alır: scriptUrl enjekte edilecek scriptin URL'sidir ve elementSelector enjeksiyonu tetiklemesi gereken elementin CSS seçicisidir.

Fonksiyon yeni bir IntersectionObserver nesnesi oluşturur ve gözlemlenen bir element görüntü alanıyla her kesiştiğinde çağrılacak bir geri çağırma fonksiyonu iletir. Geri çağırma fonksiyonu elementin kesişip kesişmediğini kontrol eder ve kesişiyorsa scripti enjekte eder ve elementi gözlemlemeyi durdurur.

Intersection Observer API'sinin tüm tarayıcılarda desteklenmediğini unutmayın, bu nedenle eski tarayıcıları desteklemeniz gerekiyorsa bir polyfill kullanmanız gerekebilir.

injectScriptOnIntersection('script.js', '#my-element');

Bu, my-element ID'sine sahip element görüntü alanında görünür olduğunda scripti enjekte edecektir.

2b: Etkileşimde

JavaScript'i talep üzerine yüklemenin en etkili yöntemi, bir ziyaretçi belirli bir elementle etkileşime girdiğinde yüklemektir. Örneğin bir form. Bu yöntemi kullanmanın avantajı, ihtiyaç duyulmadığında scripti büyük olasılıkla hiç yüklemeyecek olmanızdır. Dezavantajı ise indirme eyleminin oldukça geç olması ve hangi olayları (mouseover, hover, touchstart vb.) dinlemek istediğimize karar vermemiz gerekmesidir.

function injectScriptOnInteraction(scriptUrl, elementSelector, eventTypes) {
  var element = document.querySelector(elementSelector);
  var eventHandler = function() {
    injectScript(scriptUrl);
    eventTypes.forEach(function(eventType) {
      element.removeEventListener(eventType, eventHandler);
    });
  };
  eventTypes.forEach(function(eventType) {
    element.addEventListener(eventType, eventHandler);
  });
}
        

Bu fonksiyon üç parametre alır: scriptUrl enjekte edilecek scriptin URL'sidir, elementSelector enjeksiyonu tetiklemesi gereken elementin CSS seçicisidir ve eventTypes enjeksiyonu tetiklemesi gereken olay türlerinin bir dizisidir (örn. ["click", "mouseover"]).

Fonksiyon, document.querySelector kullanarak elementi bulur ve belirtilen olay türlerinin her biri için olay dinleyicileri ekler. Belirtilen olaylardan herhangi biri gerçekleştiğinde, injectScript fonksiyonu belirtilen URL ile çağrılır ve olay dinleyicileri element.removeEventListener kullanılarak kaldırılır.

injectScriptOnInteraction(
  'script.js',
  '#my-element', 
  ['click', 'mouseover']
);

Bu, my-element ID'sine sahip element tıklandığında veya üzerine gelindiğinde scripti enjekte edecek ve ardından olay dinleyicilerini kaldıracaktır.

Sonuç

Scriptler sayfa yüklemesinin başlangıcında hemen gerekli olmadığında, bunları talep üzerine yüklemek harika bir fikirdir! Bunu intersection observer veya etkileşim kullanarak yapabiliriz. Bu, sayfa yüklemesinin erken aşamalarında değerli kaynakları serbest bırakacaktır