Defer Parsing of JavaScript

Sayfa yüklenirken, web tarayıcısının sayfa tamamen oluşturulmadan önce tüm komut dosyalarını indirmesi ve ayrıştırması gerekir. Defer Parsing of JavaScript (JavaScript’in ayrıştırılmasını erteleme), komut dosyasının indirileceği, ancak sayfanın daha hızlı yüklenmesini sağlamak için ayrıştırmanın gerekene kadar erteleneceği anlamına gelir.

Defer Parsing of JavaScript Nasıl Çalışır

Sayfanın ilk yüklenmesi sırasında tüm JavaScript komut dosyalarına ihtiyaç duyulmadığından, tüm çağrılmamış JS işlevlerinin tümünü yeni bir harici JS dosyasına taşıyabilirsiniz. Bundan sonra, sayfa yüklendikten sonra harici dosyayı çağırmak için bir ilk olay dinleyicisine ihtiyaç duyulur. Bu, defer parsing of JavaScript için en basit yöntemdir. Bununla birlikte, indirilmesi gereken JS’nin boyutunu küçültmeyecek, yalnızca ayrıştırmayı geciktirecektir.

Defer parsing of JavaScript

İleri düzey kullanıcılar, JavaScript kodunu yorumlarda veya daha sonra eval () işlevi aracılığıyla çağrılabilen string değişmezlerinde saklayabilir.

Aşağıdaki karakterler bir HTML veya Javascript ayrıştırıcısına müdahale edebilir ve string değişmezlerinde kaçınılması gerekir: <,>, “, ‘, \, ve &.

JavaScript’in ayrıştırılmasını erteleme aşağıdaki Avantajları sağlar:

  • Azaltılmış yükleme hızı süreleri

WordPress Çözümü

WordPress’te JS’yi ertelemek için eklenti kullanabilirsiniz. Ancak yapabileceğiniz başka bir tüyo var ve bu da temanızın işlevlerini düzenlemek.

Aşağıdaki kodu kopyalamanız ve temanızın function.php dosyasının altına yapıştırmanız yeterlidir:

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Yanlış yaparsanız sitenizi bozabileceğinizi unutmayın, bu yüzden dikkatli olun ve doğru dosyayı doğru temada düzenlediğinizden ve kod pasajını doğru yere yapıştırdığınızdan emin olun. Başka hiçbir şeyi silmeyin/değiştirmeyin.

Kodunuzu Manuel Olarak Düzenleyin

Varvy, diğer harici komut dosyalarını yüklemeden önce web sayfanızın ilk içeriğinin tamamen yüklenmesini sağlayan mükemmel bir kod pasajına sahiptir.

Kod pasajı:

<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>

Defer.js dosyasını kendi script dosyanızla değiştirin. Kendi betiğinizi yansıtacak şekilde düzenledikten sonra, HTML’nizin </body> etiketinin hemen önüne yapıştırın. WordPress’te, temanızın footer.php dosyasını düzenleyerek bunu yapabilirsiniz.

HTML olarak yapılan siteler için, yukarıdaki örnekte olduğu gibi </body> etiketinden önce aşağıdaki gibi düzenleme yapın.

<script defer src="js/jquery.min.js"></script>

Yine, tema dosyalarınızda düzenlemeler yapacaksanız bir alt tema (Child Theme)kullanmanız önerilir. Küçük bir not: footer.php alt temasını düzenlemek, functions.php’den farklıdır. Ana temanızın tüm footer.php alt yapısını içeriğiyle birlikte alt temanıza kopyalamanız ve düzenlemeleri yapmanız/eklemeniz gerekir.

Footer.php’nizi düzenleme zorluğuna gitmek istemiyorsanız, Insert Headers and Footers adlı bir eklenti kullanabilirsiniz.

Yorum Gönderin

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