Fetch Priority API ile kaynak yüklemesini optimize etme

Fetch Priority API, kaynakların tarayıcı için göreli önceliğini gösterir. Optimum şekilde yüklemeyi sağlayabilir ve Core Web Vitals'ı iyileştirebilir.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

Tarayıcı Desteği

  • Chrome: 102..
  • Kenar: 102..
  • Firefox: Desteklenmez..
  • Safari: 17.2..

Kaynak

Tarayıcı bir web sayfasını ayrıştırıp resimler, komut dosyaları veya CSS gibi kaynakları keşfedip indirmeye başladığında, kaynakları en uygun sırayla indirebilmesi için onlara bir getirme priority atar. Bir kaynağın önceliği, genellikle o kaynağın ne olduğuna ve belgede nerede bulunduğuna bağlıdır. Örneğin, görünüm içi resimler High önceliğine sahip olabilir. <head> içinde <link> kullanan, erken yüklenen, oluşturmayı engelleyen CSS için öncelik Very High olabilir. Tarayıcılar, iyi performans gösteren öncelikleri atamada oldukça iyidir, ancak her durumda ideal olmayabilir.

Bu sayfada, bir kaynağın (high veya low) göreceli önceliğiyle ilgili ipucu vermenizi sağlayan Getirme Önceliği API'si ve fetchpriority HTML özelliği anlatılmaktadır. Getirme Önceliği, Core Web Vitals'ı optimize etmeye yardımcı olabilir.

Özet

Getirme Önceliği'nin yardımcı olabileceği birkaç temel alan:

  • Resim öğesinde fetchpriority="high" değerini belirterek LCP resminin önceliğini artırmak, böylece LCP'nin daha erken gerçekleşmesini sağlar.
  • En yaygın mevcut saldırıdan (async komut dosyası için <link rel="preload"> ekleme) daha iyi anlamlar kullanarak async komut dosyalarının önceliği artırılıyor.
  • Resimlerle daha iyi sıralama elde etmek için son gövde komut dosyalarının önceliğini azaltma.
ziyaret edin.
Google Uçuş Arama ana sayfasındaki iki testi karşılaştıran film şeridi görünümü. En altta, hero resmin önceliğini artırmak için Getirme Önceliği kullanılır, bu da LCP&#39;de 0,7 saniye düşüşe neden olur.
Google Uçuş Arama testinde Largest Contentful Paint'i 2,6 saniyeden 1,9 saniyeye iyileştiren Priority (Öncelik) getirilsin.

Geçmişte, geliştiricilerin önceden yükleme ve önceden bağlanma özelliklerini kullanarak kaynak önceliği üzerindeki etkisi sınırlıydı. Önceden yükleme, tarayıcı doğal olarak keşfetmeden önce, yüklemek istediğiniz kritik kaynakları tarayıcıya erkenden bildirmenize olanak sağlar. Bu, özellikle stil sayfalarında bulunan yazı tipleri, arka plan resimleri veya komut dosyasından yüklenen kaynaklar gibi bulunması daha zor kaynaklar için yararlıdır. Önceden bağlanma, kaynaklar arası sunuculara yönelik bağlantıların ısınmasına yardımcı olur ve İlk bayta geçiş süresi gibi metrikleri iyileştirmeye yardımcı olabilir. Kaynağı bildiğiniz ancak ihtiyaç duyacağınız bir kaynağın URL'sini tam olarak bilmediğiniz durumlarda yararlıdır.

Getirme Önceliği bu Kaynak İpuçlarını tamamlar. Bu, geliştiricilerin belirli bir kaynağın göreli önceliğini belirtmek için kullanabileceği, fetchpriority özelliği aracılığıyla kullanılabilen işaretlemeye dayalı bir sinyaldir. Bu ipuçlarını, veriler için yapılan kaynak getirme işlemlerinin önceliğini etkilemek amacıyla JavaScript ve Getirme API'si aracılığıyla priority özelliğiyle de kullanabilirsiniz. Getirme Önceliği de önceden yüklemeyi tamamlayabilir. Largest Contentful Paint resmi çekin. Bu resim, önceden yüklendiğinde yine düşük önceliğe sahip olur. Getirme Önceliği'nin kullanılması, resmin ne kadar kısa sürede yüklendiğine yardımcı olabilir.

Kaynak önceliği

