Üçüncü taraf komut dosyası yavaşayorsa performansı artırmak için iki seçeneğiniz vardır:
- Sitenize net bir değer katmıyorsa bu ifadeyi kaldırın.
- Yükleme sürecini optimize edin.
Bu yayında, üçüncü taraf komut dosyalarının yükleme sürecinin nasıl optimize edileceği açıklanmaktadır kullanabilirsiniz:
<script>etiketlerindeasyncveyadeferö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
Eşzamanlı komut dosyaları, DOM'yi geciktirdiğinden için üçüncü taraf komut dosyalarını yüklemeniz gerekir. komut dosyasının sayfanın oluşturulabilmesi için çalışması gerekmedikçe eşzamansız olarak çalıştırmanız gerekir.
async ve defer özellikleri, tarayıcıya ayrıştırmaya devam edebileceğini bildirir
komut dosyasını arka planda yüklerken HTML kodunu girmeli, ardından komut dosyasını çalıştırmalıdır
yüklenmesi gerekir. Böylece, komut dosyası indirme işlemleri DOM oluşturmayı veya sayfayı engellemez.
oluşturarak, kullanıcının tüm komut dosyaları tamamlanmadan önce sayfayı görmesini sağlar.
yükleniyor.
<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ütür.
async
async özelliğine sahip komut dosyaları, çalıştırıldıktan sonraki ilk fırsatta yürütülür
indirme işlemini bitirdikten sonra ve pencerenin
load etkinliği. Bunun anlamı şudur:
async komut dosyalarının çalıştırılmak üzere
bunlar HTML'de görünür. Bu, aynı zamanda DOM oluşturma işlemini kesintiye uğratabilecek
ayrıştırıcı hâlâ çalışırken indirme işlemini bitirebilir.
async içeren komut dosyaları yine de engelleyebilir
HTML ayrıştırmasıyla ilgili daha fazla bilgi edinin.defer
defer özelliğine sahip komut dosyaları, HTML ayrıştırma işlemi tamamen tamamlandıktan sonra yürütülür
tamamlandı, ancak
DOMContentLoaded
unutmayın. defer, komut dosyalarının HTML'de göründükleri sırayla çalışmasını sağlar ve
ayrıştırıcıyı engellemez.
defer bekleyen komut dosyaları
tarayıcı HTML'yi ayrıştırmıştır.- Komut dosyasının yükleme sırasında daha erken çalıştırılması önemliyse
asynckullanın bahsedeceğim. - Aşağıda belirtilen video oynatıcı gibi daha az kritik kaynaklar için
deferkullanın yardımcı olur.
Bu özelliklerin kullanılması sayfa yüklemeyi önemli ölçüde hızlandırabilir. Örneğin, Telegraph tüm komut dosyalarını erteledi, reklamlar ve analizler dahil edildi ve reklam yükleme süresini ortalama dört saniye.
Gerekli kaynaklara erken bağlantılar oluşturun
Süre tahmini olarak 100-500 ms ekosistemi kullanarak için kullanılan bir kaynaktır.
İki <link> türü,
preconnect ve dns-prefetch şu konularda yardımcı olabilir:
preconnect
<link rel="preconnect">, tarayıcıya sayfanızın bir
ve işlemin en kısa sürede başlamasını istediğinizi belirten bir ileti alırsanız
yardımcı olabilirsiniz. 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>, Search Ads 360'ta
Herkese açık kullanıcı adları <link rel="preconnect">. Bağlantı kurmak için DNS
güvenli kaynaklar için TLS iletişimleridir.
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. Örneğin,
daha önemsiz üçüncü taraf alanlarında <link rel=dns-prefetch> kullanın.
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch için tarayıcı desteği
preconnect destek ekibinden biraz farklıdır.
Böylece dns-prefetch,
preconnect. 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
Aşağıdaki durumlarda yerleştirilmiş üçüncü taraf kaynakları, sayfanın yüklenmesini önemli ölçüde yavaşlatabilir oluşturulan bu görseldir. Yorumlar kritik değilse veya ekranın alt kısmındaysa (yani kullanıcıların bunları görmek için sayfayı kaydırması gerekiyorsa) geç yükleme yöntemi sayfa hızını ve boyama metriklerini iyileştirmek. Bu şekilde kullanıcılar ana sayfa içeriğini alır ve daha iyi bir deneyim yaşamanızı sağlar.
Etkili bir yaklaşım, ana sayfadan sonra üçüncü taraf içeriğini geç yüklemektir emin olun. 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 içerik. Reklamları geç yükleyerek ve ana içeriği daha hızlı sunarak Bir reklamın genel görüntülenebilirlik yüzdesini artırır. Örneğin, MediaVine geç yüklenen reklamlara geçiş yapıldı ve sayfa yükleme hızında% 200 artış sağladı. Google Ad Manager'da dokümanlar var reklamların geç yüklenmesi hakkında daha fazla bilgi edinin.
Üçüncü taraf içeriğini yalnızca kullanıcılar ilk sayfayı aşağı kaydırdığında yüklenecek şekilde de ayarlayabilirsiniz. otomatik olarak seçim yapar.
Kesişim Gözlemcisi
bir öğe giriş veya çıkış yaptığında verimli bir şekilde algılayan bir tarayıcı API'sidir
ve bu tekniği uygulamak için onu kullanabilirsiniz.
lazysizes popüler bir JavaScript kitaplığıdır
iframes, geç yükleme resimleri için geçerli.
YouTube yerleştirmelerini destekler ve
widgets'a ekleyin.
Ayrıca isteğe bağlı destek mevcuttur.
örneğidir.
Resimleri ve iframe'leri geç yükleme için loading özelliğini kullanma
JavaScript tekniklerine mükemmel bir alternatiftir ve son zamanlarda yaygın olarak
kullanıma sunuldu!
Üçüncü taraf komut dosyalarını sunma şeklinizi optimize edin
Aşağıda, üçüncü taraf komut dosyalarıdır.
Üçüncü taraf CDN barındırma
Üçüncü taraf tedarikçilerin, yükledikleri JavaScript dosyalarının URL'lerini sağlamaları yaygın bir durumdur. genellikle bir içerik yayınlama ağında (CDN) barındırıcıdır. Bu yaklaşımın avantajı, hızlı bir şekilde başlayabilmenizdir. URL'yi kopyalayıp yapıştırın. Böylece, bakım için herhangi bir ek ücret ödemeniz gerekmez. İlgili içeriği oluşturmak için kullanılan Sunucu yapılandırması ve komut dosyası güncellemelerini üçüncü taraf tedarikçi firma yönetir.
Ancak diğer kaynaklarınızla aynı kökende olmadıkları için Herkese açık bir CDN'den dosya yüklemenin bir ağ maliyeti vardır. Tarayıcının şunları yapması gerekir: DNS araması gerçekleştirebilir, yeni bir HTTP bağlantısı kurabilir ve güvenli kaynaklarda satıcının sunucusuyla SSL anlaşması yapın.
Üçüncü taraf sunucularındaki dosyaları kullandığınızda, dosyaların ve üçüncü taraf önbelleğe alma. Başka birinin önbelleğe alma stratejisini kullanmak, ağdan gereksiz yere çok sık yeniden getirilir.
Kendi bünyesindeki üçüncü taraf komut dosyaları
Kendi bünyesinde barındıran üçüncü taraf komut dosyaları, komut dosyaları üzerinde daha fazla kontrol sahibi olmanızı sağlayan bir seçenektir. komut dosyasının yükleme işlemini tamamlayın. Kendi bünyesinde barındırma özelliği sayesinde:
- DNS araması ve geri dönüş sürelerini kısaltın.
- HTTP önbelleğe alma üst bilgilerini iyileştirin.
- HTTP/2 veya daha yeni olan HTTP/3'ten yararlanın.
Örneğin, Casper 1,7 saniye tıraş etmeyi başardı ve A/B testi komut dosyası barındırarak yükleme sürelerini kısaltır.
Ancak self servis barındırmanın bir de büyük dezavantajı vardır: komut dosyaları güncelliğini yitirebilir ve , 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 çalışanlarını kullanma
Üçüncü taraf sunuculardaki komut dosyalarını önbelleğe almak için Service Worker'ları kullanabilirsiniz. barındırmaya alternatif olarak tasarlanmıştır. Bu size, önbelleğe alma üzerinde daha fazla kontrol sunar. üçüncü taraf CDN'lerin avantajlarından yararlanmaya devam edebilirsiniz.
Komut dosyalarının ağdan ne sıklıkta yeniden getirileceğini ve
gerekli olmayan ve
kullanıcı sayfada önemli bir etkileşime ulaşana kadar üçüncü taraf kaynaklarını kullanır.
preconnect ile erkenden bağlantı kurabilir ve aynı zamanda
ağ maliyetlerini azaltmanıza yardımcı olur.