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.
Önceden bağlanma 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ı eklemeyi düşünün.
<link rel="preconnect">, tarayıcıya sayfanızın başka bir kaynakla bağlantı kurmayı amaçladığını ve işlemin mümkün olan en kısa sürede başlamasını istediğinizi bildirir.
Bağlantı kurmak genellikle yavaş ağlarda, özellikle de güvenli bağlantılar söz konusu olduğunda önemli ölçüde zaman alır. Bunun nedeni, DNS aramalarını, yönlendirmeleri ve kullanıcının isteğini yerine getiren son sunucuya yapılan çeşitli gidiş dönüşleri içerebilir.
Tüm bunları önceden halletmek, bant genişliği kullanımını olumsuz etkilemeden uygulamanızın kullanıcıya daha hızlı gelmesini sağlayabilir. Bağlantı kurma sürecinin çoğu, veri alışverişi yapmak yerine beklemeyle geçer.
Bu niyetinizi tarayıcıya bildirmek için tek yapmanız gereken, sayfanıza bir bağlantı etiketi eklemektir:
<link rel="preconnect" href="https://example.com">
Bu, tarayıcının sayfanın example.com ağına bağlanmayı ve buradan içerik almayı amaçladığını bilmesini sağlar.
<link rel="preconnect"> oldukça ucuz olsa da özellikle güvenli bağlantılarda değerli CPU zamanı harcayabilir.
Bu durum özellikle bağlantı 10 saniye içinde kullanılmazsa son derece kötüdür. Bunun nedeni, tarayıcının kapatılması ve tüm bu ilk bağlantı işlerinin boşa harcanmasıdır.
Genel olarak, performansa yönelik daha kapsamlı bir ince ayar olduğundan <link rel="preload"> kullanmayı deneyin, ancak aşağıdakiler gibi uç durumlar için araç kemerinizde <link rel="preconnect"> değerini tutun:
<link rel="dns-prefetch">, bağlantılarla ilgili başka bir <link> türüdür.
Bu şekilde yalnızca DNS araması yapılabilir, ancak daha kapsamlı tarayıcı desteği olduğundan uygun bir yedek işlevi görebilir.
Bu dosyayı aynı şekilde kullanırsınız:
<link rel="dns-prefetch" href="https://example.com" />.
Yığına özel rehberlik
Drupal
Önceden bağlanma veya DNS önceden getirme kaynak ipuçlarını yüklemek ve yapılandırmak için kullanıcı aracısı kaynak ipuçlarını destekleyen bir modül kullanın.
Magento
Temalarınızın düzenini değiştirin ve önceden bağlanma veya DNS önceden getirme kaynak ipuçları ekleyin.