rel=preconnect ve rel=dns-prefetch kaynak ipuçları ile 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 bağlantı oluşturma işlemi üç adımdan oluşur:
Alan adını arayın ve bir IP adresine çözün.
Sunucuya 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. Başlangıç noktasından varış noktasına ve tekrar başlangıç noktasına yapılan bu yolculuğa gidiş dönüş denir.
Ağ koşullarına bağlı olarak, tek bir gidiş dönüş önemli ölçüde zaman alabilir. Bağlantı kurulum süreci üç gidiş dönüş yolculuğu içerebilir. Optimizasyonun yapılmadığı durumlarda bu sayı daha da artabilir.
Tüm bunları önceden halletmek, uygulamaların çok daha hızlı çalışmasını sağlar. Bu yayında, <link rel=preconnect> ve <link rel=dns-prefetch> olmak üzere iki kaynak ipucuyla bu hedefe nasıl ulaşılacağı açıklanmaktadır.
rel=preconnect ile erken bağlantılar kurun
Modern tarayıcılar, bir sayfanın hangi bağlantılara ihtiyaç duyacağını tahmin etmek için ellerinden geleni yapsa da hepsini güvenilir bir şekilde tahmin edemez. İyi haber şu ki onlara bir (kaynak 😉) ipucu verebilirsiniz.
rel=preconnect öğesinin <link> öğesine eklenmesi, tarayıcıya sayfanızın başka bir alanla bağlantı kurmak istediğini ve işlemin mümkün olan en kısa sürede başlamasını istediğinizi bildirir. Tarayıcı kaynakları istediğinde kurulum süreci tamamlanmış olacağından kaynaklar daha hızlı yüklenir.
Kaynak ipuçları, zorunlu talimatlar olmadıkları için bu adı alır. Bu komutlar, ne olmasını istediğinizle ilgili bilgileri sağlar ancak bunları yürütüp yürütmeyeceğine karar vermek nihayetinde tarayıcının sorumluluğundadır. Bağlantı oluşturmak ve açık tutmak çok fazla iş gerektirir. Bu nedenle tarayıcı, duruma bağlı olarak kaynak ipuçlarını yoksaymayı veya kısmen yürütmeyi seçebilir.
Tarayıcıyı niyetiniz hakkında bilgilendirmek için sayfanıza bir <link> etiketi eklemeniz yeterlidir:
<link rel="preconnect" href="https://example.com">
Önemli üçüncü taraf kaynaklara 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çiminde fark yaratır.
rel=preconnect için kullanım alanları
Nereden aldığınızı biliyor ancak ne aldığınızı bilmiyorsanız
Sürüm oluşturulmuş bağımlılıklar nedeniyle bazen belirli bir CDN'den kaynak isteyeceğinizi bildiğiniz ancak bunun tam yolunu bilmediğiniz bir durumla karşılaşırsınız.
Diğer yaygın durum ise bir resim CDN'sinden resim yüklemektir. Bu durumda, bir resmin tam yolu, kullanıcının tarayıcısındaki medya sorgularına veya çalışma zamanı özelliği kontrollerine bağlıdır.
Bu 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ı yönlerini önceden işleyebilir ve kullanıcının birkaç gidiş dönüş beklemesini önleyebilir.
Akış medyası
Bağlantı aşamasında biraz zaman kazanmak isteyebileceğiniz ancak içeriği hemen almaya başlamanızın gerekmeyebileceği bir başka örnek de farklı bir kaynaktan medya akışı yaparken geçerlidir.
Sayfanızın yayınlanan içeriği nasıl işlediğine bağlı olarak, komut dosyalarınız yüklenene ve yayını işlemeye hazır olana kadar beklemek isteyebilirsiniz. Önceden bağlanma, getirme işlemine başlamaya hazır olduğunuzda bekleme süresini tek bir gidiş-dönüşe indirmenize yardımcı olur.
rel=preconnect nasıl uygulanır?
preconnect başlatmanın bir yolu, belgenin <head> bölümüne <link> etiketi eklemektir.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Ön bağlantı yalnızca kaynak alan dışında kalan alanlar için etkilidir. Bu nedenle, sitenizde kullanmamalısınız.
Ayrıca Link HTTP üstbilgisi 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 ürünler için crossorigin özelliğini preconnect ipucuyla ayarlamanız gerekir:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
crossorigin özelliğini atlarsanız tarayıcı yalnızca DNS araması gerçekleştirir.
rel=dns-prefetch ile alan adını erkenden çözüme kavuşturun
Siteleri adlarıyla hatırlarsınız ancak sunucular siteleri IP adresleriyle hatırlar. Bu nedenle alan adı sistemi (DNS) vardır. Tarayıcı, site adını IP adresine dönüştürmek için DNS'yi kullanır. Bu işlem (alan adı çözümleme), bağlantı oluşturmanın ilk adımıdır.
Bir sayfanın birçok üçüncü taraf alanıyla bağlantı kurması gerekiyorsa hepsine önceden bağlanmak verimsizdir. preconnect ipucu yalnızca en kritik bağlantılar için kullanılmalıdır. Diğer tüm işlemler için, genellikle 20-120 ms süren DNS araması gibi ilk adımda zaman kazanmak için <link rel=dns-prefetch> kullanın.
DNS çözümleme, preconnect'ya benzer şekilde başlatılır: Dokümanın <head> bölümüne bir <link> etiketi eklenerek.
<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'ı desteklemeyen tarayıcılar için 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 yedekleme uygulanması, Safari'de preconnect öğesinin iptal edildiği bir hataya neden olur.
Largest Contentful Paint (LCP) üzerindeki etkisi
dns-prefetch ve preconnect kullanmak, sitelerin başka bir kaynağa bağlanma süresini kısaltmasını sağlar. Temel 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 bulunabilir olması daha iyidir. LCP kaynaklarında fetchpriority değeri "high" olan öğeler, tarayıcıya bu öğenin önemini bildirerek erken getirmesini sağlayabilir ve bu sayede LCP'yi daha da iyileştirebilir.
LCP öğelerinin anında bulunabilir hale getirilmesinin mümkün olmadığı durumlarda, preload bağlantısı (fetchpriority değeri de "high" olan) tarayıcının kaynağı en kısa sürede yüklemesine olanak tanır.
Bu seçeneklerden hiçbiri kullanılamıyorsa (tam kaynak, sayfa yükleme işleminin sonuna kadar bilinmeyeceğinden) kaynağın geç keşfedilmesinin etkisini mümkün olduğunca azaltmak için kaynaklar arası kaynaklarda preconnect kullanabilirsiniz.
Ayrıca, preconnect bant genişliği kullanımı açısından preload'den daha ucuz olsa da 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ğini tüketir. Çok fazla kaynağa önceden bağlanmamaya dikkat edin. Aksi takdirde bant genişliği anlaşmazlığına neden olabilirsiniz.
Sonuç
Bu iki kaynak ipucu, kısa süre içinde üçüncü taraf alanından bir şey indireceğinizi bildiğiniz ancak kaynağın tam URL'sini bilmediğiniz durumlarda sayfa hızını artırmak için yararlıdır. JavaScript kitaplıkları, resimler veya yazı tipleri 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 kaynaklar için dns-prefetch kullanın ve etkiyi her zaman gerçek dünyada ölçün.