Kaynak indirme sırası, tarayıcının kaynak indirme önceliğine sayfadaki tüm kaynakları içerir. Öncelik hesaplamasını etkileyebilecek faktörler mantık şunları içerir:

  • CSS, yazı tipleri, komut dosyaları, resimler ve üçüncü taraf kaynaklar gibi kaynağın türü.
  • Belgenin, kaynaklara başvuruda bulunduğu konum veya sıra.
  • async veya defer özelliklerinin komut dosyalarında kullanılıp kullanılmadığı.

Aşağıdaki tabloda, Chrome'un çoğu kaynağı nasıl önceliklendirdiği ve sıraladığı gösterilmektedir:

  Düzen engelleme aşamasında yükle Düzen engelleme aşamasında teker teker yükleme
Yanıp sönme
Öncelik		 VeryHigh Yüksek Orta Düşük VeryLow
DevTools
Priority		 En yüksek Yüksek Orta Düşük En düşük
Ana kaynak
CSS (erken**) CSS (geç**) CSS (medya uyuşmazlığı***)
Komut dosyası (ilk** veya önceden yükleme tarayıcısından gelmeyen) Komut dosyası (geç**) Komut dosyası (eş zamansız)
Yazı tipi Yazı tipi (rel=önceden yükle)
İçe aktar
Resim (görüntü alanında) Resim (ilk 5 resim > 10.000 piksel2) Resim
Medya (video/ses)
Önceden getirme
XSL
XHR (senkronizasyon) XHR/getirme* (eş zamansız)

Tarayıcı, kaynakları keşfedildikleri sırayla aynı hesaplanan önceliğe sahip olanları indirir. Chrome Geliştirici Araçları Ağ sekmesinin altında bir sayfayı yüklerken farklı kaynaklara atanan önceliği kontrol edebilirsiniz. (Tablo başlıklarını sağ tıklayıp işaretleyerek öncelik sütununu eklediğinizden emin olun).

Ağ sekmesinde bulunan, Chrome&#39;un Geliştirici Araçları&#39;ndaki çeşitli yazı tipi kaynaklarının listelendiği Ağ sekmesi. Hepsi En yüksek öncelikli.
BBC haber ayrıntılar sayfasında type = "font" kaynağının önceliği
Ağ sekmesinde bulunan, Chrome&#39;un Geliştirici Araçları&#39;ndaki çeşitli yazı tipi kaynaklarının listelendiği Ağ sekmesi. Düşük ve Yüksek öncelikli oranların karışımıdır.
BBC haber ayrıntılar sayfasında type = "script" kaynağının önceliği.

Öncelikler değiştiğinde, hem başlangıçtaki hem de son önceliği Büyük istek satırları ayarında veya bir ipucunda görebilirsiniz.

Ağ sekmesindeki Chrome Geliştirici Araçları sekmesine gidin. &quot;Büyük istek satırları&quot; ayarı işaretlenir ve Öncelik sütunu, Yüksek ve farklı başlangıç önceliğine sahip ortadaki ilk resmi gösterir. Aynı durum ipucunda da gösteriliyor.
Geliştirici Araçları'nda öncelik değişiklikleri.

Getirme Önceliği'ne ne zaman ihtiyacınız olabilir?

Artık tarayıcının önceliklendirme mantığını anladığınıza göre performansını ve Core Web Vitals'ı optimize etmek için sayfanızın indirme sırasını değiştirebilirsiniz. Aşağıda, kaynak indirmelerinin önceliğini etkilemek için değiştirebileceğiniz şeylere ilişkin bazı örnekler verilmiştir:

  • <script> ve <link> gibi kaynak etiketlerini, tarayıcının indirmesini istediğiniz sırayla yerleştirin. Aynı önceliğe sahip kaynaklar genellikle keşfedildikleri sırayla yüklenir.
  • Özellikle tarayıcı tarafından erkenden kolayca keşfedilemeyen kaynaklar için gerekli kaynakları daha erken indirmek isterseniz preload kaynak ipucunu kullanın.
  • Diğer kaynakları engellemeden komut dosyalarını indirmek için async veya defer aracını kullanın.
  • Ekranın üst kısmındaki içeriği geç yükleyin. Böylece, tarayıcı ekranın üst kısmındaki daha önemli kaynaklar için mevcut bant genişliğini kullanabilir.

