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 isteğinde bulunabilmesi için bağlantı kurması gerekir. Güvenli bağlantı oluşturma işlemi üç adımdan oluşur:
Alan adını arayın ve bir IP adresine çözümleyin.
Sunucuya bağlantı oluşturun.
Güvenlik için bağlantıyı şifreleyin.
Bu adımların her birinde tarayıcı bir sunucuya veri gönderir ve sunucu da yanıt gönderir. Başlangıç noktasından hedefe ve geriye yapılan bu yolculuğa gidiş dönüş denir.
Ağ koşullarına bağlı olarak tek bir gidiş dönüş işlemi önemli miktarda zaman alabilir. Bağlantı kurulum süreci üçe kadar gidiş dönüş içerebilir. Optimize edilmemiş durumlarda bu sayı daha da artabilir.
Tüm bunları önceden halletmek, uygulamaların çok daha hızlı görünmesini sağlar. Bu yayında, <link rel=preconnect> ve <link rel=dns-prefetch> adlı iki kaynak ipucu kullanılarak bu işlemin nasıl yapılacağı açıklanmaktadır.
rel=preconnect ile erken bağlantılar 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ı bunları istediğinde kurulum süreci zaten tamamlanmış olacağından kaynaklar daha hızlı yüklenir.
Zorunlu talimatlar olmadıkları için kaynak ipuçları adlarını alır. Bu komutlar, ne olmasını istediğinizle ilgili bilgileri sağlar ancak bunların yürütülüp yürütülmeyeceğine karar vermek tarayıcıya bağlıdır. Bağlantı oluşturmak ve açık tutmak çok fazla iş olduğundan tarayıcı, duruma bağlı olarak kaynak ipuçlarını yoksaymayı veya kısmen uygulamayı seçebilir.
Tarayıcıyı amacınız hakkında bilgilendirmek, sayfanıza bir <link> etiketi eklemek kadar basittir:
<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 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ümlü bağımlılıklardan dolayı bazen belirli bir CDN'den kaynak isteyeceğinizi bildiğiniz ancak tam yolunu bilmediğiniz durumlarla 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 fazla zaman kazanmak istersiniz. Tarayıcı, sayfanız istemediği sürece dosyayı indirmez ancak en azından bağlantı özelliklerini önceden hallederek kullanıcının birkaç gidiş geliş beklemesini önleyebilir.
Medya akışı
Bağlantı aşamasında biraz zaman kazanmak ancak içerikleri hemen almak istemediğiniz başka bir örnek de farklı bir kaynaktan medya akışı gerçekleştirmektir.
Sayfanızın aktarılan içeriği nasıl işlediğine bağlı olarak, komut dosyalarınızın yüklenmesini ve aktarımı işlemeye hazır olmasını bekleyebilirsiniz. Önceden bağlantı kurarak, getirmeye hazır olduğunuzda bekleme süresini tek bir gidiş dönüşe indirebilirsiniz.
rel=preconnect nasıl uygulanır?
preconnect başlatmanın bir yolu, dokümanın <head> bölümüne <link> etiketi eklemektir.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Önceden bağlantı oluşturma yalnızca kaynak alan dışındaki alanlar için etkilidir. Bu nedenle, siteniz için bu özelliği kullanmamalısınız.
Link HTTP üst bilgisi aracılığıyla da ön bağlantı başlatabilirsiniz:
Link: <https://example.com/>; rel=preconnect
Yazı tipleri gibi bazı kaynak türleri anonim modda yüklenir. Bu öğeler için crossorigin özelliğini preconnect ipucu ile ayarlamanız gerekir:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
crossorigin özelliğini atlarsanız tarayıcı yalnızca DNS araması yapar.
rel=dns-prefetch ile alan adını erken çözme
Siteleri adlarına göre hatırlarsınız ancak sunucular siteleri IP adreslerine göre hatırlar. Alan adı sistemi (DNS) bu nedenle vardır. 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 alanıyla bağlantı kurması gerekiyorsa bunların hepsini önceden bağlamak işe yaramaz. preconnect ipucu, yalnızca en kritik bağlantılar için kullanılmalıdı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ümleme, preconnect'e benzer şekilde başlatılır: dokümanın <head> bölümüne bir <link> etiketi eklenir.
<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">
dns-prefetch yedek çözümünü aynı <link> etiketine uygulamak, Safari'de preconnect'in iptal edildiği bir hataya neden olur.
Largest Contentful Paint (LCP) üzerindeki etki
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ğın başka bir kaynaktan yüklenmesinin süresini mümkün olduğunca kısaltmaktır.
Largest Contentful Paint (LCP) ile ilgili olarak, LCP adayları kullanıcı deneyiminin önemli parçaları olduğundan kaynakların hemen bulunabilir olması daha iyidir. 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 anında bulunabilir hale getirilmesi mümkün olmadığında, "high" fetchpriority değerine sahip bir preload bağlantısı, tarayıcının kaynağı en kısa sürede yüklemesine yine de 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.
Ayrıca preconnect, bant genişliği kullanımı açısından preload'ten daha ucuzdur ancak yine de riskleri vardır. Aşırı preload ipuçlarında olduğu gibi, aşırı preconnect ipuçları da TLS sertifikaları söz konusu olduğunda bant genişliği 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 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ı, resimler veya yazı tipleri dağıtan CDN'ler buna örnek gösterilebilir. Kısıtlamalara dikkat edin, preconnect'ü yalnızca en önemli kaynaklar için kullanın, geri kalanı için dns-prefetch'e güvenin ve her zaman gerçek dünyadaki etkiyi ölçün.