Herkese merhaba,

Gelin bu seferde farklı bir konuyu ele alalım. Doğru Java Script Kullanımı Nasıl Olmalı? "async defer" Nedir?

Web sitlerimizde bir çok js tabanlı pluginler kullanmaktayız. Örn : Haber Slider gibi. Peki, sayfamızda kullandığımız bu pluginlerin sayısı arttıkça ne olacak? LCP' ye sebep olan sorunlardan biri olmuş olacak. TBT' ye , TTI'e sebep olacak.

Bir sayfa düşünelim, açılışta bir slider olsun, orta kısımlarda ise farklı içerikler ve en altta ise yine js ile oluşturulan yada manipüle edilen bir kısım. Bu en alttaki kısım ise sayfa açılışında görünmeyen bir alan.

Sayfa açılış hızına etki eden bu alan için boşu boşuna senkron (sırası ile çalışan) şekilde js yüklemesi yaptırmış oluyoruz. Peki bunu nasıl çözebiliriz. Sihirli kelime async olacaktır. Sayfamızın en alt kısmında çalışan bir öğe için async kullanabiliriz. Hatta sayfamızın her hangi bir yerinde kullandığımız js leri async ile çağırarak asenkron olarak yüklenmelerini sağlayabiliriz. Buda aynı anda farklı işlemlerin (Multi Thread) yapılmasını sağlar.

Bu bir seçenek olsa da, yine doğru kullanılmadığında js fonksiyonlarının doğru çalışmamasına sebep verebilir. Nasıl mı?

Ana sayfada kullandığınız slider plugin'i jquery bağımlılığı (dependency) olabilir. Bu durumda jquery ve slider js farklı zamanlarda çalışacağı için, slider js, jquery js yi göremeyecek ve hata verecektir. Bunu nasıl çözebiliriz? Sihirli kelime defer.

Sayfamız tam olarak yüklendikten, Html Doom oluştuktan sonra çalışmasını isteyerek, ilk çalışması gereken dosyaların önünü kesmemiş oluruz. Sayfanın en altında kalan öğeler vb. için bu özelliği kullanabiliriz.

Bonus :
Peki, defer veya async kullandık performans arttı, daha da artmaz mı?
Şöyle ki yine sayfanın görünmeyen kısmında js ile oluşan yada manipüle edilen alan için çalışacak js'yi, kullanıcının scroll yapması (Lazy Load gibi bir kullanım) ve sayfada belli bir yere indiği zaman yapsak iyi olmaz mı? Sayfa açılışında gereksiz istek/istekler yapmamış olur, diğer çalışacak kısımların önünü kesmez, hem de yukarıda ki saydığım LCP, CLS, TBT vb hatalarında önüne geçen bir adım atmış oluruz.

Kolay gelsin.

Bir sonraki ip ucu : Doğru resim kullanımı hakkında olabilir.