Fetch Priority API ile kaynak yüklemeyi optimize etme

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

Addy Osmani
Addy Osmani
Leena Sohoni
Leena Sohoni
Patrick Meenan
Patrick Meenan

Tarayıcı Desteği

  • 102
  • 102
  • x
  • 17,2

Kaynak

Tarayıcı bir web sayfasını ayrıştırıp resim, komut dosyası veya CSS gibi kaynakları keşfedip indirmeye başladığında, kaynakları en uygun sırayla indirebilmek için onlara bir getirme priority atar. Bu öncelikler, kaynağın türüne ve belgenin neresinde olduğuna bağlı olarak değişebilir. Örneğin, görüntü içi resimler High önceliğine sahipken <head> içindeki <link>'lar üzerinden erken yüklenen, oluşturma engelleyici CSS'ler için öncelik Very High olabilir. Tarayıcılar, iyi çalışan öncelikleri atama konusunda oldukça iyidir, ancak her durumda optimum olmayabilir.

Bu makalede, Getirme Önceliği API'sini ve bir kaynağın (high veya low) göreceli önceliğine ipucu vermenizi sağlayan fetchpriority HTML özelliğini ele alacağız. Getirme Önceliği, Önemli Web Verileri'nin optimize edilmesine yardımcı olabilir.

Özet

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

  • Resim öğesinde fetchpriority="high" belirterek LCP resminin önceliğini artırın ve LCP'nin daha erken gerçekleşmesini sağlayın.
  • Şu anda yaygın olarak kullanılan saldırıdan daha iyi anlamlar kullanarak async komut dosyalarının önceliğini artırın (async komut dosyası için <link rel="preload"> ekleyin).
  • Görsellerle daha iyi sıralama elde etmek için geç gövde komut dosyalarının önceliğini azaltın.
Google Uçuş Arama ana sayfasındaki iki testi karşılaştıran film şeridi görünümü. Altta, Getirme Önceliği lokomotif resmin önceliğini artırmak için kullanılır, bu da LCP&#39;de 0,7 saniyelik bir düşüşe neden olur.
Google Uçuş Arama ile yapılan bir testte, "Getir" önceliğini, Largest Contentful Paint'in 2,6 saniyeden 1,9 saniyeye yükseltilmesi

Geçmişte geliştiricilerin önceden yükleme ve önceden bağlanma özelliklerini kullanarak kaynak önceliği üzerinde kısmen ancak sınırlı etkiye sahip oldukları görülmüştür. Getirme Önceliği, bu Kaynak İpuçlarını tamamlar ancak bunların hepsinin yerini anlamak önemlidir. Önceden yükleme, tarayıcıya, doğal olarak keşfedilmeden önce erken yüklemek istediğiniz kritik kaynakları bildirmenizi sağlar. Bu özellikle stil sayfalarındaki yazı tipleri, arka plan resimleri veya bir komut dosyasından yüklenen kaynaklar gibi kolayca keşfedilemeyen kaynaklar için kullanışlıdır. Önceden bağlanma, kaynaklar arası sunucular için bağlantıların hazırlanmasına yardımcı olur ve Time-to-first-byte gibi metrikleri iyileştirmeye yardımcı olabilir. Bir kaynak kaynağını biliyorsanız ancak gerekli olacak bir kaynağın tam URL'sini bildiğinizde faydalıdır.

Getirme Önceliği, geliştiricilerin belirli bir kaynağın göreli önceliğini belirtmek için kullanabileceği işaretlemeye dayalı bir sinyaldir (fetchpriority özelliği ile kullanılabilir). Bu ipuçlarını, veriler için yapılan kaynak getirme işlemlerinin önceliğini etkilemek için priority özelliğiyle JavaScript ve Fetch API aracılığıyla da kullanabilirsiniz. Getirme Önceliği, önceden yüklemeyi de tamamlayabilir. Largest Contentful Paint resmi çekin. Bu resim, önceden yüklendiğinde yine de düşük öncelikli olur. Getirme Önceliği'ni kullanmak, erken yüklenen diğer düşük öncelikli kaynaklar tarafından geri itilirse resmin ne kadar kısa sürede yükleneceğine yardımcı olabilir.

Getirme Önceliği, Chrome 101 veya sonraki sürümlerde kullanılabilir.

