WordPress'te Komut Dosyası Yüklemesi Nasıl Geciktirilir

Yayınlanan: 2022-05-02

WordPress'te komut dosyası yüklemesini geciktirmenin bir yolunu mu arıyorsunuz?

WordPress kullanıcıları, web sitelerinin yükleme süresini iyileştirmek için her zaman en son tekniklerin peşindedir. Hız, başarılı bir çevrimiçi varlık yaratan birçok faktör için inanılmaz derecede önemlidir. WordPress hızı söz konusu olduğunda ana öğelerden ikisi, ziyaretçi deneyimi ve arama motoru sıralamalarıdır.

Bir WordPress web sitesinin işlevselliğini veya görünürlüğünü artıran birçok üçüncü taraf aracı vardır. Bu üçüncü taraf araçlar, işlevlerini bir WordPress web sitesine eklemek için JavaScript kullanır.

Bu eklenen üçüncü taraf JavaScript'in dezavantajı, çoğu durumda komut dosyasının bulunduğu her URL'nin sayfa yükleme süresini artırmasıdır.

Bu, sayfanızda komut dosyası nerede olursa olsun ve bir ziyaretçi o sayfaya erişmeye çalışıyorsa, komut dosyası nedeniyle sayfanın tam olarak yüklenmesi için geçen sürenin artacağı anlamına gelir.

Belki de web sitenizin daha hızlı mı yoksa yavaş mı olduğundan emin bile değilsiniz. Sitenizin hızını belirlemek için kullanabileceğiniz bazı ücretsiz web sitesi hız testi araçları hakkında size bilgi vermesi için aşağıdaki bağlantıya bir göz atın.
https://www.wpfixit.com/free-website-speed-testing-tools/

Hız için işlevsellik ticareti yapmak zorunda olmanız adil görünmüyor, değil mi?


Harici Komut Dosyaları Sitenizin Sayfa Yüklenmesinde Pahalıdır

Üçüncü taraf komut dosyaları her yerdedir. HTTP Archive tarafından hazırlanan JavaScript Durumu raporuna göre, web siteleri tarafından talep edilen medyan harici komut dosyası sayısı 20'dir ve toplam boyutları yaklaşık 449 KB'dir .

Web sayfalarının %93,59'u en az bir üçüncü taraf kaynağı içerir. Aynı verilere daha derine inmek, web sitelerinin %76'sının kullanıcıları analitik komut dosyalarıyla izlediğini gösteriyor.

Üçüncü taraf komut dosyalarının en kötü etkisi, kritik oluşturma yolunu geciktirmek ve ayrıca FID notundan başlayarak Önemli Web Verileri puanlarınızı etkilemesidir.

Kritik oluşturma yolu, bir tarayıcının HTML, CSS ve JavaScript'i canlı, kullanılabilir bir web sitesinde birleştirmek için yaptığı eylemler dizisidir.

Doğal olarak, üçüncü taraf komut dosyalarının yük boyutu burada önemli bir rol oynar, ancak dikkate alınması gereken başka bir önemli faktör daha vardır.

JavaScript, yürütmek için çok fazla CPU kaynağı alır. Oluşturma süresi üzerindeki etkiyi azaltmak için üçüncü taraf komut dosyalarını optimize etseniz bile, Etkileşim Süresi metriğini etkileyebilirler. Kullanıcıların bir web sayfasıyla ne kadar hızlı etkileşime girebileceğini ölçer.

Ne kadar yavaş olursa, kullanıcılarınız o kadar sinirlenir ve web sitenizi terk etme şansları o kadar yüksek olur.


WordPress'te En Sık Kullanılan Harici Komut Dosyaları

Aşağıda, bir WordPress web sitesinde en sık kullanılan harici komut dosyalarının bir listesi bulunmaktadır. Bunların birçoğunu muhtemelen web sitenizde kullandığınız için tanıyacaksınız.

  1. Google Analytics
  2. Facebook Piksel Kodu
  3. Canlı Sohbet Widget'ları
  4. Video Gömmeleri
  5. Gömülü Formlar
  6. Sosyal Medya Widget'ları
  7. Gömülü Formlar

WordPress'te Komut Dosyası Yüklemesini Ertelediğinizde Mükemmelliğe Ulaşın

İşlevsellik için hızdan ödün vermenize gerek yok.

Ya ikisine de sahip olabileceğini söylesek?

Üçüncü taraf komut dosyalarını kullanarak WordPress web sitenizin işlevselliğini ve görünürlüğünü artırın ve ayrıca web sitenizdeki her sayfanın ziyaretçileriniz için mümkün olduğunca hızlı yüklenmesini sağlayın.

Bu mümkündür ve WordPress'te komut dosyası yüklemesini geciktirdiğiniz bir işlemle yapılır.

Normal koşullarda, web sitenizde dahili bir komut dosyası kullandığınızda, bir ziyaretçi site URL'lerinizden birine eriştiğinde sayfayla birlikte yüklenir.

