WordPress'te JavaScript'in Ayrıştırılması Nasıl Ertelenir

JavaScript, dünyadaki en popüler programlama dillerinden biridir. Çoğu web sitesi bunu ziyaretçiler için daha dinamik deneyimler oluşturmak için kullanır. İletişim formları ve site analitiği gibi kritik özellikler, JavaScript'in günlük olarak uygulamaya konma yollarından yalnızca birkaçıdır. Ne yazık ki, oldukça kullanışlı olmasına rağmen, bu kodun tümü sitenizi yavaşlatma potansiyeline sahiptir.

JavaScript'in ayrıştırılmasının ertelenmesi ("JavaScript'in ertelenmesi" olarak da bilinir), sitenize gerekli olmayan JavaScript kodunuzu en son yüklemesini söylemek anlamına gelir. Bu basit ayar, web sitenizin kullandığı komut dosyası sayısına bağlı olarak sayfa yükleme sürelerinizi ve genel performansınızı iyileştirebilir.

Bu yazıda ayrıştırmanın tam olarak ne olduğunu ve ertelemenin neleri kapsadığını inceleyeceğiz. Ayrıca JavaScript'i ertelemenin sitenize nasıl fayda sağlayabileceğini tartışacağız ve bunu nasıl yapacağınızı göstereceğiz. Son olarak, kalan şüpheleri gidermek için bazı sık sorulan sorularla (SSS) toparlayacağız.

"JavaScript'in ayrıştırılmasını ertelemek" ne anlama geliyor?

Bir web sitesini ziyaret ettiğinizde, tarayıcınız bir sunucudan dosya ister. Bu dosyalar, görsel ve etkileşimli bir web sayfası oluşturmak için tarayıcının ayrıştırması (yorumlaması) için HTML, CSS ve JavaScript içerir.

Web siteleri genellikle tarayıcınızın tek bir sayfa için düzinelerce (hatta yüzlerce) öğe ve dosya yüklemesini gerektirir. İşte Google'ın sayfalarından birinden hızlı bir örnek, böylece kaç dosya kullandığını görebilirsiniz:

Tarayıcınız HTML dosyalarını ayrıştırdığında, bulduğu herhangi bir CSS'yi işlemeyi ve JavaScript kodunu yürütmeyi durdurur. Tarayıcı bu kodu yürütmeyi bitirene kadar sayfanın geri kalanını yüklemeye devam etmeyecektir.

Uygulamada, web siteniz çok iyi optimize edilmişse ( gerçekten hızlı yükleniyorsa) bu gecikmeyi fark etmeyebilirsiniz. Ancak gecikme oradadır ve siteniz ne kadar çok JavaScript kullanırsa o kadar uzun olabilir. Web siteniz performans için optimize edilmemişse, JavaScript'in ayrıştırılması yükleme sürelerini önemli ölçüde yavaşlatabilir.

JavaScript'in ayrıştırılmasını ertelemek, tarayıcınıza "Hey, bu JavaScript koduyla karşılaşırsanız, sayfanın geri kalanını bitirene kadar onu ayrıştırmayın" demek anlamına gelir. Ziyaretçinin bakış açısından bu, sayfanın görünür öğelerinin daha hızlı yükleneceği anlamına gelir. Ardından, JavaScript arka planda çalışmayı bitirecek ve kimse bundan daha akıllı olmayacak (siz ve tarayıcı dışında).

JavaScript'i ertelemenin faydaları nelerdir?

JavaScript'i ertelemenin birincil yararı, sayfaların ziyaretçiler için daha hızlı yüklenmesidir. Komut dosyalarının yine de arka planda yüklenmesi gerekecektir, ancak bunların ertelenmesi, üç Önemli Web Vital ölçümünden biri olan En Büyük İçerikli Boyama (LCP) puanınızı artıracaktır.

Sayfa yükleme süresinin harika bir kullanıcı deneyiminin en önemli yönlerinden biri olduğunu unutmamak önemlidir. Bir web sitesinin yüklenmesi çok uzun sürerse, genellikle ziyaretçi yüzdesini kaybedersiniz. Ayrıca, yavaş yükleme süreleri, sitenizde bir sorun olduğu izlenimini verebilir.

WordPress'te JavaScript'in ayrıştırılması nasıl ertelenir

WordPress, web sitenizi optimize etmek için birden fazla yol sunar. JavaScript'i ertelemek söz konusu olduğunda, kullanabileceğiniz iki yöntem vardır.

İlk yöntem en kolay olanıdır çünkü bir eklenti kullanmayı içerir.

