Üçüncü taraf JavaScript'i verimli bir şekilde yükleyin

Milica Mihajlija

Bir üçüncü taraf komut dosyası sayfa yüklemenizi yavaşlatıyorsa performansı iyileştirmek için iki seçeneğiniz vardır:

• Sitenize net bir değer katmıyorsa bu ifadeyi kaldırın.
• Yükleme işlemini optimize edin.

Bu yayında, aşağıdaki tekniklerle üçüncü taraf komut dosyalarının yükleme sürecinin nasıl optimize edileceği açıklanmaktadır:

• <script> etiketlerinde async veya defer özelliğini kullanma
• Gerekli kaynaklara erken bağlantı kurma
• Geç yükleme
• Üçüncü taraf komut dosyalarını sunma şeklinizi optimize etme

async veya defer kullanın

Senkron komut dosyaları DOM oluşturma ve oluşturma işlemlerini geciktirdiğinden, sayfanın oluşturulabilmesi için komut dosyasının çalıştırılması gerekmediği sürece üçüncü taraf komut dosyalarını her zaman asenkron olarak yüklemeniz gerekir.

async ve defer özellikleri, tarayıcıya komut dosyasını arka planda yüklerken HTML'yi ayrıştırmaya devam edebileceğini ve ardından komut dosyasını yüklendikten sonra yürütebileceğini bildirir. Bu sayede, komut dosyası indirmeleri DOM oluşturmayı veya sayfa oluşturmayı engellemez. Böylece kullanıcı, tüm komut dosyalarının yüklenmesi tamamlanmadan önce sayfayı görebilir.

<script async src="script.js">

<script defer src="script.js">

async ve defer özellikleri arasındaki fark, tarayıcının komut dosyalarını yürütmesidir.

async

async özelliğine sahip komut dosyaları, indirme işlemi bittikten sonraki ilk fırsatta ve pencerenin yükleme etkinliğinden önce yürütülür. Bu, async komut dosyalarının HTML'de göründükleri sırayla çalışmayabileceği (ve muhtemelen) anlamına gelir. Ayrıca, ayrıştırıcı hâlâ çalışırken indirme işlemini tamamlarlarsa DOM oluşturma işlemini kesintiye uğratabilirler.

defer

defer özelliğine sahip komut dosyaları, HTML ayrıştırma işlemi tamamen bittikten sonra, ancak DOMContentLoaded etkinliğinden önce yürütülür. defer, komut dosyalarının HTML'de göründükleri sırayla çalışmasını ve ayrıştırıcıyı engellememesini sağlar.

• Komut dosyasının yükleme işleminin daha erken bir aşamasında çalıştırılması önemliyse async kullanın.
• Ekranın alt kısmındaki video oynatıcı gibi daha az kritik kaynaklar için defer kullanın.

Bu özellikleri kullanmak sayfa yükleme hızını önemli ölçüde artırabilir. Örneğin, Telegraph, reklamlar ve analizler dahil tüm komut dosyalarını erteledi ve reklam yükleme süresini ortalama dört saniye iyileştirdi.

Gerekli kaynaklara erken bağlantılar kurma

Önemli üçüncü taraf kaynaklarına erken bağlantılar oluşturarak 100-500 ms tasarruf edebilirsiniz.

İki <link> türü (preconnect ve dns-prefetch) size yardımcı olabilir:

preconnect

<link rel="preconnect">, tarayıcıya sayfanızın başka bir kaynakla bağlantı kurmak istediğini ve işlemin mümkün olan en kısa sürede başlamasını istediğinizi belirtir. Tarayıcı, önceden bağlanmış kaynaktan bir kaynak istediğinde indirme işlemi hemen başlar.

<link rel="preconnect" href="https://cdn.example.com">

dns-prefetch

<link rel="dns-prefetch>, <link rel="preconnect"> tarafından işlenen öğelerin küçük bir kısmını işler. Bağlantı kurmak için DNS araması ve TCP el sıkışması; güvenli kaynaklar için ise TLS iletişimleri gerekir. dns-prefetch, tarayıcıya belirli bir alan adının DNS'si açıkça çağrılmadan önce yalnızca bu alan adını çözümlemesini söyler.

preconnect ipucu, yalnızca en kritik bağlantılarda kullanılır. Daha az önemli üçüncü taraf alanları için <link rel=dns-prefetch> kullanın.

<link rel="dns-prefetch" href="http://example.com">

dns-prefetch için tarayıcı desteği, preconnect desteğinden biraz farklıdır. Bu nedenle dns-prefetch, preconnect'yi desteklemeyen tarayıcılar için bir yedek olarak kullanılabilir. Bunu güvenli bir şekilde uygulamak için ayrı bağlantı etiketleri kullanın:

<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">

Üçüncü taraf kaynaklarını geç yükleme

Yerleştirilmiş üçüncü taraf kaynakları, kötü bir şekilde oluşturulmaları halinde sayfa yüklemeyi önemli ölçüde yavaşlatabilir. Bunlar kritik öneme sahip değilse veya ekranın alt kısmındaysa (yani kullanıcıların bunları görüntülemek için sayfayı kaydırması gerekiyorsa) geç yükleme, sayfa hızını ve boyama metriklerini iyileştirmek için iyi bir yöntemdir. Bu sayede kullanıcılar ana sayfa içeriğini daha hızlı alır ve daha iyi bir deneyim yaşar.

