WordPress'te JavaScript Ayrıştırma Nasıl Ertelenir

Web sitenizin performansının kritik bir ölçüsü sayfa hızıdır. Sayfa hızı, bir tarayıcının bir web sitesini oluşturmak için harcadığı süredir. Daha hızlı yükleme süreleri, web siteniz yüklenirken ziyaretçilerinizin daha büyük bir bölümünün web sitenizde kalmasını sağlar. Sayfa hızı, web sitenizin arama motoru sonuçlarındaki sıralamasını da kısmen belirler. Bu nedenle, bir WordPress web sitesini hızlandırmak genellikle bir site sahibinin istek listesinin başında gelir.

Bu eğitimde, web sayfanızın yüklenmesi sırasında JavaScript'in ayrıştırılmasının ertelenmesini tartışacağız – web sitenizdeki ölü ağırlığı kaldırmak için önemli bir teknik.

Sayfa hızı, birçok şeye bağlı olan kullanıcı deneyiminin önemli bir parçasıdır. Bu makale, altta yatan bir faktörü – web sitenizi yeterince hızlı bir WordPress ana bilgisayarında çalıştırmayı – kontrol ettiğinizi varsaymaktadır.

JavaScript Ayrıştırmasını Neden Ertelemelisiniz?

JavaScript'in ayrıştırılmasını erteleme tekniğini anlamak için bir adım geri gidelim ve bir web tarayıcısının bir sayfayı nasıl oluşturduğunu analiz edelim. Tarayıcınız web sunucunuza bir istek gönderdiğinde, sunucu tarafından geri gönderilen sayfa bir HTML belgesi şeklinde indirilir. Bu HTML belgesi, metin, çeşitli DOM öğelerini oluşturan kod ve resimler, stil sayfaları ve komut dosyaları gibi kaynakları içerir.

Tarayıcı bu HTML işaretlemesini satır satır okur. Ek olarak, sayfada bulunan kaynakların indirilmesi gerekir. Varsayılan olarak, tarayıcı bu kaynakları belgede buldukça sırayla indirir. Web sayfasının oluşturulması, yalnızca bir kaynak indirildikten sonra devam eder.

Büyük kaynaklar sayfa yükleme süresini olumsuz etkiler. Resimler sayfa boyutunun önemli bir bölümünü oluşturduğundan, resimleri WordPress siteniz için optimize etmeniz önerilir. JavaScript dosyaları için, sayfanızı doğru bir şekilde oluşturmak için hangi komut dosyalarının gerekli olduğunu belirlemeniz gerekir. Web sayfanızı hızlandırmak için gerekli olmayan komut dosyalarının indirilmesini erteleyebilirsiniz.

Bir sonraki bölümde, sayfanızı oluşturmak için hangi komut dosyalarının gerekli olduğunu belirlemenin yollarına bakacağız.

Hangi Komut Dosyaları Ertelenecek?

Minimal JavaScript kullanan nispeten küçük bir web sitesi için, sayfayı yüklemek için hiçbir komut dosyası gerekli olmayabilir. Ancak, daha karmaşık bir web sitesini yönetiyorsanız, web sitenizdeki tüm komut dosyalarının dikkatli bir analizi, sayfa yüklemeleri için hangi komut dosyalarının gerekli olduğunu ortaya çıkarabilir.

Bu analizi gerçekleştirmenin bir yolu, komut dosyalarını tek tek kaldırmak ve sayfa yükleme sırasında JavaScript konsolunda herhangi bir hata olup olmadığını kontrol etmektir. Ancak, bu süreç JavaScript ve web teknolojileri hakkında önemli ölçüde bilgi gerektirir.

Sayfa yüklemeniz için hangi komut dosyalarının kritik olduğunu değerlendirmenin daha kolay bir yöntemi, GTmetrix gibi bir hız testi aracı kullanmaktır. Web sitenizin URL'sini girin ve aracın bunu değerlendirmesini bekleyin. Sonuçlar sayfasında, PageSpeed ​​sekmesine gidin ve "JavaScript'in ayrıştırılmasını erteleme" bölümünü genişletin. Bu bölüm, oluşturma işlemi sırasında yüklenen gerekli olmayan komut dosyalarının bir listesini gösterir.

Eşzamansız ve Erteleme Öznitelikleri

Komut dosyası indirmenin bir web sayfasının oluşturulmasını engellememesini sağlamanın iki yolu vardır.

İlk olarak, script etiketine bir zaman async öznitelik ekleyebilirsiniz. Bu, tarayıcıya komut dosyasını eşzamansız olarak yüklemesini söyler. Başka bir deyişle, tarayıcı, kodda karşılaştığı anda kaynağı indirmeye başlar, ancak kaynak hala indirilirken HTML'yi ayrıştırmaya devam eder. Aşağıdaki örnek script etiketi, zaman async özniteliğin nasıl ekleneceğini gösterir:

 <script src="path/to/script" async></script>

İkinci olarak, script etiketine bir defer özelliği ekleyebilirsiniz. Bu, tarayıcıya, sayfanın ayrıştırılması tamamlanana kadar kaynağı indirmemesini söyler. Ayrıştırma ve oluşturma işlemi tamamlandıktan sonra, tarayıcı daha önce karşılaştığı ertelenmiş komut dosyalarının listesini indirir. Aşağıdaki örnek script etiketi, bir HTML sayfasına defer özniteliğinin nasıl ekleneceğini gösterir:

 <script src="path/to/script" erteleme></script>

