Lighthouse raporunuzun Fırsatlar bölümünde, henüz getirme isteklerine öncelik vermeyen tüm önemli isteklerin listesi <link rel=preconnect> ile gösterilir:
Tarayıcı uyumluluğu
<link rel=preconnect> çoğu tarayıcıda desteklenir. Tarayıcı uyumluluğu başlıklı makaleyi inceleyin.
Önceden bağlantı oluşturma ile sayfa yükleme hızını artırma
Önemli üçüncü taraf kaynaklarına erken bağlantılar oluşturmak için preconnect veya dns-prefetch kaynak ipuçları ekleyebilirsiniz.
<link rel="preconnect">, tarayıcıyı sayfanızın başka bir kaynakla bağlantı kurmak istediğini ve işlemin bir an önce başlatılmasını istediğinizi bilgilendirir.
Yavaş ağlarda bağlantı kurmak genellikle uzun bir süre alır. Özellikle güvenli bağlantılar söz konusu olduğunda DNS aramaları, yönlendirmeler ve kullanıcının isteğini işleyen son sunucuya birkaç gidiş geliş gerektirebileceğinden bu süre daha da uzayabilir.
Tüm bunları önceden halletmek, bant genişliği kullanımını olumsuz etkilemeden uygulamanızın kullanıcılar için çok daha hızlı çalıştığını hissettirebilir. Bağlantı kurmak için gereken zaman, çoğu zaman veri alışverişi yapmaktan ziyade bekleyerek geçirilir.
Tarayıcıyı amacınız hakkında bilgilendirmek, sayfanıza bir bağlantı etiketi eklemek kadar kolaydır:
<link rel="preconnect" href="https://example.com">
Bu, tarayıcının sayfanın example.com'e bağlanıp oradan içerik almak istediğini bilmesini sağlar.
<link rel="preconnect"> oldukça ucuz olsa da özellikle güvenli bağlantılarda değerli CPU süresini alabileceğini unutmayın.
Bu durum, bağlantı 10 saniye içinde kullanılmazsa özellikle kötüdür. Tarayıcının bağlantıyı kapatması, erken bağlantı çalışmasının tümünü boşa çıkarır.
Genel olarak, performansla ilgili daha kapsamlı bir ayar olduğu için <link rel="preload"> kullanmayı deneyin. Ancak aşağıdaki gibi uç durumlar için <link rel="preconnect"> öğesini alet kemerinizde tutun:
- Kullanım alanı: Neleri getirdiğinizi değil, nereden getirdiğinizi bilme
- Kullanım alanı: Akış Medyası
<link rel="dns-prefetch">, bağlantılarla ilgili başka bir <link> türüdür.
Bu yöntem yalnızca DNS aramasını gerçekleştirir ancak daha geniş tarayıcı desteğine sahiptir. Bu nedenle, yedek bir yöntem olarak kullanılabilir.
Tam olarak aynı şekilde kullanırsınız:
<link rel="dns-prefetch" href="https://example.com" />.
Pakete özel yönergeler
Drupal
Preconnect veya dns-prefetch kaynak ipuçları, kullanıcı aracısı kaynak ipuçları için hizmetler sağlayan bir modülü yükleyip yapılandırarak eklenebilir.
Magento
Temalarınızın düzenini değiştirin ve önceden bağlanma veya DNS önceden getirme kaynak ipuçları ekleyin.