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
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.