Kaynak yüklemeyi optimize etme ile ilgili son modülde, CSS ve JavaScript gibi çeşitli sayfa kaynaklarının sayfa yükleme hızını nasıl etkileyebileceğini ve sayfanın oluşturulmasını hızlandırmak için bu kaynakları ve bunların yayınlanmasını nasıl optimize edebileceğinizi öğrendiniz. Bu, kaynak yüklemenin daha gelişmiş bir yönüne geçmek için mükemmel bir zaman ve tarayıcının kaynak ipuçlarını kullanarak bunları daha hızlı yüklemesine yardımcı olmayı içerir.
Kaynak ipuçları, tarayıcıya kaynakların nasıl yükleneceğini ve öncelik sırasına koyacağını bildirerek geliştiricilerin sayfa yükleme süresini daha da optimize etmesine yardımcı olabilir. İlk olarak preconnect ve dns-prefetch gibi bir dizi kaynak ipucu kullanıma sunuldu.
Ancak zaman içinde preload ve Fetch Priority API'yi takip ederek ek özellikler sunmaya başladık.
Kaynak ipuçları, tarayıcıya yükleme performansını artırabilecek belirli işlemleri önceden gerçekleştirmesini söyler. Kaynak ipuçları, erken DNS aramaları yapma, sunuculara önceden bağlanma ve hatta kaynakları tarayıcı normalde keşfetmeden önce getirme gibi işlemler gerçekleştirebilir.
Kaynak ipuçları HTML'de (çoğunlukla <head> öğesinin başlarında) veya HTTP üst bilgisi olarak ayarlanabilir. Bu modülün kapsamında preconnect, dns-prefetch ve preload sürümlerinin yanı sıra prefetch tarafından sağlanan kurgusal getirme davranışları ele alınmıştır.
preconnect
preconnect ipucu, önemli kaynakları aldığınız başka bir kaynakla bağlantı kurmak için kullanılır. Örneğin, resimlerinizi veya öğelerinizi bir CDN ya da başka bir çapraz kaynakta barındırıyor olabilirsiniz:
<link rel="preconnect" href="https://example.com">
preconnect kullandığınızda tarayıcının, çok yakın gelecekte belirli bir çapraz kaynak sunucuya bağlanmayı planladığını ve ideal olarak HTML ayrıştırıcının veya önyükleme tarayıcısının bunu yapmasını beklemeden tarayıcının bu bağlantıyı mümkün olan en kısa sürede açmasını beklersiniz.
Bir sayfada çok sayıda çapraz kaynak kaynağınız varsa geçerli sayfa açısından en kritik olan kaynaklar için preconnect kullanın.
preconnect, bağlantıları kaynaklar arası kaynağın keşfedildiği sırada değil, daha erken kurarak bunu hafifletebilir.
preconnect için yaygın bir kullanım alanı Google Fonts'tur. Google Fonts, @font-face bildirimlerini sunan https://fonts.googleapis.com alanına ve yazı tipi dosyalarını sunan https://fonts.gstatic.com alanına preconnect işlemini yapmanızı önerir.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin özelliği, bir kaynağın Ortamlar Arası Kaynak Paylaşımı (CORS) kullanılarak getirilip getirilmeyeceğini belirtmek için kullanılır. preconnect ipucunu kullanırken, kaynaktan indirilen kaynak yazı tipi dosyaları gibi CORS kullanıyorsa preconnect ipucuna crossorigin özelliğini eklemeniz gerekir.
dns-prefetch
Kaynaklar arası sunuculara bağlantıları erkenden açmak ilk sayfa yükleme süresini önemli ölçüde kısaltabilir, ancak tek seferde birden fazla kaynak sunucusuyla bağlantı kurmak makul veya mümkün olmayabilir. preconnect özelliğini aşırı kullanıyor olabileceğinizden endişeleniyorsanız dns-prefetch ipucu, çok daha düşük maliyetli bir kaynak ipucudur.
Adına göre dns-prefetch, çapraz kaynak sunucusuyla bağlantı kurmaz, bunun yerine önceden DNS araması yapar. Bir alan adı, temel IP adresine çözümlendiğinde DNS araması gerçekleşir.
Cihaz ve ağ düzeylerinde DNS önbellek katmanları bu işlemi genel olarak hızlı hale getirmeye yardımcı olsa da biraz zaman alır.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
DNS aramaları oldukça ucuzdur ve nispeten düşük maliyetlerinden dolayı bazı durumlarda preconnect ile karşılaştırıldığında daha uygun bir araç olabilir. Özellikle, kullanıcının izleyebileceğini düşündüğünüz diğer web sitelerine giden bağlantılar için kullanılması istenen bir kaynak ipucu olabilir. dnstradamus, bu işlemi JavaScript kullanarak otomatik olarak yapan ve diğer web sitelerinin bağlantıları diğer web sitelerinin bağlantıları içine kaydırıldığında geçerli sayfanın HTML'sine dns-prefetch ipucu eklemek için Intersection Observer API'yi kullanan bir araçtır.
preload
preload yönergesi, sayfayı oluşturmak için gereken kaynak için erken istek başlatmak amacıyla kullanılır:
<link rel="preload" href="/lcp-image.jpg" as="image">
preload yönergeleri, geç keşfedilen kritik kaynaklarla sınırlı olmalıdır.
En yaygın kullanım alanları; yazı tipi dosyaları, @import bildirimleriyle getirilen CSS dosyaları veya Largest Contentful Paint (LCP) adayları olabilecek CSS background-image kaynaklarıdır. Bu gibi durumlarda, kaynağa harici kaynaklarda başvurulduğu için bu dosyalar ön yükleme tarayıcısı tarafından keşfedilemez.
preconnect özelliğine benzer şekilde, yazı tipleri gibi bir CORS kaynağını önceden yüklüyorsanız preload yönergesi crossorigin özelliğini gerektirir. crossorigin özelliğini (veya CORS olmayan istekler için) eklemezseniz kaynak, tarayıcı tarafından iki kez indirilir ve diğer kaynaklar için daha iyi harcanabilecek bant genişliği harcanır.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Önceki HTML snippet'inde tarayıcıya, /font.woff2 aynı alanda olsa bile CORS isteği kullanarak /font.woff2 öğesini önceden yüklemesi talimatı verilir.
prefetch
prefetch yönergesi, gelecekteki gezinmelerde kullanılması muhtemel bir kaynak için düşük öncelikli istek başlatmak amacıyla kullanılır:
<link rel="prefetch" href="/next-page.css" as="style">
Bu yönerge, büyük ölçüde preload yönergesiyle aynı biçime uyar. Yalnızca <link> öğesinin rel özelliği bunun yerine "prefetch" değerini kullanır.
Bununla birlikte, preload yönergesinin aksine prefetch, gelecekte gerçekleşmesi mümkün olan veya olmayan bir gezinme için kaynak getirme işlemini başlattığınız konusunda büyük ölçüde spekülatif niteliktedir.
prefetch bazı durumlarda faydalı olabilir. Örneğin, web sitenizde çoğu kullanıcının işlemi tamamlamak için takip ettiği bir kullanıcı işlemleri akışı belirlediyseniz gelecekteki sayfalar için oluşturma açısından kritik bir kaynağa ait prefetch, bu kullanıcıların yükleme sürelerini azaltmaya yardımcı olabilir.
Fetch Priority API'si
Bir kaynağın önceliğini artırmak için fetchpriority özelliğiyle Fetch Priority API özelliğini kullanabilirsiniz. Bu özelliği <link>, <img> ve <script> öğeleriyle kullanabilirsiniz.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Varsayılan olarak, resimler daha düşük bir öncelikle getirilir. Düzenden sonra, resmin başlangıçtaki görüntü alanında olduğu belirlenirse öncelik Yüksek önceliğe yükseltilir. Önceki HTML snippet'inde fetchpriority hemen tarayıcıya, daha büyük LCP resmini Yüksek öncelikli olarak indirirken daha az önemli olan küçük resimler daha düşük öncelikli olarak indirilir.
Modern tarayıcılar kaynakları iki aşamada yükler. İlk aşama kritik kaynaklar için ayrılmıştır ve tüm engelleme komut dosyaları indirilip çalıştırıldıktan sonra sona erer. Bu aşamada, Düşük öncelikli kaynakların indirilmesi gecikebilir. fetchpriority="high" kullanarak bir kaynağın önceliğini artırabilir ve böylece tarayıcının ilk aşamada onu indirmesini sağlayabilirsiniz.
Kaynak ipuçları demoları
Bilginizi test etme
preconnect kaynak ipucu ne işe yarar?
Fetch Priority API ile neler yapabilirsiniz?
<link>, <img> ve <script> öğeleri için göreli önceliği belirtin.
prefetch ipucunu ne zaman kullanmalısınız?
Sıradaki: Resim performansı
Artık büyük olasılıkla sayfa HTML'si, <head> öğesi ve kaynak ipuçları ile ilgili genel performans değerlendirmeleri konusunda kendinize oldukça güvenmeye başlamışsınızdır. Ancak sayfaların genellikle yüklediği farklı kaynak türlerine özgü ek optimizasyonlar vardır. Sıradaki modülde, kullanıcının cihazından bağımsız olarak web sitenizdeki resimlerin mümkün olduğunca hızlı yüklenmesini sağlamanıza yardımcı olabilecek resim performansı konusu ele alınmıştır.