Fetch Priority API ile kaynak yüklemesini optimize etme

Fetch Priority API, kaynakların tarayıcı için göreli önceliğini gösterir. Bu, optimum yüklemeyi etkinleştirebilir 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.
  • Edge: 102.
  • Firefox: 132.
  • 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 kaynağın ne olduğuna ve dokümanda nerede bulunduğuna bağlıdır. Örneğin, görüntü alanı içi resimlerin önceliği High olabilir ve <head> içinde <link> kullanan erken yüklenmiş, oluşturmayı engelleyen CSS'nin önceliği Very High olabilir. Tarayıcılar, iyi çalışan öncelikler atamakta oldukça başarılıdır ancak bu öncelikler her durumda optimum olmayabilir.

Bu sayfada, Getirme Önceliği API'si ve bir kaynağın göreceli önceliğine (high veya low) dair ipucu vermenize olanak tanıyan fetchpriority HTML özelliği ele alınmaktadır. Getirme Önceliği, Core Web Vitals'ı optimize etmenize 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ırarak LCP'nin daha erken gerçekleşmesini sağlama
  • 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.
Google Uçuş Arama ana sayfasının iki testini 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.
Getirme Önceliği, Google Uçuş Arama testinde Largest Contentful Paint'i 2,6 saniyeden 1,9 saniyeye yükseltti.

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 özellik, özellikle stil sayfalarına eklenen yazı tipleri, arka plan resimleri veya komut dosyasından yüklenen kaynaklar gibi keşfedilmesi daha zor kaynaklar için faydalıdır. Önceden bağlanma, kaynaklar arası sunuculara yönelik bağlantıların ısınmasına yardımcı olur ve İlk bayta ulaşma süresi gibi metrikleri iyileştirmeye yardımcı olabilir. Bir kaynağı bildiğiniz ancak ihtiyaç duyacağınız kaynağın tam URL'sini bilmediğiniz durumlarda kullanışlı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, ön yüklemeyi de tamamlayabilir. Önceden yüklendiğinde bile düşük öncelik alacak bir Largest Contentful Paint resmi alın. Diğer düşük öncelikli kaynaklar tarafından geri itilirse Getirme Önceliği'ni kullanmak, resmin ne kadar sürede yükleneceğini belirlemenize yardımcı olabilir.

Kaynak önceliği

Kaynak indirme sırası, tarayıcının sayfadaki her kaynak için atadığı önceliğe bağlıdır. Öncelik hesaplama mantığını etkileyebilecek faktörler şunlardır:

  • 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 Sayfaları tek tek yükleme (düzenleme engelleme aşamasında)
Yanıp sönme
Öncelik		 VeryHigh Yüksek Orta Düşük VeryLow
DevTools
Öncelik		 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/fetch* (eş zamansız)

Tarayıcı, kaynakları keşfedildikleri sırayla aynı hesaplanan önceliğe sahip olanları indirir. Bir sayfa yüklenirken farklı kaynaklara atanan önceliği Chrome Geliştirici Araçları Ağ sekmesinden 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. Bunlar düşük ve yüksek öncelikli öğelerin bir karışımıdır.
BBC haber ayrıntıları sayfasındaki type = "script" kaynağının önceliği.

Öncelikler değiştiğinde hem ilk hem de nihai önceliği Büyük istek satırları ayarından veya bir ipucu metninden görebilirsiniz.

Ağ sekmesindeki Chrome Geliştirici Araçları&#39;na gidin. &quot;Büyük istek satırları&quot; ayarının yanında onay işareti vardır ve Öncelik sütununda, ilk resmin önceliği Yüksek olarak gösterilirken altında farklı bir başlangıç önceliği olan Orta gösterilmektedir. Aynı durum ipucunda da gösteriliyor.
Geliştirici Araçları'nda öncelik değişiklikleri.

Getirme önceliğine 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ıraya yerleştirin. Aynı önceliğe sahip kaynaklar genellikle bulundukları 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 seçeneğini kullanın.
  • Tarayıcı, mevcut bant genişliğini daha kritik olan sayfanın üst kısmındaki kaynaklar için kullanabilsin diye sayfanın altındaki içeriği yavaşça yükleyin.

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

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

  • Sayfanın üst kısmında birkaç resminiz var ancak bunların hepsinin önceliği aynı olmamalıdır. Örneğin, bir resim bandında yalnızca ilk görünür resmin daha yüksek önceliğe sahip olması gerekir. Diğerleri ise genellikle başlangıçta ekran dışında olduğundan 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. İşaretçide Getirme Önceliği'ni belirtmek, resmin High önceliğinde başlamasına ve çok daha erken yüklenmeye başlamasına olanak tanır. Bu işlemi kısmen otomatikleştirmek amacıyla, Chrome tarafından ilk beş büyük resim Medium önceliğine ayarlanır. Bu, yardımcı olur ancak açık bir fetchpriority="high" daha da iyi olur.

    CSS arka planları olarak eklenen LCP resimlerinin erken keşfi için ön yükleme yine gereklidir. Arka plan resimlerinizin önceliğini artırmak için ön yüklemeye fetchpriority='high' ekleyin.
  • Komut dosyalarını async veya defer olarak tanımlamak, 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" öncelik atanır. 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 asynkron olarak almak için JavaScript fetch() API'sini kullanırsanız tarayıcı bu API'ye High önceliği atar. Özellikle arka plan API çağrılarını kullanıcı girişine yanıt veren API çağrılarıyla karıştırıyorsanız bazı getirme işlemlerinizin daha düşük öncelikli olarak çalışması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'ye 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 önceliklidir ve tarayıcının kendi sezgisel kuralları bunu engellemediği sürece tarayıcının kaynağa normalden daha yüksek öncelik vermesini istiyorsunuzdur.
  • 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çmesine olanak tanıyan varsayılan değer.

