rel=preconnect ve rel=dns-prefetch kaynak ipuçları ve bunların nasıl kullanılacağı hakkında bilgi edinin.
Tarayıcının bir sunucudan kaynak isteyebilmesi için önce bağlantı oluşturması gerekir. Güvenli bir bağlantı üç adımdan oluşur:
Alan adını arayın ve bir IP adresine çözümleyin.
Sunucuyla bağlantı kurun.
Güvenlik için bağlantıyı şifreleyin.
Bu adımların her birinde tarayıcı bir veri parçasını sunucuya gönderir ve sunucu da bir yanıt gönderir. Kalkıştan varış noktasına uzanan bu yolculuklara gidiş dönüş adı verilir.
Ağ koşullarına bağlı olarak, tek bir gidiş dönüş uzun sürebilir. Bağlantı kurulum işlemi en fazla üç gidiş-dönüş içerebilir ve optimize edilmemiş durumlarda daha da fazladır.
Tüm bunları önceden hallettiğinizde uygulamalar çok daha hızlı hale gelir. Bu yayında, <link rel=preconnect> ve <link rel=dns-prefetch> olmak üzere iki kaynak ipucuyla bunu nasıl başarabileceğiniz açıklanmaktadır.
rel=preconnect ile erkenden bağlantı kurun
Modern tarayıcılar, bir sayfanın ihtiyaç duyacağı bağlantıları tahmin etmek için ellerinden geleni yapsalar da bunların tamamını güvenilir şekilde tahmin edemez. İşin iyi tarafı şu ki onlara bir ipucu (kaynak 😉) verebilirsiniz.
rel=preconnect öğesini bir <link> öğesine eklemek, tarayıcıya sayfanızın başka bir alanla bağlantı oluşturmayı amaçladığını ve sürecin mümkün olan en kısa zamanda başlamasını istediğinizi bildirir. Kurulum süreci tarayıcı tarafından istekte bulunulduğunda tamamlanmış olduğu için kaynaklar daha hızlı yüklenir.
Kaynak ipuçları zorunlu talimatlar olmadığı için adlarını alır. Bunlar, neler olmasını istediğinizle ilgili bilgiler sağlar, ancak bunların yürütülüp yürütülmeyeceğine nihai olarak tarayıcıya karar verilir. Bir bağlantıyı ayarlamak ve açık tutmak çok fazla emek gerektirir. Bu yüzden tarayıcı, duruma bağlı olarak kaynak ipuçlarını yok saymayı veya kısmen çalıştırmayı seçebilir.
Tarayıcınıza bu niyetinizi bildirmek için sayfanıza bir <link> etiketi eklemeniz yeterlidir:
<link rel="preconnect" href="https://example.com">
Önemli üçüncü taraf kaynaklarına erken bağlantılar oluşturarak yükleme süresini 100-500 ms kısaltabilirsiniz. Bu sayılar küçük gibi görünse de kullanıcıların web sayfası performansını nasıl algıladığını farklılaştırır.
rel=preconnect için kullanım alanları
Ne nereden getirdiğinizi bilmek, ancak neyi getirdiğinizi bilmemek
Sürüme dayalı bağımlılıklar nedeniyle, bazen belirli bir CDN'den bir kaynak isteyeceğinizi bildiğiniz bir durumla karşılaşırsınız ancak bunun için tam yolu bilmezsiniz.
Yaygın olarak karşılaşılan bir diğer durum da resimlerin bir görüntü CDN'sinden yüklenmesidir. Burada, bir görüntünün tam yolu, kullanıcının tarayıcısındaki medya sorgularına veya çalışma zamanı özellik kontrollerine bağlıdır.
Bu tür durumlarda, getireceğiniz kaynak önemliyse sunucuya önceden bağlanarak mümkün olduğunca fazla zaman kazanmak istersiniz. Tarayıcı, sayfanız isteyene kadar dosyayı indirmez, ancak en azından bağlantıyla ilgili işlemleri önceden yapabilir ve böylece kullanıcının, birkaç gidiş-dönüş yapmak için beklemesine gerek kalmaz.
Medya akışı
Bağlantı aşamasında zamandan tasarruf etmek istediğiniz, ancak hemen içerik almaya başlamayabileceğiniz bir başka örnek de farklı bir kaynaktan medya akışı yaptığınız zamandır.
Sayfanızın akışa eklenen içeriği nasıl işlediğine bağlı olarak komut dosyalarınız yüklenip akışı işlemeye hazır olana kadar beklemek isteyebilirsiniz. Önceden bağlanma, hazır olduğunuzda bekleme süresini tek bir gidiş gelişle sınırlamanıza yardımcı olur.
rel=preconnect nasıl uygulanır?
preconnect başlatmanın bir yolu, dokümanın <head> öğesine <link> etiketi eklemektir.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Önceden bağlanma yalnızca kaynak alan adı dışındaki alan adları için etkili olduğundan, bunu sitenizde kullanmamalısınız.
Ayrıca Link HTTP üst bilgisi aracılığıyla da önceden bağlantı başlatabilirsiniz:
Link: <https://example.com/>; rel=preconnect
Yazı tipleri gibi bazı kaynak türleri anonim modda yüklenir. Bunlar için crossorigin özelliğini preconnect ipucuyla ayarlamanız gerekir:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
crossorigin özelliğini çıkarırsanız tarayıcı yalnızca DNS aramasını gerçekleştirir.
Alan adını rel=dns-prefetch ile erkenden çözün
Siteleri adlarıyla hatırlarsınız, ancak sunucular IP adresleriyle hatırlar. Bu nedenle alan adı sistemi (DNS) mevcuttur. Tarayıcı, site adını IP adresine dönüştürmek için DNS'yi kullanır. Bağlantı oluşturmanın ilk adımı alan adı çözümlemesi işlemidir.
Bir sayfanın çok sayıda üçüncü taraf alanıyla bağlantı kurması gerekiyorsa bunların tümünün önceden bağlanması ters etki yaratır. preconnect ipucu, yalnızca en kritik bağlantılar için en iyi uygulamadır. Geri kalan her şey için ilk adım olan DNS aramasında (genellikle 20-120 ms) zaman kazanmak için <link rel=dns-prefetch> kullanın.
DNS çözümlemesi preconnect yöntemine benzer şekilde, dokümanın <head> öğesine <link> etiketi eklenerek başlatılır.
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch için tarayıcı desteği preconnect destekten biraz farklıdır. Bu nedenle dns-prefetch, preconnect'i desteklemeyen tarayıcılar için yedek işlevi görebilir.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Yedek tekniğini güvenli bir şekilde uygulamak için ayrı bağlantı etiketleri kullanın.
<link rel="preconnect dns-prefetch" href="http://example.com">Aynı
<link> etiketine dns-prefetch yedeğinin uygulanması, Safari'de preconnect işleminin iptal edildiği bir hataya neden olur.
Largest Contentful Paint (LCP) üzerindeki etkisi
dns-prefetch ve preconnect kullanılması, sitelerin başka bir kaynağa bağlanmak için gereken süreyi azaltmasına olanak tanır. Nihai amaç, başka bir kaynaktan kaynak yükleme süresinin mümkün olduğunca en aza indirilmesidir.
Largest Contentful Paint (LCP) söz konusu olduğunda LCP adayları kullanıcı deneyiminin önemli parçaları olduğundan kaynakların hemen keşfedilebilmesi daha iyidir. LCP kaynaklarında "high" fetchpriority değeri, bu öğenin erken getirebilmesi için tarayıcıya önemini bildirerek bunu daha da iyileştirebilir.
LCP öğelerinin hemen bulunabilir hâle getirilmesinin mümkün olmadığı durumlarda, fetchpriority değerine sahip olan ve "high" değerine sahip bir preload bağlantısı, tarayıcının kaynağı en kısa sürede yüklemesini sağlar.
Sayfa yükleme işleminin sonraki aşamalarına kadar tam kaynak bilinmeyeceği için bu seçeneklerden hiçbiri mevcut değilse kaynağın geç keşfedilmesinin etkisini mümkün olduğunca azaltmak için çapraz kaynak kaynaklarda preconnect öğesini kullanabilirsiniz.
Buna ek olarak, preconnect bant genişliği kullanımı açısından preload ile karşılaştırıldığında daha ucuzdur ancak riskleri de beraberinde gelir. Aşırı sayıda preload ipucunda olduğu gibi, çok fazla preconnect ipucu da TLS sertifikalarının söz konusu olduğu durumlarda bant genişliğini tüketir. Bant genişliği çakışmasına neden olabileceğinden, çok fazla kaynağa önceden bağlanmamaya dikkat edin.
Sonuç
Bu iki kaynak ipucu, yakında üçüncü taraf alanlarından bir şey indireceğinizi biliyorsanız ancak kaynağın tam URL'sini bilmiyorsanız sayfa hızını artırmanıza yardımcı olur. JavaScript kitaplıklarını, resimleri veya yazı tiplerini dağıtan CDN'ler buna örnek gösterilebilir. Kısıtlamalara dikkat edin, yalnızca en önemli kaynaklar için preconnect kullanın, gerisi için dns-prefetch kullanın ve daima gerçek dünyadaki etkiyi ölçün.