Kaynak önceliği

Kaynak indirme sırası, tarayıcıya sayfadaki her kaynak için atanan önceliğe bağlıdır. Farklı faktörler, öncelikli hesaplama mantığını etkileyebilir. Örneğin,

  • CSS, yazı tipleri, komut dosyaları, resimler ve üçüncü taraf kaynaklarına farklı öncelikler atanır.
  • Dokümanda kaynaklara başvurduğunuz konum veya sıra da kaynakların önceliğini etkiler.
  • preload kaynak ipucu, tarayıcının bir kaynağı daha hızlı bulmasına ve böylece dokümanı yüklemeden önce yüklemesine ve önceliği etkilemesine yardımcı olur.
  • async veya defer komut dosyaları için öncelik hesaplama değişiklikleri.

Aşağıdaki tabloda, Chrome'da çoğu kaynağın şu anda nasıl önceliklendirildiği ve sıralandığını göstermek için bu tür faktörler dikkate alınmıştır.

  Düzen engelleme aşamasında yükle Düzen engelleme aşamasında tek tek yükleme
Yanıp Sönme
Öncelik
VeryHigh Yüksek Orta Düşük VeryLow
Geliştirici Araçları
Öncelik
En yüksek Yüksek Orta Düşük En düşük
Ana kaynak
CSS (erken**) CSS (gecikme**) CSS (medya uyuşmazlığı***)
Komut dosyası (erken** veya önceden yükleme tarayıcısından değil) Komut dosyası (gecikmiş**) Komut dosyası (eş zamansız)
Yazı tipi Yazı tipi (rel=preload)
İçe aktar
Resim (görüntü alanında) Resim (ilk 5 resim > 10.000 piksel 2) Resim
Medya (video/ses)
Önceden getir
XSL
XHR (senkronizasyon) XHR/fetch* (eş zamansız)

Tarayıcı, aynı işlem önceliğine sahip kaynakları keşfedildikleri sırayla indirir. Chrome Geliştirici Araçları sekmesinden bir sayfayı yüklerken farklı kaynaklara atanan önceliği kontrol edebilirsiniz. (Tablo başlıklarını sağ tıklayarak öncelik sütununu eklediğinizden emin olun).

Chrome Geliştirici Araçları&#39;nın ağ sekmesinde listelenen öğelerin ekran görüntüsü. Sütunlar soldan sağa doğru okunur: ad, durum, tür, başlatan, boyut, zaman ve öncelik.
BBC haber ayrıntıları sayfasında type = "font" kaynağının önceliği
Chrome Geliştirici Araçları&#39;nın ağ sekmesinde listelenen öğelerin ekran görüntüsü. Sütunlar soldan sağa doğru okunur: ad, durum, tür, başlatan, boyut, zaman ve öncelik.
BBC haber ayrıntıları sayfasında kaynak türünün önceliği = "script"

Önceliklerin değiştiği durumlarda, hem başlangıç hem de son önceliği görüntülemek için Büyük istek satırları ayarını kullanabilirsiniz. Bu satır, Büyük istek satırları ayarından bağımsız olarak ipucunda da gösterilir.

Chrome Geliştirici Araçları&#39;nın ağ sekmesinde listelenen öğelerin ekran görüntüsü. &quot;Büyük istek satırları&quot; ayarı işaretlenmiştir ve Öncelik sütunu Yüksek önceliğine sahip ilk resmi, aşağıda ise farklı bir başlangıç önceliğine sahip resmi gösterir. Bu kural araç ipucunda da gösterilir.
Geliştirici Araçları'nda hem başlangıç hem de son önceliği görme

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

Tarayıcının önceliklendirme mantığıyla ilgili bilginiz, indirmelerin sırasını değiştirmek için mevcut birkaç düğmeyi kullanmanıza olanak tanır. Şunları yapabilirsiniz:

  1. <script> ve <link> gibi kaynak etiketlerini, indirmek istediğiniz sıraya göre yerleştirin. Aynı önceliğe sahip kaynaklar genellikle keşfedildikleri sırada yüklenir.
  2. Özellikle tarayıcı tarafından erken bir aşamada kolayca keşfedilemeyen kaynaklar için gerekli kaynakları daha erken indirmek üzere preload kaynak ipucunu kullanın.
  3. Diğer kaynakları engellemeden komut dosyalarını indirmek için async veya defer aracını kullanın.
  4. Ekranın alt kısmındaki içeriği geç yükleyin. Bu sayede 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 öncelikli hesaplamasını kontrol etmeye yardımcı olarak performansın ve Önemli Web Verileri'nin iyileştirilmesine yardımcı olur. Örneğin, önemli bir arka plan resmi önceden yüklendiğinde çok daha erken keşfedilerek Largest Contentful Paint (LCP) geliştirilebilir.