1. Ücretsiz bir eklenti ile JavaScript ayrıştırmasını erteleyin

Web sitenizin dosyalarını düzenleme ve onlara kod ekleme konusunda rahat değilseniz, yapabileceğiniz en iyi şey bir eklenti kullanmaktır. WordPress'te gerekli olmayan JavaScript'i ertelemek için kullanabileceğiniz en iyi araçlardan biri Jetpack Boost'tur.

Jetpack Boost, WordPress sitenizin performansını optimize etmek için kullanabileceğiniz ücretsiz bir eklentidir. Yapılandırması inanılmaz derecede basit olduğundan yeni başlayanlar için mükemmel bir seçimdir.

Eklentiyi etkinleştirdikten sonra bir WordPress.com hesabına bağlanmanız gerekir (bunun için ücretsiz bir hesap kullanabilirsiniz).

Hazır olduğunuzda , WordPress kontrol panelinizde Jetpack → Boost'a gidin ve web sitenizin performans açısından nasıl olduğuna dair hızlı bir genel bakış elde edin.

Aşağıdaki seçeneklere bakarsanız, Erteleme Olmayan JavaScript'i Ertele yazan bir ayar göreceksiniz. Bu ayarı açıp kapatabilirsiniz ve web sitenizde JavaScript'in ayrıştırılmasını otomatik olarak erteler.

Eklenti, yalnızca web sitesi için kritik olmayan komut dosyalarını etkilediğinden, zorunlu olmayan JavaScript'i belirtir.

Bu ayar etkinleştirildikten sonra, her şeyin iyi çalıştığından emin olmak için web sitenize baktığınızdan emin olun. Beklenmeyen bir şey fark ederseniz, özelliği devre dışı bırakmanız yeterlidir.

Jetpack Boost'un ayrıca yavaş yüklemeyi etkinleştirebileceğini ve sitenizin CSS'sini optimize edebileceğini unutmayın. Bu, eklentinin kritik CSS'yi her HTML belgesinin başına taşıyacağı ve böylece tarayıcının önce belgeyi ayrıştıracağı anlamına gelir. Bu ayar, İlk Giriş Gecikmesi (FID) puanınızı iyileştirmek için özellikle önemlidir.

2. functions.php kullanarak JavaScript'in ayrıştırılmasını erteleyin dosya

İkinci yöntem, temanızın functions.php dosyasını düzenlemeyi içerir. İşlem aşırı derecede karmaşık değildir, ancak WordPress'e kod eklemek bazen beklenmeyen yan etkilere neden olabilir.

Bu yöntem deneyimli kullanıcılar içindir, çünkü yalnızca bir dosyayı silerek veya hatta yanlışlıkla yanlış yere bir boşluk ekleyerek çok şey olabilir. Kullanıcı deneyimine zarar vermemek için yalnızca gerekli olmayan JavaScript'i ertelemek isteyeceğinizi unutmayın.

Güvende olmak için, herhangi bir WordPress dosyasını düzenlemeden önce web sitenizi tamamen yedeklemenizi öneririz. Yeni bir yedeğiniz olsa bile, herhangi bir değişiklik yapmadan önce bir geri yükleme noktanız olması için başka bir tane oluşturun. Jetpack VaultPress Yedeğiniz varsa, sitenizin en son sürümü zaten sizin için kaydedilmiş olacaktır.

functions.php dosyasını düzenlemenin iki yolu vardır. Görünüm menüsünden erişebileceğiniz WordPress Tema Dosya Düzenleyicisini kullanabilirsiniz. Bu seçeneğin yalnızca Tam Site Düzenlemeyi (FSE) destekleyen bir blok tema kullanmıyorsanız kullanılabileceğini unutmayın.

Düzenleyiciye eriştiğinizde, sağdaki açılır menüden aktif temanızı seçin ve listede functions.php dosyasını arayın.

Herhangi bir tema dosyasına kod eklemek veya bu dosyalardan kod kaldırmak için düzenleyiciyi kullanabilirsiniz. Yine de, amacını anlamadığınız sürece mevcut herhangi bir kodu değiştirmemenizi öneririz.

