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 bağlantı kurması 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ı sunucuya bir veri parçası gönderir ve sunucu da yanıt gönderir. Kalkış noktasından varış noktasına kadar olan bu yolculuk gidiş dönüş olarak adlandırılır.
Ağ koşullarına bağlı olarak, tek bir gidiş dönüş çok fazla zaman alabilir. Bağlantı kurulum işlemi, en fazla üç gidiş dönüşünü ve optimize edilmemiş durumlarda daha fazlasını içerebilir.
Tüm bunları önceden halletmek, uygulamaların çok daha hızlı çalışmasını sağlar. Bu yayında, iki kaynak ipucuyla bunu nasıl başarabileceğiniz açıklanmaktadır: <link rel=preconnect> ve <link rel=dns-prefetch>.
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 yapar, ancak hepsini güvenilir bir şekilde tahmin edemezler. Neyse ki onlara bir (kaynak 😉) ipucu verebilirsiniz.
Bir <link> öğesine rel=preconnect eklenmesi, tarayıcıya, sayfanızın başka bir alan adıyla bağlantı kurmayı amaçladığını ve bu işlemin mümkün olan en kısa sürede başlamasını istediğinizi bildirir. Tarayıcı istekte bulunduğunda kurulum işlemi tamamlanmış olduğundan kaynaklar daha hızlı yüklenir.
Zorunlu talimatlar olmadıkları için kaynak ipuçları adlarını alır. Ne yapılmasını istediğinizle ilgili bilgileri sağlarlar, ancak bunları uygulayıp uygulamayacağınıza nihai olarak tarayıcıya karar verir. Bir bağlantı kurmak ve açık tutmak çok zor bir işlemdir. Bu nedenle tarayıcı, kaynak ipuçlarını yoksaymayı veya duruma bağlı olarak bunları kısmen uygulamayı seçebilir.
Tarayıcıya niyetinizi bildirmek, sayfanıza bir <link> etiketi eklemek kadar basittir:
<link rel="preconnect" href="https://example.com">
Önemli üçüncü taraf kaynaklarına erken bağlantılar kurarak yükleme süresini 100-500 ms kadar hızlandırabilirsiniz. Bu sayılar küçük görünebilir ancak kullanıcıların web sayfası performansını algılama biçimi üzerinde bir fark yaratır.
rel=preconnect için kullanım alanları
Nereden getirdiğinizi bilmek ancak ne aldığınızı bilmek
Sürüme dayalı bağımlılıklar nedeniyle bazen, belirli bir CDN'den kaynak isteyeceğinizi bildiğiniz ancak tam yolunu istemediğiniz bir durumla karşılaşabilirsiniz.
Diğer yaygın durum, resimleri resim CDN'den yüklemektir. Bu durumda resmin tam yolu, kullanıcının tarayıcısındaki çalışma zamanı özelliği kontrollerine veya medya sorgularına bağlıdır.
Bu tür durumlarda, getireceğiniz kaynak önemliyse sunucuya önceden bağlanarak mümkün olduğunca zaman kazanmak istersiniz. Tarayıcı, sayfanız istekte bulunana kadar dosyayı indirmez, ancak en azından bağlantıyla ilgili konuları önceden işleyerek kullanıcıyı birden fazla gidiş-dönüşte beklemek zorunda kalmaz.
Medya akışı
Bağlantı aşamasında zaman kazanmak ama hemen içerik almaya başlamamak isteyebileceğiniz bir başka örnek de farklı bir kaynaktan medya akışı yapmaktır.
Sayfanızın akıştaki içeriği nasıl işlediğine bağlı olarak, komut dosyalarınızın yüklenmesini ve akışı işlemeye hazır olmasını beklemeniz önerilir. Önceden bağlanmak, getirmeye hazır olduğunuzda bekleme süresini tek bir gidiş dönüşe kadar kısaltmanı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 dışındaki alanlar için etkilidir. Bu nedenle sitenizde bu özelliği kullanmamalısınız.
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 ayarlamalısınız:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
crossorigin özelliğini atlarsanız tarayıcı yalnızca DNS aramasını gerçekleştirir.
Alan adını rel=dns-prefetch ile erken çözün
Siteleri adlarıyla hatırlarsınız, ancak sunucular bunları IP adresleriyle hatırlar. Bu nedenle alan adı sistemi (DNS) mevcuttur. Tarayıcı, site adını bir IP adresine dönüştürmek için DNS'yi kullanır. Bu işlem (alan adı çözümleme), bağlantı kurmanın ilk adımıdır.
Bir sayfanın birçok üçüncü taraf alanla bağlantı kurması gerekiyorsa, bunların tümünü önceden bağlamak verimsiz bir etki yaratır. preconnect ipucu, yalnızca en kritik bağlantılarda kullanılır. Geri kalan her adımda, ilk adım olan DNS aramasında zaman kazanmak için <link rel=dns-prefetch> kullanın. Bu işlem genellikle 20-120 ms arası sürer.
DNS çözümlemesi, preconnect işlemine benzer bir şekilde, dokümanın <head> öğesine bir <link> etiketi eklenerek başlatılır.
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch için tarayıcı desteği, preconnect desteğinden biraz farklıdır. Bu nedenle dns-prefetch, preconnect'yi desteklemeyen tarayıcılar için bir yedek olarak kullanılabilir.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">
<link rel="preconnect dns-prefetch" href="http://example.com">
<link> etiketinde dns-prefetch yedeğinin uygulanması Safari'de preconnect özelliğinin iptal edilmesine neden olan bir hataya neden oluyor.
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ç, bir kaynağı başka bir kaynaktan yükleme süresinin mümkün olduğunca en aza indirilmesidir.
Largest Contentful Paint (LCP) söz konusu olduğunda kaynakların hemen bulunabilir olması daha iyidir. Bunun nedeni, LCP adayları kullanıcı deneyiminin çok önemli parçalarıdır. LCP kaynaklarında fetchpriority değeri olan "high", bu öğenin erkenden getirilebilmesi için önemini tarayıcıya bildirerek bu değeri daha da artırabilir.
LCP öğelerinin hemen bulunabilir hale getirilmesinin mümkün olmadığı durumlarda, fetchpriority değeri "high" olan bir preload bağlantısı da tarayıcının kaynağı mümkün olan en kısa sürede yüklemesine olanak tanır.
Bu seçeneklerin hiçbiri mevcut değilse (sayfanın sonraki aşamalarına kadar tam kaynak bilinemeyeceği için), kaynağın geç keşfedilmesinin etkisini mümkün olduğunca azaltmak üzere kaynaklar arası kaynaklarda preconnect kullanabilirsiniz.
preconnect, bant genişliği kullanımı açısından preload ürününden daha ucuzdur. Ancak yine de bazı riskleri yoktur. Aşırı preload ipuçlarında olduğu gibi, TLS sertifikaları söz konusu olduğunda aşırı preconnect ipucu bant genişliğini tüketmeye devam eder. 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 bir üçüncü taraf alanından bir şey indireceğinizi biliyorsanız ancak kaynağın tam URL'sini bilmiyorsanız sayfa hızını artırmak için yararlı olur. JavaScript kitaplıklarını, resimleri veya yazı tiplerini dağıtan CDN'ler buna örnek olarak verilebilir. Kısıtlamalara dikkat edin, preconnect yalnızca en önemli kaynaklar için kullanın, geri kalanı için dns-prefetch kullanın ve her zaman gerçek dünyadaki etkisini ölçün.