Gerekli kaynaklara önceden bağlan

Lighthouse raporunuzun Fırsatlar bölümünde tüm önemli istekler listelenir <link rel=preconnect> ile henüz getirme isteklerine öncelik vermeyenler:

Lighthouse Preconnect to gerekli kaynaklar denetiminin ekran görüntüsü

Tarayıcı uyumluluğu

<link rel=preconnect> çoğu tarayıcıda desteklenir. Görüntüleyin Tarayıcı uyumluluğu.

Önceden bağlanma ile sayfa yükleme hızını artırın

preconnect veya dns-prefetch kaynak ipuçları eklemeyi deneyin kullanıma sunduk.

<link rel="preconnect">, tarayıcıya sayfanızın web sitenizi ziyaret ettiğini bildirir başka bir kaynakla bağlantı kurmanızı sağlar. ve işlemin mümkün olan en kısa sürede başlamasını istediğinizi kabul etmiş olursunuz.

Bağlantı kurmak genellikle yavaş ağlarda uzun bir süreyi gerektirir özellikle de güvenli bağlantılar söz konusu olduğunda, DNS aramaları, yönlendirmeleri ve kullanıcının isteğini işleyen son sunucuya birkaç gidiş-dönüştür.

Tüm bunları önceden halletmek, uygulamanızın çok daha hızlı çalışmasını sağlayabilir ve bant genişliği kullanımını olumsuz etkilemeden kullanıcıya göstermek için kullanır. Bağlantı kurmak için gereken zaman, çoğu zaman veri alışverişi yapmaktan ziyade bekleyerek geçirilir.

Tarayıcıya niyetinizi bildirmek, sayfanıza bir bağlantı etiketi eklemek kadar basittir:

<link rel="preconnect" href="https://example.com">

Bu, tarayıcının, sayfanın için example.com ile bağlantı kurun ve oradan içerik alın.

<link rel="preconnect"> oldukça ucuz olsa da, özellikle güvenli bağlantılarda önemli CPU zamanları alabilir. Bu, özellikle bağlantı 10 saniye içinde kullanılmazsa kötüdür. bu durum da erken bağlantı çalışmalarının boşa gitmesi anlamına gelir.

Genel olarak <link rel="preload"> kullanmayı deneyin, Çünkü daha kapsamlı bir performans ince ayarı, Ancak aşağıdaki gibi uç durumlar için alet kemerinizde <link rel="preconnect"> bulundurun:

<link rel="dns-prefetch">, bağlantılarla ilgili başka bir <link> türüdür. Bu yalnızca DNS aramasını işler. ancak daha geniş tarayıcı desteği vardır. Bu nedenle iyi bir yedek işlevi görebilir. Tam olarak aynı şekilde kullanırsınız:

<link rel="dns-prefetch" href="https://example.com" />.

Gruba özel yönergeler

Drupal

Kullanıcı aracısı kaynak ipuçlarını destekleyen bir modül kullanın Böylece, önceden bağlanma veya DNS önceden getirme kaynak ipuçlarını yükleyip yapılandırabilirsiniz.

Magento

Temalarınızın düzenini değiştirme ve önceden bağlanma ya da DNS önceden getirme kaynak ipuçları ekleyin.

Kaynaklar