Bazen bu herkese açık kullanıcı adları, kaynakları uygulamanıza göre en uygun şekilde önceliklendirmek için yeterli olmayabilir. Getirme Önceliğinin yararlı olabileceği senaryolardan bazıları şunlardır:

  1. Ekranın üst kısmında birden fazla resminiz var, ancak bu resimlerin tümünün aynı önceliğe sahip olması gerekmez. Örneğin, bir resim rulosunda yalnızca ilk görünür resim, diğerlerine kıyasla daha yüksek önceliğe sahip olur.
  2. Görüntü alanındaki lokomotif resimler genellikle "Düşük" öncelik düzeyinde başlar (Chrome 117'de yapılan bir değişikliğin ilk beş büyük resmi "Orta" olarak ayarlandığını, ancak hero resminizin içerebileceğini veya içermeyebileceğini unutmayın). Düzen tamamlandıktan sonra Chrome, bunların görüntü alanında olduğunu keşfeder ve önceliklerini artırır. Bu durum genellikle resmin yüklenmesini önemli ölçüde geciktirir. İşaretlemede Getirme Önceliğinin sağlanması, resmin "Yüksek" öncelikte başlayıp çok daha erken yüklenmesini sağlar.

    CSS arka planları olarak dahil edilen LCP resimlerin erken keşfi için ön yüklemenin gerekli olduğunu ve ön yükleme sırasında fetchpriority='high' eklenerek Getirme Önceliği ile birleştirilebileceğini unutmayın. Aksi takdirde, resimler için "Düşük" veya "Orta" önceliği kullanılmaya devam eder.
  3. Komut dosyalarını async veya defer olarak tanımlamak, tarayıcıya bunları eşzamansız olarak yüklemesini söyler. Ancak, önceki tabloda görüldüğü gibi, bu komut dosyalarına da "Düşük" öncelik atanır. Özellikle kullanıcı deneyimi açısından kritik önem taşıyan komut dosyalarında eşzamansız indirme işlemini sağlarken önceliklerini artırmak isteyebilirsiniz.
  4. Kaynakları veya verileri eşzamansız olarak getirmek için JavaScript fetch() API'yi kullanabilirsiniz. Getirme'ye tarayıcı tarafından "Yüksek" öncelik atanır. Tüm getirmelerinizin "Yüksek" öncelikli yürütülmesini istemediğiniz ve bunun yerine farklı bir Getirme Önceliği kullanmayı tercih ettiğiniz durumlar olabilir. Bu, arka plan API çağrılarını çalıştırırken ve bunları otomatik tamamlamada olduğu gibi kullanıcı girişine yanıt veren API çağrılarıyla karıştırırken yararlı olabilir. Arka plan API çağrıları "Düşük" öncelikli, etkileşimli API çağrıları ise "Yüksek" öncelikli olarak etiketlenebilir.
  5. Tarayıcı, CSS'ye ve yazı tiplerine "Yüksek" önceliği atar ancak bu tür kaynakların tümü LCP için aynı derecede önemli veya gerekli olmayabilir. Bu kaynaklardan bazılarının önceliğini azaltmak için Getirme Önceliği'ni kullanabilirsiniz.

fetchpriority özelliği

fetchpriority HTML özelliğini kullanarak bir Getirme Önceliği sağlayabilirsiniz. Bu özelliği link, img ve script etiketleriyle kullanabilirsiniz. Bu özellik, desteklenen etiketler kullanılarak indirildiğinde CSS, yazı tipleri, komut dosyaları ve resimler gibi kaynak türlerinin önceliğini belirtebilmenizi sağlar. fetchpriority özelliği, şu üç değerden birini kabul eder:

  • high: Kaynağı yüksek öncelikli olarak kabul eder ve tarayıcının buluşsal yöntemleri bunu engellemediği sürece tarayıcının bu kaynağa öncelik vermesini istersiniz.
  • low: Kaynağı düşük öncelikli kabul edersiniz ve bulgusal yöntemler izin veriyorsa tarayıcının bu kaynağın önceliğini düşürmesini istersiniz.
  • auto: Bu, bir tercihinizin bulunmadığı varsayılan değerdir ve tarayıcının uygun önceliği belirlemesine izin verir.

İşaretlemede fetchpriority özelliğini ve komut dosyası eşdeğeri priority özelliğini kullanmaya 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ği ve fetchpriority

fetchpriority özelliğini, hesaplanan önceliklerini potansiyel olarak artırmak veya azaltmak için aşağıdaki şekilde gösterildiği gibi farklı kaynaklara uygulayabilirsiniz. Her bir satırdaki fetchpriority="auto" (◉) simgesi, söz konusu kaynak türü için varsayılan önceliği belirtir (Google Dokümanı olarak da kullanılabilir).

  Düzen engelleme aşamasında yükle Düzen engelleme aşamasında tek tek yükleme
Yanıp Sönme
Öncelik
VeryHigh Yüksek Orta Düşük VeryLow
Geliştirici Araçları
Öncelik
En yüksek Yüksek Orta Düşük En düşük
Ana Kaynak
CSS (erken**) ⬆◉
CSS (gecikme**)
CSS (medya uyuşmazlığı***) ⬆*** ◉⬇
Komut dosyası (erken** veya önceden yükleme tarayıcısından değil) ⬆◉
Komut dosyası (gecikmiş**)
Komut dosyası (eş zamansız/ertelenmiş) ◉⬇
Yazı tipi
Yazı tipi (rel=preload) ⬆◉
İçe aktar
Resim (görüntü alanında - düzenden sonra) ⬆◉
Resim (ilk 5 resim > 10.000 piksel 2)
Resim ◉⬇
Medya (video/ses)
XHR (senkronizasyon) - kullanımdan kaldırıldı
XHR/fetch* (eş zamansız) ⬆◉
Önceden getir
XSL

fetchpriority işlevinin göreli önceliği ayarladığını unutmayın. Diğer bir deyişle, önceliği açık bir şekilde "Yüksek" veya "Düşük" olarak ayarlamak yerine varsayılan önceliği uygun bir miktarda artırır veya azaltır ve göreli önceliğe tarayıcı karar verir. Bu değer genellikle "Yüksek" veya "Düşük" olsa da her zaman geçerli değildir. Örneğin, fetchpriority="high" değerine sahip kritik CSS "Çok Yüksek"/"En Yüksek" önceliğini korumaya devam eder ve bunlarda fetchpriority="low" kullanıldığında, Öncelik açıkça "Yüksek" veya "Düşük" olarak ayarlanmadıysa da "Yüksek" önceliği korunur.

Kullanım alanları

Tarayıcıya, bir kaynağın hangi öncelikte getirileceğiyle ilgili ilave bir ipucu vermek isteyebileceğiniz senaryoları ele almak için fetchpriority özelliğini kullanabilirsiniz.

LCP görüntüsünün önceliğini artırın

LCP veya diğer kritik görüntülerin önceliğini artırmak için fetchpriority="high" değerini belirtebilirsiniz.

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

Aşağıdaki karşılaştırmada, Getirme Önceliği olan ve olmayan bir LCP arka plan resminin yüklü olduğu Google Uçuş Arama sayfası gösterilmektedir. Öncelik yüksek olarak ayarlandığında LCP 2,6 saniyeden 1,9 saniyeye iyileşti.

Getirme Önceliğini kullanmak üzere Google Uçuş Arama sayfasını yeniden yazmak için Cloudflare çalışanları kullanılarak bir deneme yapıldı.

Ekranın üst kısmındaki resimlerin önceliğini düşürün

Başlangıçta önemli olmayabilecek resimlerin (ör. bir resim rulosunda) önceliğini azaltmak için fetchpriority="low" kullanabilirsiniz.

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

Oodle uygulamasıyla ilgili daha önce yaptığımız bir denemede, bunu yükleme sırasında görünmeyen resimlerin önceliğini azaltmak için kullanıyorduk. Bu, yükleme süresini 2 saniye azaltmaya yardımcı oldu.

Oodle uygulamasının resim bandında kullanıldığında Getirme Önceliğinin yan yana karşılaştırması. Soldaki tarayıcı, bant resimler için varsayılan öncelikleri ayarlar ancak bu resimleri, sağdaki örnekten yaklaşık iki saniye daha yavaş indirir ve boyar. Bu durumda, yalnızca ilk dönen resme göre daha yüksek bir öncelik belirlenir.

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

Önceden yüklenmiş kaynakların diğer kritik kaynaklarla rekabet etmesini durdurmak için önceliklerini azaltmaya yönelik bir ipucu sağlayabilirsiniz. Bu tekniği resimler, komut dosyaları ve CSS ile kullanabilirsiniz.

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

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

Komut dosyalarını yeniden adlandır

Sayfanın bazı bölümlerini etkileşimli hale getirmek için gereken komut dosyaları gereklidir ancak diğer kaynakları engellememelidir. Bunları yüksek önceliğe sahip eşzamansız olarak işaretleyebilirsiniz.

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

Belirli DOM durumlarına dayanan komut dosyaları eşzamansız olarak işaretlenemez. Ancak, sayfada daha altta yer alırlarsa gösterildiği gibi daha düşük bir öncelikle indirilebilirler.

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

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

Tarayıcı, fetch işlemini yüksek bir öncelikle çalıştırır. Aynı anda tetiklenebilecek birden fazla getirme işleminiz varsa daha kritik veri getirme işlemleri için yüksek varsayılan önceliği kullanabilir, daha az kritik veriler için ise varsayılan önceliği düşürebilirsiniz.

// 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ını getir

Getirme Önceliği, yukarıda açıklandığı gibi belirli kullanım durumlarında performansı artırabilir. Dikkat edilmesi gereken bazı noktalar vardır:

  • fetchpriority özelliği bir yönerge değil, ipucudur. Tarayıcı, geliştiricinin tercihine uymaya çalışır. Çakışma durumunda tarayıcının gerekli gördüğü kaynak önceliği tercihlerini uygulaması da mümkündür.
  • Getirme Önceliği bir önceden yükleme ile karıştırılmamalıdır. İkisi de birbirinden farklıdır çünkü:

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

    Getirme Önceliği, öncelik sırasının ayrıntı düzeyini artırarak ön yüklemeleri tamamlayabilir. Bir LCP resmi için <head> içindeki ilk öğelerden biri olarak önceden bir ön yükleme belirttiyseniz high Getirme Önceliği önemli kazanımlarla sonuçlanmayabilir. Ancak, önceden yükleme diğer kaynaklardan sonra geliyorsa high Getirme Önceliği LCP'yi iyileştirebilir. Kritik resim CSS arka plan resmiyse fetchpriority = "high" ile önceden yüklemeniz gerekir.

  • Önceliklendirmenin sağladığı dikkate değer kazanımlar, kullanılabilir ağ bant genişliği için daha fazla kaynağın rekabet ettiği ortamlarda daha alakalı olacaktır. Bu durum, paralel indirmenin mümkün olmadığı HTTP/1.x bağlantılarında veya düşük bant genişliğine sahip HTTP/2 bağlantılarında sık karşılaşılan bir durumdur. Önceliklendirme bu koşullarda dar boğazları çözebilir.

  • CDN'ler, HTTP/2 önceliklendirmeyi eşit şekilde uygulamaz. Tarayıcı, Getirme Önceliğini kullanarak önerilen önceliği iletse bile, CDN, kaynakları gerekli sırada yeniden önceliklendirmeyebilir. Bu, Getirme Önceliğinin test edilmesini zorlaştırır. Öncelikler hem dahili olarak tarayıcının içinde hem de öncelik belirlemeyi destekleyen protokollerle (HTTP/2 ve HTTP/3) uygulanır. CDN veya kaynak desteğinden bağımsız olarak yalnızca dahili tarayıcı önceliklendirmesi için bile kullanmaya devam edebilirsiniz. Çünkü, kaynaklar tarayıcı tarafından istendiğinde genellikle değişir. Örneğin, tarayıcı kritik <head> öğelerini işlerken resimler gibi düşük öncelikli kaynakların istenmesini engeller.

  • İlk tasarımınızda en iyi uygulama olarak Getirme Önceliğini eklemeniz mümkün olmayabilir. Geliştirme döngüsünün ilerleyen aşamalarında uygulayabileceğiniz bir optimizasyondur. Sayfadaki farklı kaynaklara atanan öncelikleri kontrol edebilir ve bunlar beklentilerinizi karşılamıyorsa daha fazla optimizasyon için Getirme Önceliğini ekleyebilirsiniz.

Chrome 95'ten sonra Önceden Yükleme özelliğini kullanma

Getirme Önceliği özelliği, Chrome 73 ile 76 arasındaki sürümlerde deneme için sunulmaktaydı, ancak Chrome 95'te düzeltilen ön yüklemelerle ilgili önceliklendirme sorunları nedeniyle kullanıma sunulmamıştır. Chrome 95'ten önce <link rel=preload> aracılığıyla gönderilen istekler, diğer istekler daha yüksek önceliğe sahip olsa bile her zaman ön yükleme tarayıcısı tarafından görülen diğer isteklerden önce başlar.

Chrome 95'teki düzeltme ve Getirme Önceliği iyileştirmesiyle birlikte, geliştiricilerin amaçlanan amacı doğrultusunda, yani ayrıştırıcı tarafından tespit edilmeyen kaynakları (yazı tipleri, içe aktarmalar, arka plan LCP resimleri) önceden yüklemek için ön yüklemeyi kullanmaya başlayacaklarını umuyoruz. preload ipucunun yerleşimi, kaynağın önceden yüklendiği zamanı etkiler. Önceden yükleme kullanımıyla ilgili bazı temel noktalar şunlardır:

  • Önceden yüklemenin HTTP üstbilgilerine dahil edilmesi, diğer tüm özelliklerin önüne geçmesine neden olur.
  • Genel olarak ön yüklemeler, "Orta" önceliğinin üzerindeki her şey için ayrıştırıcının onlara ulaştığı sırayla yüklenir. Bu nedenle, önceden yüklemeleri HTML'nin başına eklerken dikkatli olun.
  • Yazı tipi önceden yüklemeleri, muhtemelen başın sonuna veya gövdenin başlangıcına doğru en iyi şekilde çalışacaktır.
  • İçe aktarma önceden yüklemeleri (dinamik import() veya modulepreload), içe aktarma işlemi için gereken komut dosyası etiketinden sonra yapılmalıdır (böylece gerçek komut dosyası önce yüklenir/ayrıştırılır). Temel olarak, komut dosyası etiketi bağımlılıkların yüklemesini tetikleyecek bir komut dosyası yüklerse bağımlılıklara ilişkin <link rel=preload> değerinin üst komut dosyası etiketinden sonra olduğundan emin olun. Aksi takdirde, bağımlılıklar ana komut dosyasından önce yüklenebilir. Doğru sırada, bağımlılıklar yüklenirken ana komut dosyası ayrıştırılabilir/eval'lenebilir.
  • Resim önceden yüklemeleri "Düşük" veya "Orta" önceliğe sahiptir (Getirme Önceliği olmadan) ve eşzamansız komut dosyaları ve diğer düşük veya en düşük öncelikli etiketlere göre sıralanmalıdır.

İzledikleriniz

Getirme Önceliği ilk olarak 2018'de Chrome'da kaynak denemesi olarak denendi ve ardından 2021'de importance özelliği kullanılarak tekrar denendi. O zamanlar Öncelikli İpuçları olarak biliniyordu. Arayüz, web standartları sürecinin bir parçası olarak HTML için fetchpriority ve JavaScript'in Fetch API'si için priority olarak değiştirildi. Karışıklığı azaltmak için bu API'ye artık Getirme Önceliği adını veriyoruz.

Sonuç

Geliştiricilerin, ön yükleme davranışındaki düzeltmelerin yanı sıra son zamanlarda Önemli Web Verileri ve LCP'ye odaklanılan Getirme Önceliği özelliği ile ilgilenmesi olasıdır. Artık istedikleri yükleme sırasını gerçekleştirmek için ek düğmeler var.