Etkili bir yaklaşım, ana sayfa içeriği yüklendikten sonra üçüncü taraf içeriğini geç yüklemektir. Reklamlar bu yaklaşım için iyi bir adaydır.

Reklamlar birçok site için önemli bir gelir kaynağıdır ancak kullanıcılar siteye içerik için gelir. Reklamları geç yükleyerek ve ana içeriği daha hızlı yayınlayarak bir reklamın genel görüntülenebilirlik yüzdesini artırabilirsiniz. Örneğin, MediaVine yavaş yüklenen reklamlara geçiş yaptı ve sayfa yükleme hızında %200 artış elde etti. Google Ad Manager, reklamların geç yüklenmesi ile ilgili belgelere sahiptir.

Üçüncü taraf içeriğini, yalnızca kullanıcılar ilk önce sayfanın ilgili bölümüne kaydırdığında yüklenecek şekilde ayarlayabilirsiniz.

Kesişim Gözlemcisi, bir öğe tarayıcının görüntü alanına girdiğinde veya buradan çıktığını etkili bir şekilde algılayan bir tarayıcı API'sidir ve bu tekniği, bu tekniği uygularken kullanabilirsiniz. lazysizes, resimlerin geç yüklenmesi için kullanılan popüler bir JavaScript kitaplığıdır ve iframes. YouTube yerleşimlerini ve widget'larını destekler. Ayrıca, Kavşak Gözlemcisi için isteğe bağlı destek de sunar.

Resimlerin ve iframe'lerin geç yüklenmesi için loading özelliğinin kullanılması, JavaScript tekniklerine mükemmel bir alternatiftir ve kısa süre önce Chrome 76'da kullanıma sunulmuştur.

Üçüncü taraf komut dosyalarını yayınlama şeklinizi optimize etme

Üçüncü taraf komut dosyalarını kullanımınızı optimize etmek için önerilen bazı stratejiler aşağıda verilmiştir.

Üçüncü taraf CDN barındırma

Üçüncü taraf tedarikçi firmaların, genellikle bir içerik yayınlama ağında (CDN) barındırdıkları JavaScript dosyalarının URL'lerini sağlaması yaygın bir durumdur. Bu yaklaşımın avantajları, URL'yi kopyalayıp yapıştırarak hızlıca başlayabilmeniz ve bakım maliyeti olmamasıdır. Sunucu yapılandırması ve komut dosyası güncellemelerini üçüncü taraf tedarikçi firma yürütür.

Ancak, kaynakların geri kalanıyla aynı kaynakta bulunmadıkları için herkese açık bir CDN'den dosya yüklemek ağ maliyeti getirir. Tarayıcının bir DNS araması yapması, yeni bir HTTP bağlantısı oluşturması ve güvenli kaynaklarda satıcının sunucusuyla SSL anlaşması yapması gerekir.

Üçüncü taraf sunuculardaki dosyaları kullandığınızda, önbelleğe alma üzerinde nadiren kontrole sahip olursunuz. Başka birinin önbelleğe alma stratejisini kullanmak, komut dosyalarının ağdan gereksiz şekilde çok sık geri getirilmesine neden olabilir.

Kendi kendine barındırılan üçüncü taraf komut dosyaları

Üçüncü taraf komut dosyalarını kendi kendinize barındırmak, komut dosyasının yükleme süreci üzerinde daha fazla kontrol sahibi olmanızı sağlayan bir seçenektir. Kendi kendinize barındırma yaparak şunları yapabilirsiniz:

• DNS arama ve gidiş dönüş sürelerini azaltın.
• HTTP önbelleğe alma üst bilgilerini iyileştirin.
• HTTP/2 veya daha yeni HTTP/3'ten yararlanın.

Örneğin Casper, bir A/B testi komut dosyasını kendi bünyesinde barındırarak yükleme sürelerini 1,7 saniye kısaltmayı başardı.

Ancak kendi kendine barındırmanın önemli bir dezavantajı vardır: Komut dosyaları güncelliğini yitirebilir ve bir API değişikliği veya güvenlik düzeltmesi olduğunda otomatik güncelleme almaz.

Üçüncü taraf sunuculardaki komut dosyalarını önbelleğe almak için hizmet işçilerini kullanma

Kendi kendine barındırmaya alternatif olarak üçüncü taraf sunuculardaki komut dosyalarını önbelleğe almak için hizmet işçilerini kullanabilirsiniz. Bu sayede, üçüncü taraf CDN'lerin avantajlarından yararlanırken önbelleğe alma üzerinde daha fazla kontrol sahibi olabilirsiniz.

Komut dosyalarının ağdan ne sıklıkta yeniden getirileceğini kontrol edebilir ve bir kullanıcı sayfada önemli bir etkileşime ulaşana kadar gerekli olmayan üçüncü taraf kaynaklara yönelik istekleri kısıtlayan bir yükleme stratejisi oluşturabilirsiniz. preconnect ile erkenden bağlantı kurabilir ve ağ maliyetlerini azaltmaya yardımcı olabilirsiniz.