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 bir sayfanın oluşturulmasını hızlandırmak için bunları ve bunların teslimini nasıl optimize edebileceğinizi öğrenmiştiniz. Bu, kaynak yüklemenin daha gelişmiş bir yönüne geçmek için mükemmel bir zamandır. Bu yön, kaynak ipuçlarını kullanarak tarayıcının kaynakları daha hızlı yüklemesine yardımcı olmayı içerir.
Kaynak ipuçları, tarayıcıya kaynakların nasıl yükleneceği ve önceliklendirileceği konusunda bilgi vererek 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 sunuldu.
Ancak zaman içinde preload ve Getirme Önceliği API'si, ek özellikler sağlamak için kullanıma sunuldu.
Kaynak ipuçları, tarayıcıya yükleme performansını artırabilecek belirli işlemleri önceden yapmasını söyler. Kaynak ipuçları, erken DNS aramaları gerçekleştirme, sunuculara önceden bağlanma ve hatta tarayıcının normalde keşfedeceğinden önce kaynakları getirme gibi işlemler gerçekleştirebilir.
Kaynak ipuçları HTML'de (en sık olarak <head> öğesinin başında) belirtilebilir veya HTTP üstbilgisi olarak ayarlanabilir. Bu modülün kapsamı dahilinde preconnect, dns-prefetch ve preload ile prefetch tarafından sağlanan spekülatif getirme davranışları ele alınmaktadır.
preconnect
preconnect ipucu, kritik kaynakları getirdiğiniz başka bir kaynakla bağlantı kurmak için kullanılır. Örneğin, resimlerinizi veya öğelerinizi bir CDN'de ya da başka bir kaynaklar arası konumda barındırıyor olabilirsiniz:
<link rel="preconnect" href="https://example.com">
preconnect özelliğini kullanarak tarayıcının çok yakın bir gelecekte belirli bir kaynaklar arası sunucuya bağlanmayı planladığını ve tarayıcının bu bağlantıyı mümkün olan en kısa sürede, ideal olarak HTML ayrıştırıcının veya önceden yükleme tarayıcısının bunu yapmasını beklemeden açması gerektiğini belirtirsiniz.
Bir sayfada çok sayıda kaynaklar arası kaynak varsa geçerli sayfa için en kritik olan kaynaklarda preconnect kullanın.
preconnect, kaynaklar arası kaynağın keşfedildiği sırada değil, daha erken bağlantılar kurarak bu süreyi azaltabilir.
preconnect için yaygın bir kullanım alanı Google Fonts'tur. Google Yazı Tipleri, preconnect alanına https://fonts.googleapis.com alanına @font-face beyanlarını ve https://fonts.gstatic.com alanına yazı tipi dosyalarını sunmanı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 merkezler arası kaynak paylaşımı (CORS) kullanılarak getirilip getirilmeyeceğini belirtmek için kullanılır. preconnect ipucunu kullanırken, kaynak sunucudan indirilen kaynakta (ör. yazı tipi dosyaları) CORS kullanılıyorsa crossorigin özelliğini preconnect ipucuna eklemeniz gerekir.
dns-prefetch
Kaynaklar arası sunuculara bağlantıların erken açılması, ilk sayfa yükleme süresini önemli ölçüde iyileştirebilir ancak aynı anda birçok kaynaklar arası sunucuya bağlantı oluşturmak makul veya mümkün olmayabilir. preconnect öğesini aşırı kullanıyor olabileceğinizden endişeleniyorsanız çok daha az maliyetli bir kaynak ipucu olan dns-prefetch ipucunu kullanabilirsiniz.
Adından da anlaşılacağı gibi dns-prefetch, kaynaklar arası bir sunucuya bağlantı kurmaz, yalnızca DNS aramasını önceden gerçekleştirir. Bir alan adı temel alınan IP adresine çözümlendiğinde DNS
araması gerçekleşir.
Cihaz ve ağ düzeylerindeki DNS önbellek katmanları bu işlemi genellikle hızlı hale getirse de yine de 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 maliyetleri nedeniyle bazı durumlarda preconnect'dan daha uygun bir araç olabilir. Özellikle, kullanıcının takip etme olasılığının yüksek olduğunu düşündüğünüz diğer web sitelerine yönlendiren bağlantılar söz konusu olduğunda kullanılması istenen bir kaynak ipucu olabilir. dnstradamus, JavaScript kullanarak bunu otomatik olarak yapan ve diğer web sitelerine bağlantılar kullanıcının görünüm alanına kaydırıldığında dns-prefetch ipuçlarını mevcut sayfanın HTML'sine yerleştirmek için Intersection Observer API'yi kullanan araçlardan biridir.
preload
preload yönergesi, sayfanın oluşturulması için gereken bir kaynakla ilgili erken bir istek başlatmak için 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ı, @importbildirimlerbackground-image aracılığıyla getirilen CSS dosyaları veya Largest Contentful Paint (LCP) adayları olması muhtemel CSS background-image kaynaklarıdır. Bu gibi durumlarda, kaynak harici kaynaklarda referans olarak verildiğinden bu dosyalar önceden yükleme tarayıcısı tarafından keşfedilmez.
preconnect yönergesine benzer şekilde, preload yönergesi de yazı tipleri gibi bir CORS kaynağını önceden yüklüyorsanız crossorigin özelliğini gerektirir. crossorigin özelliğini eklemezseniz veya CORS olmayan istekler için eklerseniz kaynak, tarayıcı tarafından iki kez indirilir. Bu da diğer kaynaklarda daha iyi kullanılabilecek bant genişliğinin boşa harcanmasına neden olur.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Yukarıdaki HTML snippet'inde, /font.woff2 aynı alanda olsa bile tarayıcıya bir 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 bir istek başlatmak üzere 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çimi kullanır. Yalnızca <link> öğesinin rel özelliği "prefetch" değerini kullanır.
Ancak preload yönergesinin aksine, prefetch yönergesi büyük ölçüde spekülatiftir. Bunun nedeni, gerçekleşip gerçekleşmeyeceği kesin olmayan gelecekteki bir gezinme için bir kaynağın getirilmesini başlatmanızdır.
prefetch'nın faydalı olabileceği durumlar vardır. Örneğin, web sitenizde kullanıcıların çoğunun tamamladığı bir kullanıcı akışı belirlediyseniz bu gelecekteki sayfalar için oluşturma açısından kritik bir kaynağa yönelik prefetch, yükleme sürelerini kısaltmaya yardımcı olabilir.
Fetch Priority API
Bir kaynağın önceliğini artırmak için fetchpriority özelliği üzerinden Fetch Priority API öğesini 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 öncelikte getirilir. Düzenlemeden sonra resmin ilk görüntü alanında olduğu tespit edilirse öncelik Yüksek önceliğe yükseltilir. Yukarıdaki HTML snippet'inde fetchpriority, tarayıcıya daha büyük LCP resmini Yüksek öncelikte indirmesini söylerken daha az önemli olan küçük resimler daha düşük öncelikte 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 yürütüldükten sonra sona erer. Bu aşamada, düşük öncelikli kaynakların indirilmesi gecikebilir. fetchpriority="high" kullanarak bir kaynağın önceliğini artırabilir ve tarayıcının kaynağı ilk aşamada indirmesini sağlayabilirsiniz.
Kaynak ipuçları demoları
Bilginizi test etme
preconnect kaynak ipucu ne işe yarar?
Getirme Önceliği API'si ne yapmanıza olanak tanır?
<link>, <img> ve <script> öğeleri için göreceli önceliği belirtin.
prefetchİpucunu ne zaman kullanmalısınız?
Sıradaki konu: Resim performansı
Artık sayfa HTML'si, <head> öğesi ve kaynak ipuçları söz konusu olduğunda genel performansla ilgili dikkat edilmesi gereken noktalar hakkındaki bilginizden oldukça emin olmaya başlamış olabilirsiniz. Ancak, sayfaların genellikle yüklediği farklı kaynak türlerine özgü ek optimizasyonlar da vardır. Bir sonraki modülde görüntü performansı ele alınmaktadır. Bu modül, kullanıcının cihazından bağımsız olarak web sitenizdeki görüntülerin mümkün olduğunca hızlı yüklenmesini sağlamanıza yardımcı olabilir.