Üçüncü taraf bir komut dosyası sayfa yüklemenizi yavaşlatıyorsa performansı artırmak için iki seçeneğiniz vardır:
- Sitenize net bir değer katmıyorsa bu metni kaldırın.
- Yükleme işlemini optimize edin.
Bu yayında, üçüncü taraf komut dosyalarının yükleme işlemini aşağıdaki tekniklerle nasıl optimize edeceğiniz açıklanmaktadır:
<script>etiketlerindeasyncveyadeferözelliğini kullanma- Gerekli kaynaklara erken bağlantılar kurma
- Geç yükleme
- Üçüncü taraf komut dosyalarını sunma şeklinizi optimize etme
async veya defer kullanın
Eşzamanlı komut dosyaları DOM oluşturmayı ve oluşturmayı geciktirdiğinden, sayfa oluşturulmadan önce komut dosyasının çalışması gerekmedikçe üçüncü taraf komut dosyalarını her zaman eşzamansız 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ı çalıştırabileceğini bildirir. Bu sayede, komut dosyası indirme işlemleri DOM oluşturma işlemini veya sayfa oluşturmayı engellemez ve kullanıcının, tüm komut dosyalarının yüklenmesi tamamlanmadan sayfayı görebilmesini sağlar.
<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 sonra ilk fırsatta ve pencerenin load 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 büyük olasılıkla) anlamına gelir. Ayrıştırıcı hâlâ çalışırken indirme işlemini tamamlarsa DOM oluşturma işlemini kesintiye uğratabilirler.
async içeren komut dosyaları da HTML ayrıştırmasını engelleyebilir.defer
defer özelliğine sahip komut dosyaları, HTML ayrıştırması tamamen bittikten sonra 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ı sağlar ve ayrıştırıcıyı engellemez.
defer içeren komut dosyaları, tarayıcı HTML'yi ayrıştırma işlemi tamamlanana kadar çalışır.- Yükleme işleminde komut dosyasının daha erken çalıştırılması önemliyse
asynckullanın. - Ekranın alt kısmındaki video oynatıcı gibi daha az kritik kaynaklar için
deferkullanın.
Bu özellikleri kullanmak sayfa yüklemeyi önemli ölçüde hızlandırabilir. Örneğin, Telegraph, reklamlar ve analizler de dahil olmak üzere tüm komut dosyalarını erteledi ve reklam yükleme süresini ortalama dört saniye iyileştirdi.
Gerekli kaynaklara erken bağlantılar oluşturma
Önemli üçüncü taraf kaynaklara erken bağlantılar kurarak 100-500 ms. tasarruf edebilirsiniz.
İki <link> türü (preconnect ve dns-prefetch) burada 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ğini bildirir. 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 alt kümesini yönetir. Bağlantı kurmak için DNS araması ve TCP el sıkışması, güvenli kaynaklar için de TLS müzakereleri gerekir.
dns-prefetch, tarayıcıya belirli bir alan adının açıkça çağrılmadan önce DNS'sini yalnızca çözümlemesini bildirir.
preconnect ipucu, yalnızca en kritik bağlantılar için en iyi uygulamadı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'i desteklemeyen tarayıcılar için yedek işlevi görebilir. 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ü oluşturulmaları halinde sayfaların yüklenme hızını önemli ölçüde yavaşlatabilir. Kritik öneme sahip olmayan veya ekranın alt kısmındaysa (yani, kullanıcılar bunları görüntülemek için sayfayı kaydırmak zorunda kalıyorsa) geç yükleme, sayfa hızını iyileştirmenin ve metrikleri boyamanın iyi bir yoludur. Bu şekilde, kullanıcılar ana sayfa içeriğini daha hızlı alır ve daha iyi bir deneyim yaşar.
Etkili yaklaşımlardan biri, üçüncü taraf içeriğini, ana sayfa içeriği yüklendikten sonra geç yüklemektir. Reklamlar bu yaklaşım için iyi bir adaydır.
Reklamlar birçok site için önemli bir gelir kaynağı olsa da kullanıcılar içeriği görmek 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, geç yüklenen reklamlara geçerek sayfa yükleme hızında% 200 artış elde etti. Google Ad Manager'da reklamların nasıl geç yükleneceğiyle ilgili belgeler bulunur.
Üçüncü taraf içeriğinin, yalnızca kullanıcılar sayfanın ilgili bölümüne ilk geldiğinde yüklenecek şekilde de ayarlayabilirsiniz.
Intersection Observer: Bir öğe tarayıcının görüntü alanına girdiğinde veya görüntü alanından çıktığında bunu etkili bir şekilde algılayan tarayıcı API'sidir ve bu tekniği uygulamak için onu kullanabilirsiniz. lazysizes, resimleri ve iframes geç yüklenmesi için kullanılan popüler bir JavaScript kitaplığıdır.
YouTube yerleştirmelerini ve widget'larını destekler.
Ayrıca Intersection Observer için isteğe bağlı destek sunar.
Resimlerin ve iframe'lerin geç yüklenmesi için loading özelliğinin kullanılması, JavaScript tekniklerine mükemmel bir alternatiftir. Bu özellik kısa süre önce Chrome 76'da da kullanıma sunulmuştur.
Üçüncü taraf komut dosyalarını sunma şeklinizi optimize etme
Aşağıda, üçüncü taraf komut dosyalarını kullanımınızı optimize etmek için önerilen bazı stratejiler verilmiştir.
Üçüncü taraf CDN barındırma
Üçüncü taraf tedarikçi firmaların, barındırdıkları JavaScript dosyalarının URL'lerini genellikle bir içerik yayınlama ağında (CDN) sağlamaları yaygın bir durumdur. Bu yaklaşımın avantajları, hızlı bir başlangıç yapabilmenizdir. URL'yi kopyalayıp yapıştırmanız yeterlidir. Üstelik hiçbir bakım yükü yoktur. Sunucu yapılandırması ve komut dosyası güncellemeleri üçüncü taraf tedarikçi firma tarafından yönetilir.
Ancak, kaynaklarınızın geri kalanıyla aynı kaynakta olmadıklarından herkese açık CDN'den dosya yüklemenin bir ağ maliyeti olur. Tarayıcının bir DNS araması gerçekleştirmesi, yeni bir HTTP bağlantısı kurması ve güvenli kaynaklarda satıcının sunucusuyla SSL el sıkışması gerçekleştirmesi gerekir.
Üçüncü taraf sunuculardan gelen dosyaları kullandığınızda, önbelleğe alma üzerinde nadiren kontrol sahibi olursunuz. Başka birinin önbelleğe alma stratejisini kullanmak, komut dosyalarının ağdan çok sık yeniden alınmasına neden olabilir.
Üçüncü taraf komut dosyalarını kendi kendine barındıran
Kendi kendine barındırılan üçüncü taraf komut dosyaları, bir komut dosyasının yükleme işlemi üzerinde daha fazla kontrol sahibi olmanızı sağlayan bir seçenektir. Kendi barındırma hizmetini kullanarak şunları yapabilirsiniz:
- DNS aramasını ve gidiş dönüş sürelerini kısaltı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 kendine 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 API değişikliği ya da güvenlik düzeltmesi olduğunda otomatik güncelleme alamaz.
Üçüncü taraf sunuculardaki komut dosyalarını önbelleğe almak için Service Worker'ları kullanma
Kendi kendini barındırmaya alternatif olarak üçüncü taraf sunuculardaki komut dosyalarını önbelleğe almak için Service Worker'ları kullanabilirsiniz. Bu, üçüncü taraf CDN'lerin avantajlarını korurken önbelleğe alma üzerinde daha fazla kontrol sahibi olmanızı sağlar.
Komut dosyalarının ağdan ne sıklıkla yeniden getirileceğini kontrol edebilir ve kullanıcı sayfada önemli bir etkileşime ulaşana kadar gerekli olmayan üçüncü taraf kaynaklarına yönelik istekleri kısıtlayan bir yükleme stratejisi oluşturabilirsiniz.
preconnect sayesinde erkenden bağlantılar kurabilir ve ağ maliyetlerinin azaltılmasına yardımcı olabilirsiniz.