Lighthouse raporunuzun Fırsatlar bölümünde, henüz <link rel=preconnect> ile getirme isteklerine öncelik vermeyen tüm önemli istekler listelenir:
Tarayıcı uyumluluğu
<link rel=preconnect> çoğu tarayıcıda desteklenir. Tarayıcı uyumluluğu bölümüne bakın.
preconnect 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ı ekleme seçeneğini değerlendirin.
<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 bildirir.
Yavaş ağlarda bağlantı kurmak çoğu zaman uzun bir süre alabilir. Özellikle güvenli bağlantılar söz konusu olduğunda bu süre daha da uzayabilir. Çünkü bu durumda DNS aramaları, yönlendirmeler ve kullanıcının isteğini işleyen son sunucuya birkaç gidiş-dönüş gerekebilir.
Tüm bunları önceden halletmek, bant genişliği kullanımını olumsuz etkilemeden uygulamanızın kullanıcıya çok daha hızlı gelmesini sağlayabilir. Bağlantı oluşturma süresinin çoğu, veri alışverişi yapmak yerine bekleyerek geçer.
Tarayıcıyı niyetiniz hakkında bilgilendirmek için sayfanıza bir bağlantı etiketi eklemeniz yeterlidir:
<link rel="preconnect" href="https://example.com">
Bu, tarayıcıya sayfanın example.com ile bağlantı kurmayı ve buradan içerik almayı amaçladığını bildirir.
<link rel="preconnect"> oldukça ucuz olsa da özellikle güvenli bağlantılarda değerli CPU süresini kullanabileceğini unutmayın.
Bağlantı 10 saniye içinde kullanılmazsa tarayıcı bağlantıyı kapatır ve erken bağlantı çalışması boşa gider. Bu durum özellikle kötü olur.
Genel olarak, daha kapsamlı bir performans ayarı olduğu için <link rel="preload"> kullanmaya çalışın. Ancak aşağıdaki gibi uç durumlarda <link rel="preconnect">'ı da kullanmaya devam edin:
- Kullanım alanı: Nereden getirdiğinizi biliyorsunuz ancak ne getirdiğinizi bilmiyorsunuz
- Kullanım alanı: Medya akışı
<link rel="dns-prefetch">, bağlantılarla ilgili başka bir <link> türüdür.
Bu yöntem yalnızca DNS aramasını işler ancak daha geniş tarayıcı desteğine sahiptir. Bu nedenle, iyi bir yedek olarak kullanılabilir.
Aynı şekilde kullanırsınız:
<link rel="dns-prefetch" href="https://example.com" />.
Yığına özel rehberlik
Drupal
Preconnect veya dns-prefetch kaynak ipuçları, kullanıcı aracısı kaynak ipuçları için tamamlayıcı hizmetler sağlayan bir modülü yükleyerek ve yapılandırarak eklenebilir.
Magento
Temanızın düzenini değiştirin ve önceden bağlanma veya DNS önceden getirme kaynak ipuçları ekleyin.