functions.php dosyasına kod eklemek, güvenilir bir kaynaktan olduğu sürece güvenli olmalıdır. Aşağıdaki kod parçacığı, web sitenizi JavaScript'in ayrıştırılmasını erteleyecek şekilde yapılandırır:

 function defer_js( $url ) {    if ( is_user_logged_in() ) return $url;     if ( FALSE === strpos( $url, '.js' ) ) return $url;    if ( strpos( $url, 'jquery.js' ) ) return $url;    return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_js', 11 );

Bu kod, sitenizdeki tüm JavaScript'i otomatik olarak erteler, ancak jQuery komut dosyalarına dokunmaz. Ancak, panonun düzgün yüklenmemesiyle ilgili sorunları önlemek için oturum açtıysanız çalışmaz.

İçindeki diğer kodlarla karışmaması için bu komut dosyasını functions.php dosyasının sonuna ekleyin. Sayfanın altındaki Dosyayı Güncelle'ye tıklayın, işte bu kadar!

WordPress tema dosya düzenleyicisine erişiminiz yoksa, ancak bir sunucuda kodla rahatça çalışıyorsanız, web sitenize Dosya Aktarım Protokolü (FTP) ile bağlanarak functions.php dosyasını düzenleyebilirsiniz. Bunu yapmak için FileZilla gibi bir FTP istemcisi kullanmanız gerekecek. Unutmayın, herhangi bir şey yapmadan önce tam site yedeğini aldığınızdan emin olun.

Web sitenizin sunucusuna bağlandıktan sonra, WordPress kök klasörünü bulmanız gerekir. Bu, sitenizin tüm dosyalarını içeren klasördür. Genellikle www, public_html veya sitenizin adı olarak adlandırılır.

Bu klasörü açın ve wp-content/themes'e gidin. Sitenizde yüklü olan her tema için bir tane olmak üzere birkaç klasör olmalıdır. Etkin temanızın klasörünü belirleyin ve açın. functions.php dosyası hemen içinde olmalıdır.

Bu dosyaya sağ tıklayın ve Düzenle gibi bir şey söyleyen bir seçenek arayın (bu, kullandığınız FTP istemcisine bağlı olarak değişir). Bu seçenek, dosyayı varsayılan metin düzenleyicinizi kullanarak açacaktır. Buradan daha önce paylaştığımız kod parçacığını ekleyebilir ve ardından değişiklikleri dosyaya kaydedebilirsiniz.

WordPress dosyalarını FTP yoluyla düzenlerken aynı kurallar geçerlidir. Ne işe yaradığından emin değilseniz herhangi bir kodu düzenlemeyin ve kaynaklarına güvenmediğiniz sürece kod parçacıkları ekleme konusunda dikkatli olun.

functions.php dosyasını düzenledikten sonra hatalarla karşılaşırsanız, her zaman en son yedeklemeyi kullanarak WordPress sitenizi geri yükleyebilirsiniz. Jetpack VaultPress Backup, bu durumlarda harika bir seçenektir çünkü siteniz tamamen kapalı olsa bile tek tıklamayla geri yükleme işlevi sunar.

JavaScript'i erteleme hakkında sık sorulan sorular

JavaScript'i ertelemenin nasıl çalıştığıyla ilgili hala sorularınız varsa, bu bölüm onları yanıtlayacaktır. Komut dosyalarını ertelemenin olası yan etkilerinden bahsederek başlayalım.

JavaScript'i ertelemek sitenizi bozabilir mi?

Evet, kullandığınız eklentilere ve temaya bağlı olarak JavaScript'in ertelenmesi sitenizin belirli öğelerini bozabilir. Manuel yöntemi kullanıyorsanız, kodunuzdaki bir hata sitenizi tamamen çökertebilir.

Bu nedenle, bu görevi yerine getirmek için Jetpack Boost gibi bir araç kullanmak en güvenlisidir. JavaScript'in ertelenmesinin bir soruna yol açması hâlâ mümkün olsa da, özelliği veya eklentiyi kolayca tamamen devre dışı bırakabilirsiniz.

JavaScript'in ayrıştırılmasını ertelemek, "oluşturmayı engelleyen JavaScript'i kaldırmak" ile aynı şey midir?

PageSpeed ​​Insights veya GTMetrix gibi web sitesi performans ölçüm hizmetlerini kullanıyorsanız, web sitenizden görüntü oluşturmayı engelleyen JavaScript'i kaldırmanızı da önerdiklerini fark edebilirsiniz. Dil nedeniyle, bu optimizasyon önerisini JavaScript'in ayrıştırılmasının ertelenmesiyle karıştırmak kolay olabilir.

Oluşturmayı engelleyen JavaScript, sitenizin oluşturulmasını engelleyen herhangi bir kodu ifade eder. Çoğu durumda, en iyi çözüm, belirli bir amacı karşılamıyorsa bu kodu ortadan kaldırmaktır. Bir işlevi varsa, bunun yerine onu erteleyebilirsiniz.

Hangi komut dosyalarının gerekli olduğunu ve hangilerinin olmadığını belirlemek, sizin muhakemenize bağlı olacaktır. Ancak GTMetrix gibi hizmetler, web sitenizde kullanılmayan JavaScript'i belirlemenize yardımcı olabilir.

Bu kategoriye giren tüm komut dosyalarının kaldırılması güvenli olmalıdır. Diğer betikler için, eklentileri (Jetpack Boost gibi) kullanabilir veya bunları ertelemek için functions.php dosyasını manuel olarak değiştirebilirsiniz.

JavaScript'i ertelemek yerine güvenle kaldırabilir miyim?

Bu, hangi komut dosyalarından bahsettiğinize bağlıdır. WordPress web sitelerinin büyüdükçe kullanılmayan kod biriktirmesi alışılmadık bir durum değildir. Bu, eklentileri kurup devre dışı bıraktığınızda, üçüncü taraf hizmetleri denediğinizde ve bunları kullanmayı bıraktığınızda gerçekleşir.

Bu "artık" JavaScript'i web sitenizde bırakmak bazen bir güvenlik riski oluşturabilir. Ayrıca, web sitenizin performansını etkileyebilir çünkü tarayıcıların yine de onu ayrıştırması gerekebilir.

Önceki soruyu kontrol ederseniz, web sitenizde güvenle kaldırabileceğiniz JavaScript'i belirlemek için GTMetrix'i nasıl kullanacağınızı gösteriyoruz.

JavaScript'i ertelemek sayfa performansını artırır mı?

JavaScript'i ertelemek, web sitenizin sayfalarının daha hızlı yüklenmesini sağlamalıdır. Ne kadar hızlı olacağı, ertelediğiniz komut dosyası sayısına ve web sitenizin ne kadar iyi optimize edildiğine bağlı olacaktır.

Halihazırda hızlı bir web siteniz varsa ve siteyi optimize etmek için kullanılmayan komut dosyalarını kaldırmak gibi adımlar attıysanız JavaScript'i ertelemenin önemli bir etkisi olmayabilir. Yine de, sayfa performansı söz konusu olduğunda optimizasyonun her parçası önemlidir.

Sayfa yükleme hızımı artırmak için başka ne yapabilirim?

Bir web sitesi için sayfa yükleme hızlarını iyileştirmenin birçok yolu vardır. En büyük etki için, uygulamanızı önerdiğimiz optimizasyonlar şunlardır:

1. Yönetilen bir WordPress barındırma sağlayıcısı kullanmayı düşünün.
2. Bir İçerik Dağıtım Ağı (CDN) uygulayın.
3. WordPress'te Temel Web Verilerini Geliştirin.
4. CSS'yi küçültün.
5. WordPress'te yavaş yüklemeyi etkinleştirin.

Web sitenizi performans için optimize etmek biraz zaman alabilir, ancak Jetpack ve Jetpack Boost gibi WordPress eklentileri, süreci çok daha kolay ve hızlı hale getirir.

Sayfa yükleme hızınızı artırmak için gösterdiğiniz her türlü çabanın zamanla karşılığını fazlasıyla alacağını unutmayın. Web sitenizin en iyi durumda çalışmasını sağlayabilirseniz, ziyaretçileriniz çok daha iyi bir deneyime sahip olacaktır.

Web sitenizin performansını bugün iyileştirin

Performansını artırmak için web sitenizde yapabileceğiniz birçok değişiklik var. Sitenizde birden çok üçüncü taraf komut dosyası ve eklenti kullanıyorsanız, muhtemelen arka planda çalışan çok sayıda JavaScript kodu vardır. Bu kod önemlidir, ancak web sitenizin geri kalanının olabildiğince hızlı yüklenmesini engelleyebilir.

WordPress'te JavaScript'in ayrıştırılmasını ertelemek düşündüğünüzden daha kolaydır ve web sitenizin performansını önemli ölçüde etkileyebilir. JavaScript ayrıştırmasını ertelemenin yolları şunlardır:

1. Jetpack Boost gibi bir eklenti kullanın.
2. functions.php dosyasını kullanarak JavaScript'i erteleyin.

Jetpack, WordPress web sitenizin performansını artırmak için çeşitli eklentiler sunar. Jetpack Boost bunlardan sadece biri. Jetpack eklentisini kullanırsanız, sitenizin yükleme hızlarını büyük ölçüde artırabilen ücretsiz bir CDN'ye de erişebilirsiniz. Bugün Jetpack ile başlamayı düşünün!