defer ve zaman async öznitelikleri arasındaki birincil fark, kaynağın ne zaman indirileceğidir.

Diyelim ki iki komut dosyanız var: A ve B. B, A'dan sonra kodda görünüyor, B, A'ya bağımlı, ancak A, B'den önemli ölçüde daha büyük.

async kullanıyorsanız, A tamamen indirilmeden önce B'nin indirmeyi bitirmesi mümkün olabilir. Bu, A'nın yokluğunda B yürütüleceği için bir hataya yol açacaktır.

Ancak, defer kullanırsanız, sonunda A ve B sırayla indirilir ve bu bir hataya yol açmaz.

Oluşturma yolunda yalnızca birkaç komut dosyanız varsa, async ve defer kullanımı arasında hiçbir fark bulamazsınız. Ancak, karmaşık bir web uygulamanız varsa, karşılıklı bağımlılıkların karşılandığından emin olmak için defer kullanmak iyi bir fikir olabilir.

Şimdi WordPress'te komut dosyalarının indirilmesini ertelemenin yollarını tartışalım.

WordPress'te JavaScript Ayrıştırmasını Erteleyin

1. Functions.php Dosyasını Düzenleyin

WordPress geliştirmede çalıştıysanız, doğrudan HTML işaretlemesi yoluyla komut dosyaları eklemenin önerilmediğini bilirsiniz. Bunun yerine, kaynak istemek için yerleşik WordPress işlevlerini kullanmalısınız.

Bu nedenle, komut dosyalarınızdan herhangi birine bir zaman async veya defer özelliği eklemek isterseniz, temanızın function.php dosyasına aşağıdaki işlevi eklemelisiniz:

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts');
function add_defer_tags_to_scripts($tag){
    # Öznitelik eklemek için komut dosyalarını listeleyin
    $scripts_to_defer = dizi('script_a', 'script_b');
    $scripts_to_async = dizi('script_c', 'script_d');
 
    # erteleme etiketlerini scripts_to_defer dizisine ekleyin
    foreach($scripts_to_defer as $current_script){
        if(true == strpos($etiket, $geçerli_script))
             return str_replace(' kaynak', ' erteleme="erteleme" kaynak', $etiket);
    }
 
    # async etiketlerini scripts_to_async dizisine ekleyin
    foreach($scripts_to_async as $current_script){
        if(true == strpos($etiket, $geçerli_script))
             return str_replace(' kaynak', ' async="async" kaynak', $etiket);
    }
     
    $ etiketini döndür;
 }

Betik etiketlerine defer ve async öznitelikleri eklemeden önce, WordPress'in erişebilmesi için her betiği kuyruğa almanız gerektiğini unutmayın:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js');
function enqueue_custom_js() {
    wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js');
    wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js');
    wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js');
    wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js');
}

2. Bir Eklenti Kullanın

Kaynak kodu function.php dosyası aracılığıyla düzenlemek herkes için ideal olmayabilir. Teknoloji konusunda bilgili değilseniz, WordPress sitenizde JavaScript'in ayrıştırılmasını ertelemek için bir eklenti kullanabilirsiniz.

zaman uyumsuz JavaScript

Async JavaScript, bu görevi gerçekleştirmek için WordPress sitenize indirip yükleyebileceğiniz ücretsiz bir eklentidir.

Özelliği etkinleştirmek için eklentinin ayarlar alanındaki Async JavaScript'i Etkinleştir seçeneğini işaretleyin. Ardından, Eşzamansız JavaScript Yöntemi bölümüne gidin ve eşzamansız veya erteleme yöntemini kullanmak isteyip istemediğinizi seçin.

Daha gelişmiş seçenekler için sayfayı aşağı kaydırın. Burada, zaman async ve defer etiketlerini uygulamak istediğiniz komut dosyalarını listeleyebilirsiniz. Ardından, hariç tutulacak komut dosyalarının bir listesini de ekleyebilirsiniz. Bu eklentinin yaptığı değişikliklerden hariç tutulacak eklentileri ve temaları da listeleyebilirsiniz.

otomatik optimize et

Komut dosyalarınızı ayrıştırmayı erteleme seçeneği, Async JavaScript ile aynı yazar tarafından oluşturulan Autoptimize eklentisinin bir parçası olarak da mevcuttur.

Eklentinin ayarlar sayfasında JavaScript Kodunu Optimize Et seçeneğini işaretleyin; gerekli olmayan komut dosyalarınız ertelenecek ve altbilgiye taşınacaktır. Ekstra sekmesinde, zaman async özniteliği eklemek istediğiniz komut dosyalarını da listeleyebilirsiniz.

Toplama

Bu eğitimde, önce sayfa hızının önemini ve JavaScript'in oluşturulmasının nasıl çalıştığını tartıştık. Ardından, JavaScript'in ayrıştırılmasını ertelemenizin nedenlerini araştırdık.

Son olarak, WordPress'te başarabileceğiniz iki seçeneğe baktık. script etiketlerinize zaman async veya defer nitelikleri eklemek için function.php dosyasını düzenleyebilir veya komut dosyalarınızı optimize etmek için Async JavaScript veya Autoptimize gibi bir eklenti kullanabilirsiniz.

WordPress'te JavaSript'in ayrıştırılmasının nasıl erteleneceği hakkında herhangi bir sorunuz var mı? Eğer öyleyse, lütfen aşağıdaki yorumlarda sormaktan çekinmeyin.