Tarayıcıya kaynak ipuçlarıyla yardımcı olun

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 sayfa oluşturmayı hızlandırmak için bunları ve teslimatlarını 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 kullanıma sunuldu. Ancak zaman içinde preload ve Getirme Önceliği API'si de ek özellikler sunmak 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ği kaynakları önceden getirme gibi işlemler yapabilir.

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

Chrome Geliştirici Araçları&#39;nın ağ panelindeki bir kaynağın bağlantı zamanlamalarının ekran görüntüsü. Bağlantı kurulumu; bekleme süresi, proxy anlaşması, DNS araması, bağlantı kurulumu ve TLS anlaşmasını içerir.
Chrome Geliştirici Araçları'nın ağ panelinde görüldüğü gibi bağlantı zamanlamalarının görselleştirilmesi. Kırmızı kutudaki süreler, kaynaklar arası sunucuyla bağlantı kurmayla ilgilidir. preconnect, kaynaklar arası kaynağın keşfedildiği sırada değil, daha erken bağlantılar kurarak bu süreyi kısaltabilir.

preconnect için yaygın bir kullanım alanı Google Fonts'tur. Google Yazı Tipleri, preconnect alanına https://fonts.googleapis.com alanına bağlanmanızı önerir. Bu alan, @font-face beyanlarını ve https://fonts.gstatic.com alanını sunar. Bu alan ise yazı tipi dosyalarını sunar.

<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 preconnect özelliğini crossorigin 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, bunun yerine 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 süreci 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 yerine 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" fetchpriority="high">

preload yönergeleri, geç keşfedilen kritik kaynaklarla sınırlı olmalıdır. En yaygın kullanım alanları, yazı tipi dosyaları, @import bildirimleri aracılığıyla getirilen CSS dosyaları veya Largest Contentful Paint (LCP) adayları olması muhtemel CSS background-image kaynakları ya da ilk HTML'de bulunamayan diğer LCP kaynaklarıdır (örneğin, JavaScript tarafından yükleniyorsa). Bu tür durumlarda, kaynak harici kaynaklarda referans verildiği için 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 kullanılarak /font.woff2 ö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 bazen faydalı olabilir. Ö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ğın prefetch, bu sayfaların yüklenme sürelerini kısaltmaya yardımcı olabilir.

Fetch Priority API

Bir kaynağın önceliğini artırmak için fetchpriority özelliği aracılığıyla 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ı içinde 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 önceliğe sahip olarak indirmesini söylerken daha az önemli olan küçük resimler daha düşük bir öncelikle 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üğünde 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?

Tarayıcının normalde keşfedeceği zamandan önce DNS araması, bağlantı ve TLS anlaşması dahil olmak üzere kaynaklar arası bir sunucuya bağlantı açar.
Doğru!
Yalnızca kaynaklar arası sunucu için DNS araması gerçekleştirir.
Tekrar deneyin.

Getirme Önceliği API'si ile neler yapabilirsiniz?

Mevcut sayfanın HTML'sinin indirileceği önceliği belirtin.
Tekrar deneyin.
<link>, <img> ve <script> öğelerinin göreceli önceliğini belirtin.
Doğru!

prefetchİpucunu ne zaman kullanmalısınız?

Kullanıcının gelecekte gerçekten ihtiyacı olsun olmasın, ihtiyaç duyabileceği tüm kaynaklar veya sayfalar için.
Tekrar deneyin.
Önceden getirmeyi planladığınız kaynakların veya sayfaların kullanıcı tarafından yüksek olasılıkla gerekli olacağından eminseniz.
Doğru!
Kullanıcı, veri kullanımını azaltma konusunda açık bir tercih belirtmediyse.
Doğru!

Sıradaki konu: Resim performansı

Artık sayfa HTML'si, <head> öğesi ve kaynak ipuçları söz konusu olduğunda genel performansla ilgili hususlar 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.