WordPress'te komut dosyası yüklemesini geciktirdiğinizde, harici komut dosyası, belirlenen gecikme süresi sona erene kadar yüklenmeye başlamaz.

Örneğin, gecikme süresini 4 saniyeye ayarlarsanız, bu, sayfa tamamen yüklendikten sonra komut dosyasının 4 saniyeye kadar yürütülmeyeceği anlamına gelir.

Bu son derece güçlüdür çünkü sayfa yüklemesinin komut dosyasının tamamlanmasını beklemediği anlamına gelir. Sayfalar daha hızlı yüklendiğinden ziyaretçi deneyiminiz iyileşir ve web sitenizdeki URL'lerden birini test etmek için kullandığınız herhangi bir hız testi aracı daha iyi sonuçlar verir.

Normal bir harici komut dosyası yüklemesi ile gecikmeli komut dosyası yüklemesi arasındaki farka aşağıda bir göz atalım.


Normal Harici Komut Dosyası Yüklemesi

Aşağıdaki resim, üzerinde yerleşik bir TrustPilot referans widget'ı olan bir URL'nin şelale yükünü göstermektedir.

Resimde gördüğünüz gibi bu sayfaya yüklenmekte olan 5 harici istek var. Bu istekler, gömülü harici komut dosyasından geliyor.

Delay Script Load in WordPress
NORMAL HARİCİ YAZILI YAZILIMI
WordPress Load Script 1
NORMAL HARİCİ YAZILI YAZILIMI

Harici Komut Dosyası Yüklemesini Geciktirme

Şimdi WordPress'te gecikmeli komut dosyası yüklemesi ile yüklenen aynı sayfaya bir göz atalım.

Bu TrustPilot referans widget'ı hala sayfada gömülüdür ancak sayfa yüklendikten 2,5 saniye sonra yüklenmesi için gecikmeli bir süre belirledik.

Sadece istek miktarı azalmakla kalmadı, aynı zamanda tam yükleme süresine ve azalan yükleme süresine de bir göz atın.

Sanki script yükleme sırasında sayfada bile yokmuş gibi.

WordPress Delay Load Script
GECİKMELİ HARİCİ YAZILIM YERLEŞTİRİLMESİ
WordPress Delay Load Script 1
GECİKMELİ HARİCİ YAZILIM YERLEŞTİRİLMESİ

Şimdi, harici komut dosyaları için yükleme süresinin yüksek maliyetini ve bunları hızdan ödün vermeden nasıl kullanabileceğinizi açıkladığımıza göre, size mükemmelliği elde etmek için uygulamanız gereken kodu tam olarak gösterelim.

WordPress'te Orijinal Yükleme Komut Dosyası Yüklemesi

Aşağıdaki kod, yukarıdaki hız testlerinde kullandığımız bu TrustPilot widget'ı için varsayılan komut dosyasıdır.

 <!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->

WordPress'te Komut Dosyasını Geciktirme

Aşağıdaki kod, yukarıdaki hız testlerinde kullandığımız bu TrustPilot widget'ının gömülü gecikmeli komut dosyasıdır.

 <!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
    head_ID.appendChild(script_element);
}, 2500 ); // ZAMAN GECİKMESİNİ AYARLAYABİLİRSİNİZ
</script>
<!-- TrustBox betiğini sonlandırın -->

<!-- TrustBox widget'ı - Döngü -->
<div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme=" light" data-stars="1,2,3,4,5" data-review-languages="tr">
</div>
<!-- TrustBox pencere öğesini sonlandırın -->

WordPress'te Herhangi Bir Kullanım Gecikmesi Komut Dosyası Yüklemesi

Aşağıdaki kod, WordPress'te komut dosyasının yüklenmesini geciktirmek için kullanabileceğiniz varsayılan şablondur.

Bu şablonda değiştirilmesi gereken yalnızca iki öğe var.

  1. Kullanmak istediğiniz harici komut dosyasının URL'si
  2. Komut dosyasının çalışmasını istediğiniz zaman gecikmesi
 <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
    head_ID.appendChild(script_element);
}, 2500 ); // ZAMAN GECİKMESİNİ AYARLAYABİLİRSİNİZ
</script>

Sonuç olarak

Bu gönderinin gerçekten yardımcı olduğunu ve WordPress'te komut dosyası yüklemesinin nasıl geciktirileceğini anladığını umuyoruz.

Bunu gerçekten WordPress web sitenizde kullandığınız herhangi bir üçüncü taraf harici komut dosyası için kullanmalısınız ve sayfa yükleme süresinde arama motoru sıralamanıza ve genel ziyaretçi deneyiminize fayda sağlayacak ani bir düşüş göreceksiniz.

Bu gönderide okuduğunuz herhangi bir şeyi uygulamada herhangi bir sorun yaşarsanız, lütfen aşağıya yorum yapın ve nerede takıldığınızı görebiliriz.