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 hallederseniz uygulamaların çok daha hızlı çalışmasını sağlayabilirsiniz. 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.
![Sürüm adını içeren bir komut dosyası URL'si.](https://web.dev/static/articles/preconnect-and-dns-prefetch/image/a-url-a-script-the-vers-ba309041ca368.png?authuser=5&hl=tr)
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.
![Boyut=300x400 ve kalite=otomatik parametrelerine sahip bir resim CDN URL'si.](https://web.dev/static/articles/preconnect-and-dns-prefetch/image/an-image-cdn-url-the-par-a5f41bc0b8107.png?authuser=5&hl=tr)
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">. 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>
etiketinde dns-prefetch
yedeğinin uygulanması Safari'de preconnect
hizmetinin iptal edildiği 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.