Bu teknikler, tarayıcının öncelik hesaplamasını kontrol ederek performansı ve Önemli Web Verileri'ni iyileştirir. Örneğin, kritik bir arka plan resmi önceden yüklendiğinde çok daha erken keşfedilebilir ve böylece Largest Contentful Paint (LCP) iyileştirilir.

Bu herkese açık kullanıcı adları, uygulamanızdaki kaynakları en uygun şekilde önceliklendirmek için bazen yeterli olmayabilir. Getirme Önceliği'nin faydalı olabileceği bazı senaryolar aşağıda verilmiştir:

  • Ekranın üst kısmında birkaç resminiz vardır, ancak bunların hepsi aynı önceliğe sahip olmamalıdır. Örneğin, bir resim rulosunda yalnızca ilk görünür resim daha yüksek önceliğe ihtiyaç duyarken, genellikle ekran dışındaki diğer resimler başlangıçta daha düşük önceliğe sahip olacak şekilde ayarlanabilir.
  • Görüntü alanı içindeki resimler genellikle Low önceliğinden başlar. Düzen tamamlandıktan sonra Chrome, bu öğelerin görüntü alanında olduğunu keşfeder ve önceliklerini artırır. Bu genellikle hero resimler gibi kritik resimlerin yüklenmesinde önemli bir gecikmeye neden olur. İşaretlemede Getirme Önceliği'nin sağlanması, resmin High önceliğinde başlamasını ve çok daha erken yüklenmeye başlamasını sağlar. Bu işlemi bir şekilde otomatikleştirmek amacıyla, daha büyük ilk beş resim Chrome tarafından Medium önceliğine ayarlanarak işe yarar. Ancak açık bir fetchpriority="high" daha da iyi olacaktır.

    CSS arka planı olarak dahil edilen LCP resimlerinin erken keşfedilmesi için önceden yükleme gereklidir. Arka plan resimlerinizi iyileştirmek için önceliği, önceden yüklemeye fetchpriority='high' ekleyin.
  • Komut dosyalarının async veya defer olarak bildirilmesi, tarayıcıya bunları eşzamansız olarak yüklemesini söyler. Ancak, öncelik tablosunda gösterildiği gibi, bu komut dosyalarına da "Düşük" olarak atanır öncelik sırasına koyabilirsiniz. Eşzamansız indirme olanağı sunarken özellikle kullanıcı deneyimi açısından kritik öneme sahip komut dosyaları için bu uygulamaların önceliklerini artırmak isteyebilirsiniz.
  • Kaynakları veya verileri eşzamansız olarak getirmek için JavaScript fetch() API'yi kullanırsanız tarayıcı buna High önceliği atar. Özellikle arka plandaki API çağrılarını, kullanıcı girişine yanıt veren API çağrılarıyla karıştırıyorsanız bazı getirmelerinizin daha düşük öncelikli olmasını isteyebilirsiniz. Arka plan API çağrılarını Low öncelikli, etkileşimli API çağrılarını ise High öncelikli olarak işaretleyin.
  • Tarayıcı, CSS ve yazı tiplerine High önceliği atar, ancak bu kaynakların bazıları diğerlerinden daha önemli olabilir. Kritik olmayan kaynakların önceliğini azaltmak için Getirme Önceliğini kullanabilirsiniz (ilk CSS'lerin oluşturma engelleme özelliği olduğundan genellikle High önceliğinde olması gerektiğini unutmayın).

fetchpriority özelliği

link, img veya script etiketleri kullanılarak indirildiğinde CSS, yazı tipleri, komut dosyaları ve resimler gibi kaynak türleri için indirme önceliğini belirtmek üzere fetchpriority HTML özelliğini kullanın. Aşağıdaki değerleri alabilir:

  • high: Kaynak daha yüksek bir önceliğe sahiptir ve tarayıcının kendi buluşsal yöntemleri bunu engellemediği sürece tarayıcının bu kaynağa normalden daha yüksek öncelik vermesini istersiniz.
  • low: Kaynak daha düşük bir önceliğe sahiptir ve buluşsal yöntemler izin veriyorsa tarayıcının yine buna öncelik vermesini istersiniz.
  • auto: Tarayıcının uygun önceliği seçebilmesini sağlayan varsayılan değerdir.

İşaretlemede fetchpriority özelliğinin yanı sıra komut dosyası eşdeğeri priority özelliğinin kullanımına ilişkin birkaç örneği burada bulabilirsiniz.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

Tarayıcı önceliğinin ve fetchpriority'nin etkileri

fetchpriority özelliğini farklı kaynaklara aşağıdaki tabloda gösterildiği gibi uygulayarak bu kaynakların hesaplanan önceliklerini artırabilir veya azaltabilirsiniz. Her satırdaki fetchpriority="auto" (◉) işareti, o kaynak türü için varsayılan önceliği gösterir. (Google Dokümanı olarak da mevcuttur).

  Düzen engelleme aşamasında yükle Düzen engelleme aşamasında tek seferde bir tane yükleme
Yanıp sönme
Öncelik		 VeryHigh Yüksek Orta Düşük VeryLow
DevTools
Priority		 En yüksek Yüksek Orta Düşük En düşük
Ana Kaynak ◉
CSS (erken**) ⬆◉ ⬇
CSS (geç**) ⬆ ◉ ⬇
CSS (medya uyuşmazlığı***) ⬆*** ◉⬇
Komut dosyası (ilk** veya önceden yükleme tarayıcısından gelmeyen) ⬆◉ ⬇
Komut dosyası (geç**) ⬆ ◉ ⬇
Komut dosyası (eş zamansız/erteleyici) ⬆ ◉⬇
Yazı tipi ◉
Yazı tipi (rel=önceden yükle) ⬆◉ ⬇
İçe aktar ◉
Resim (görüntü alanında - düzenden sonra) ⬆◉ ⬇
Resim (ilk 5 resim > 10.000 piksel2) ⬆ ◉ ⬇
Resim ⬆ ◉⬇
Medya (video/ses) ◉
XHR (senkronizasyon) - kullanımdan kaldırıldı ◉
XHR/getirme* (eş zamansız) ⬆◉ ⬇
Önceden getirme ◉
XSL ◉

fetchpriority, göreceli öncelik belirler. Yani varsayılan önceliği High veya Low olarak ayarlamak yerine, uygun bir miktarda yükseltir veya düşürür. Bu genellikle High veya Low önceliğiyle sonuçlanır ancak her zaman geçerli olmaz. Örneğin, fetchpriority="high" değerine sahip kritik CSS'ler "Çok Yüksek"/"En Yüksek" değerini korur ve bu öğelerde fetchpriority="low" kullanılması "Yüksek" düzeyini korur öncelik sırasına koyabilirsiniz. Bu durumların ikisi de önceliğin açıkça High veya Low olarak ayarlanmasıyla ilgili değildir.

Kullanım alanları

Tarayıcıya, bir kaynağın hangi öncelikte getirileceği konusunda ekstra ipucu vermek istediğinizde fetchpriority özelliğini kullanın.

LCP resminin önceliğini artırın

LCP veya diğer önemli resimlerin önceliğini artırmak için fetchpriority="high" belirtebilirsiniz.

<img src="lcp-image.jpg" fetchpriority="high">

Aşağıdaki karşılaştırmada, Getirme Önceliği ile birlikte ve olmadan yüklenen LCP arka plan resmine sahip Google Uçuş Arama sayfası gösterilmektedir. Öncelik yüksek olarak ayarlandığında LCP, 2,6 saniyeden 1,9 saniyeye yükseldi.

Getirme önceliği kullanılarak Google Uçuş Arama sayfasını yeniden yazmak için Cloudflare çalışanları kullanılarak yürütülen bir deney:

Ekranın üst kısmında yer alan ve çok önemli olmayan resimlerin (ör. bir resim rulosundaki ekran dışı resimler) önceliğini azaltmak için fetchpriority="low" politikasını kullanın.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

2-4 arası resimler görüntü alanının dışında olsa da "yeterince yakın" olarak kabul edilebilir değerini high değerine yükseltin ve load=lazy özelliği eklenmiş olsa bile yüklenir. Dolayısıyla fetchpriority="low", bunun için doğru çözümdür.

Oodle uygulamasıyla ilgili daha önceki bir denemede, yükleme sırasında görünmeyen resimlerin önceliğini azaltmak için bu özelliği kullanmıştık. Sayfa yüklenme süresini 2 saniye azalttı.

Oodle uygulamasının resim bandında kullanıldığında Getirme Önceliği&#39;nin yan yana karşılaştırması. Solda, tarayıcı rulo resimler için varsayılan öncelikleri ayarlar, ancak bu resimleri sağdaki örnekten yaklaşık iki saniye daha yavaş indirir ve boyar. Bu yöntem, yalnızca ilk rulo resim için daha yüksek öncelik belirler.
Yalnızca ilk rulo resim için yüksek öncelik kullanılması, sayfanın daha hızlı yüklenmesini sağlar.

Önceden yüklenmiş kaynakların önceliğini düşürün

Önceden yüklenmiş kaynakların diğer kritik kaynaklarla rekabet etmesini durdurmak için önceliklerini düşürebilirsiniz. Bu tekniği resimler, komut dosyaları ve CSS'de kullanın.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" as="script" href="non-critical-script.js" fetchpriority="low">

<!-- Preload CSS without blocking render, or other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Komut dosyalarını yeniden öncelikli hale getir

Sayfanızın etkileşimli olması gereken komut dosyaları hızlı yüklenmeli ancak daha kritik olan, oluşturmayı engelleyen diğer kaynakları engellememelidir. Bunları yüksek öncelikli async olarak işaretleyebilirsiniz.

<script src="async_but_important.js" async fetchpriority="high"></script>

Bir komut dosyasını, belirli DOM durumlarına dayanıyorsa async olarak işaretleyemezsiniz. Ancak sayfanın ilerleyen bölümlerinde çalışırlarsa bunları daha düşük öncelikli olarak yükleyebilirsiniz:

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Bu işlem, bu komut dosyasına ulaştığında ayrıştırıcıyı engellemeye devam eder ancak bundan önceki içeriğe öncelik verilmesine izin verir.

Alternatif olarak, tamamlanmış DOM gerekiyorsa defer özelliğini (sırasıyla DOMContentLoaded'dan sonra çalışan) ve hatta sayfanın en altındaki async özelliğini kullanmaktır.

Kritik olmayan veri getirme işlemlerinin önceliğini düşürün

Tarayıcı, fetch dosyasını yüksek öncelikli olarak yürütür. Aynı anda tetiklenebilecek birden fazla getirme işleminiz varsa daha önemli veri getirmeleri için yüksek varsayılan önceliği kullanabilir ve kritik düzeyi daha düşük verilerin önceliğini azaltabilirsiniz.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

Getirme Önceliği uygulama notları

Getirme Önceliği, belirli kullanım durumlarında performansı artırabilir ancak Getirme Önceliği'ni kullanırken dikkat edilmesi gereken bazı noktalar vardır:

  • fetchpriority özelliği bir yönerge değil, ipucudur. Tarayıcı, geliştiricinin tercihine saygı göstermeye çalışır, ancak çakışmaları çözmek üzere kaynak önceliği için kaynak önceliği tercihlerini de uygulayabilir.

  • Getirme Önceliğini önceden yükleme ile karıştırmayın:

    • Önceden yükleme, zorunlu bir getirme işlemidir, bir ipucu değildir.
    • Önceden yükleme, tarayıcının bir kaynağı erkenden keşfetmesine olanak tanır, ancak kaynağı varsayılan öncelikle getirir. Buna karşılık, Getirme Önceliği keşfedilebilirliğe yardımcı olmaz, ancak getirme önceliğini artırmanıza veya azaltmanıza olanak tanır.
    • Önceden bir yüklemenin etkilerini gözlemlemek ve ölçmek, öncelik değişikliğinin etkilerine kıyasla genellikle daha kolaydır.

    Getirme Önceliği, önceliklendirmenin ayrıntı düzeyini artırarak önceden yüklemeleri tamamlayabilir. Önceden yüklemeyi bir LCP resmi için <head> içinde ilk öğelerden biri olarak belirttiyseniz high Getirme Önceliği LCP'yi önemli ölçüde iyileştirmeyebilir. Bununla birlikte, önceden yükleme işlemi diğer kaynaklar yüklendikten sonra gerçekleşirse high Getirme Önceliği, LCP'yi daha iyi iyileştirebilir. Kritik bir resim CSS arka plan resmiyse bunu fetchpriority = "high" ile önceden yükleyin.

  • Önceliklendirmeye dayalı yükleme süresi iyileştirmeleri, daha fazla kaynağın mevcut ağ bant genişliği için rekabet ettiği ortamlarda daha alakalıdır. Bu durum, paralel indirmelerin mümkün olmadığı HTTP/1.x bağlantılarında ya da düşük bant genişliğine sahip HTTP/2 veya HTTP/3 bağlantılarında sık karşılaşılan bir durumdur. Bu durumlarda, önceliklendirme performans sorunlarını çözmeye yardımcı olabilir.

  • CDN'ler HTTP/2 önceliklendirmesini ve HTTP/3 için benzer şekilde eşit şekilde uygulamaz. Tarayıcı, önceliği Getirme Önceliği'nden iletse bile CDN, kaynakları belirtilen sırada yeniden önceliklendirmeyebilir. Bu durum, Getirme Önceliğini test etmeyi zorlaştırır. Öncelikler, hem tarayıcının içinde dahili olarak hem de önceliklendirmeyi destekleyen protokollerle (HTTP/2 ve HTTP/3) uygulanır. Tarayıcı kaynakları istediğinde öncelikler çoğu zaman değiştiğinden Getirme Önceliğini sadece CDN veya kaynak desteğinden bağımsız olarak dahili tarayıcı önceliklendirme için kullanmak daha iyidir. Örneğin, tarayıcı önemli <head> öğelerini işlerken, resim gibi düşük öncelikli kaynakların istenmesi genellikle engellenir.

  • Getirme Önceliğini ilk tasarımınızda en iyi uygulama olarak sunamayabilirsiniz. Geliştirme döngünüzün ilerleyen aşamalarında, sayfadaki farklı kaynaklara atanan öncelikleri belirleyebilirsiniz. Ayrıca, beklentilerinizi karşılamıyorlarsa daha fazla optimizasyon için Getirme Önceliğini kullanıma sunabilirsiniz.

Geliştiriciler, önceden yüklemeyi amaçlanan amacı doğrultusunda, yani ayrıştırıcı tarafından algılanmayan kaynakları (yazı tipleri, içe aktarmalar, arka plan LCP resimleri) önceden yüklemek için kullanmalıdır. preload ipucunun yerleşimi, kaynağın önceden ne zaman yüklendiğini etkiler.

Getirme önceliği, kaynağın getirildiğinde nasıl getirilmesi gerektiğiyle ilgilidir.

Önceden yüklemeleri kullanmayla ilgili ipuçları

Önceden yüklemeleri kullanırken aşağıdakileri göz önünde bulundurun:

  • HTTP üstbilgilerine bir önceden yükleme eklenmesi, bunu yükleme sırasında diğer her şeyden önce yerleştirir.
  • Genel olarak, önceden yüklemeler, Medium veya daha yüksek önceliğe sahip her şey için ayrıştırıcının bunları aldığı sırayla yüklenir. HTML'nizin başına önceden yüklemeler ekliyorsanız dikkatli olun.
  • Yazı tipi önceden yüklemeleri muhtemelen en iyi performansı başın sonuna veya gövdenin başına doğru verir.
  • İçe aktarma ön yüklemeleri (dinamik import() veya modulepreload), içe aktarım gerektiren komut dosyası etiketinden sonra çalıştırılmalıdır. Bu nedenle, bağımlılıkları yüklenirken değerlendirilebilmesi için öncelikle komut dosyasının yüklendiğinden veya ayrıştırıldığından emin olun.
  • Görüntü önceden yükleme işlemleri varsayılan olarak Low veya Medium önceliğine sahiptir. Bunları eşzamansız komut dosyalarına ve diğer düşük veya en düşük öncelikli etiketlere göre sıralayın.

Geçmiş

Getirme önceliği ilk olarak 2018'de Chrome'da kaynak denemesi olarak, ardından 2021'de importance özelliği kullanılarak tekrar denenmiştir. O sırada Öncelikli İpuçları olarak adlandırılıyordu. Arayüz sonradan web standartları süreci kapsamında HTML için fetchpriority ve JavaScript'in Getirme API'si için priority olarak değişti. Kafa karışıklığını azaltmak için artık bu API'ye Getirme Önceliği adını veriyoruz.

Sonuç

Geliştiriciler muhtemelen, önceden yükleme davranışındaki düzeltmeleri ve Core Web Vitals ile LCP'ye odaklanılan son odak noktasında Getirme Önceliği'ni kullanmayı tercih ediyorlar. Artık tercih ettikleri yükleme sırasını elde etmek için ek düğmeler de var.