İş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" (◉), söz konusu 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
Öncelik		 En yüksek Yüksek Orta Düşük En düşük
Ana Kaynak ◉
CSS (erken**) ⬆◉ ⬇
CSS (geç**) ⬆ ◉ ⬇
CSS (medya uyuşmazlığı***) ⬆*** ◉⬇
Komut dosyası (erken** veya ön yükleme tarayıcısından değil) ⬆◉ ⬇
Komut dosyası (geç**) ⬆ ◉ ⬇
Komut dosyası (eş zamansız/erteleyici) ⬆ ◉⬇
Yazı tipi ◉
Yazı tipi (rel=preload) ⬆◉ ⬇
İç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/fetch* (eş zamansız) ⬆◉ ⬇
Önceden getirme ◉
XSL ◉

fetchpriority, göreli önceliği belirler. Yani önceliği açıkça High veya Low olarak ayarlamak yerine varsayılan önceliği uygun bir miktarda yükseltir ya da düşürür. Bu durum genellikle High veya Low önceliğine neden olur ancak her zaman böyle olmaz. Örneğin, fetchpriority="high" içeren kritik CSS, "Çok Yüksek"/"En Yüksek" önceliği korur ve bu öğelerde fetchpriority="low" kullanıldığında "Yüksek" öncelik korunur. 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'nin veya diğer kritik resimlerin ö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 ile ve Getirme Önceliği olmadan yüklenen bir LCP arka plan resmi içeren Google Uçuş Arama sayfası gösterilmektedir. Öncelik yüksek olarak ayarlandığında LCP 2,6 saniyeden 1,9 saniyeye düştü.

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

Bir resim rulosundaki ekran dışı resimler gibi hemen önemli olmayan sayfanın üst kısmındaki resimlerin önceliğini düşürmek için fetchpriority="low" simgesini 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 numaralı resimler görüntü alanının dışında olsa da high değerine yükseltilecek ve load=lazy özelliği eklense bile yüklenecek kadar "yeterince yakın" olarak kabul edilebilir. 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 bant resminde daha yüksek öncelik belirler.
Yalnızca ilk bant resmi için yüksek öncelik kullanmak sayfanın daha hızlı yüklenmesini sağlar.

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

Ö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 ile 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ın önceliğini yeniden belirleme

Sayfanızın etkileşimli olması için ihtiyaç duyduğu komut dosyaları hızlı bir şekilde yüklenmelidir ancak oluşturmayı engelleyen diğer daha kritik 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 daha ilerisinde çalıştırılacaklarsa bunları daha düşük öncelikli olarak yükleyebilirsiniz:

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

Bu, ayrıştırıcının bu komut dosyasına ulaştığında engellenmesine neden olur ancak bu komut dosyasından önceki içeriğe öncelik verilmesine olanak tanır.

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 işlevini 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 alanlarında performansı artırabilir ancak getirme önceliğini 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 yüklemenin etkilerini gözlemlemek ve ölçmek, öncelik değişikliğinin etkilerini gözlemlemek ve ölçmekten genellikle daha kolaydır.

    Getirme Önceliği, önceliklendirmenin ayrıntı düzeyini artırarak önceden yüklemeleri tamamlayabilir. LCP resmi için <head> öğesindeki ilk öğelerden biri olarak önceden yükleme işlemini zaten belirttiyseniz high Getirme Önceliği, LCP'yi önemli ölçüde iyileştirmeyebilir. Ancak önceden yükleme diğer kaynaklar yüklendikten sonra gerçekleşirse high Getirme Önceliği, LCP'yi daha da 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 gibi durumlarda, önceliklendirmek darboğazları çözmeye yardımcı olabilir.

  • CDN'ler, HTTP/2 önceliklendirmesini ve benzer şekilde HTTP/3'ü tek tip ş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ı içinde hem de önceliği destekleyen protokollerde (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ı kritik <head> öğeleri işlerken resimler gibi düşük öncelikli kaynaklar genellikle istenmekten alıkonulur.

  • İlk tasarımınızda, Fetch Priority'i en iyi uygulama olarak ekleyemeyebilirsiniz. Geliştirme döngünüzün ilerleyen aşamalarında, sayfadaki farklı kaynaklara atanan öncelikleri görebilirsiniz. Bu öncelikler beklentilerinizle eşleşmiyorsa daha fazla optimizasyon için Getirme Önceliği'ni kullanabilirsiniz.

Geliştiriciler, önceden yükleme özelliğini amacına uygun şekilde (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 ne zaman önceden yükleneceğ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 ön 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ı, asenkron 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 denemiş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. Karışıklığı 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ı gerçekleştirmek için ek düğmeler de var.