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.
Tarayıcı bir web sayfasını ayrıştırdığında ve resimler, komut dosyaları veya CSS gibi kaynakları keşfedip indirmeye başladığında, en uygun sırayla indirebilmesi için onlara bir getirme priority atar. Bir kaynağın önceliği genellikle ne olduğuna ve belgede nerede olduğuna bağlıdır. Örneğin, görüntü içi resimler High önceliğine sahip olabilir ve <head> içinde <link> kullanan erken yüklenen, oluşturma engelleyici CSS'nin önceliği Very High olabilir. Tarayıcılar, iyi çalışan öncelikleri atama konusunda oldukça iyidir, ancak her durumda optimum olmayabilir.
Bu sayfada Getirme Önceliği API'sı ve bir kaynağın (high veya low) göreli önceliğine ipucu vermenizi sağlayan fetchpriority HTML özelliği ele alınmaktadır. 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ır, LCP'nin daha erken gerçekleşmesini sağlar. - Mevcut en yaygın saldırıdan daha iyi anlamlar kullanarak
asynckomut dosyalarının önceliğini artırma (asynckomut dosyası için<link rel="preload">ekleme). - Resimlerle daha iyi sıralama elde etmek için geç gövde komut dosyalarının önceliğini azaltma.
Geliştiriciler geçmişte önceden yükleme ve önceden bağlanma özelliklerini kullanarak kaynak önceliği konusunda sınırlı etkiye sahiplerdi. Önceden yükleme, tarayıcıya, doğal olarak keşfetmeden önce yüklemek istediğiniz kritik kaynakları bildirebilmenizi sağlar. Bu özellikle stil sayfalarındaki yazı tipleri, arka plan resimleri veya bir komut dosyasından yüklenen kaynaklar gibi bulunması zor kaynaklar için kullanışlıdır. Önceden bağlanma, kaynaklar arası sunuculara yönelik bağlantıların hazırlanmasına ve İlk bayta geçiş süresi gibi metriklerin iyileştirilmesine yardımcı olabilir. Bir kaynağın kaynağını biliyorsanız, ancak gerekli olacak kaynağın tam URL'sini bilmeseniz de yararlıdır.
Getirme Önceliği, bu Kaynak İpuçlarını tamamlar. Geliştiricilerin belirli bir kaynağın göreceli önceliğini belirtmek için fetchpriority özelliği aracılığıyla kullanılabilen işaretleme tabanlı bir sinyaldir. Bu ipuçlarını JavaScript ve Getirme API'si aracılığıyla da priority özelliğiyle birlikte kullanarak veriler için yapılan kaynak getirme işlemlerinin önceliğini etkileyebilirsiniz. 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.
Kaynak önceliği
Kaynak indirme sırası, tarayıcıya sayfadaki her kaynak için atanan önceliğe bağlıdır. Öncelikli hesaplama mantığını etkileyebilecek faktörler arasında şunlar yer alır:
- Kaynağın türü (ör. CSS, yazı tipleri, komut dosyaları, resimler ve üçüncü taraf kaynaklar).
- Dokümanın, kaynaklara başvurduğu konum veya sıra.
- Komut dosyalarında
asyncveyadeferözelliklerinin 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 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ı Ağ sekmesinden bir sayfayı yüklerken farklı kaynaklara atanan önceliği kontrol edebilirsiniz. (Tablo başlıklarını sağ tıklayıp öncelik sütununu eklediğinizden emin olun).
type = "font" kaynağının önceliği
type = "script" kaynağının önceliği.Öncelikler değiştiğinde hem başlangıç hem de son önceliği Büyük istek satırları ayarında veya ipucunda görebilirsiniz.
Getirme Önceliği'ne ne zaman ihtiyacınız olabilir?
Tarayıcınızın önceliklendirme mantığını anladığınıza göre artık performansı ve Önemli Web Verileri'ni optimize etmek için sayfanızın indirme sırasını değiştirebilirsiniz. Aşağıda, kaynak indirmelerin önceliğini etkilemek için değiştirebileceğiniz şeylere bazı örnekler verilmiştir:
<script>ve<link>gibi kaynak etiketlerini, tarayıcının indirmesini istediğiniz sıraya göre yerleştirin. Aynı önceliğe sahip kaynaklar genellikle keşfedildikleri sırada yüklenir.- Özellikle tarayıcı tarafından erken bir aşamada kolayca keşfedilemeyen kaynaklar için gerekli kaynakları daha erken indirmek üzere
preloadkaynak ipucunu kullanın. - Diğer kaynakları engellemeden komut dosyalarını indirmek için
asyncveyadeferaracını kullanın. - Ekranın alt kısmındaki içeriği geç yükleyin. Bu sayede tarayıcı, mevcut bant genişliğini ekranın üst kısmındaki daha önemli kaynaklar için 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:
- Ekranın üst kısmında birden fazla resminiz var, ancak bu resimlerin 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 ayarlanabilir.
- Görüntü alanı içindeki resimler genellikle
Lowönceliğinde başlar. 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 lokomotif resim gibi kritik resimlerin yüklenmesinde önemli bir gecikme yaşanmasına neden olur. İşaretlemede Getirme Önceliğinin sağlanması, resminHighönceliğinde başlayıp çok daha erken yüklenmesini sağlar. Bu işlemi bir şekilde otomatikleştirmek amacıyla büyük boyutlu ilk beş resim Chrome tarafındanMediumönceliğine ayarlanır. Bu işlem yardımcı olacaktır, ancak uygunsuz birfetchpriority="high"daha da iyi olacaktır.
CSS arka planları olarak dahil edilen LCP resimlerinin erken keşfi için yine de önceden yükleme gereklidir. Arka plan resimlerinizin önceliğini artırmak için önceden yüklemeyefetchpriority='high'ekleyin. - Komut dosyalarını
asyncveyadeferolarak 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. Özellikle kullanıcı deneyimi için kritik önem taşıyan komut dosyalarında, eşzamansız indirme işlemini sağlarken önceliklerini artırmak isteyebilirsiniz. - Kaynakları veya verileri eşzamansız olarak getirmek için JavaScript
fetch()API'sini kullanırsanız tarayıcı bunaHighönceliği atar. Özellikle kullanıcı girişine yanıt veren API çağrılarıyla arka plan API çağrılarını karıştırıyorsanız bazı getirmelerinizin daha düşük öncelikli çalışmasını isteyebilirsiniz. Arka plan API çağrılarınıLowöncelikli ve etkileşimli API çağrılarınıHighönceliği olarak işaretleyin. - Tarayıcı, CSS ve yazı tiplerine
Highönceliği atar ancak bu kaynaklardan bazıları diğerlerinden daha önemli olabilir. Kritik olmayan kaynakların önceliğini düşürmek için Getirme Önceliğini kullanabilirsiniz (ilk CSS'nin oluşturma engelleme olduğunu unutmayın, bu nedenle genellikle birHighönceliği olmalıdır).
fetchpriority özelliği
link, img veya script etiketleri kullanılarak indirildiğinde CSS, yazı tipleri, komut dosyaları ve resimler gibi kaynak türlerinin indirme önceliğini belirtmek için 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 bulguları 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 bulgusal yöntemlere izin veriyorsa tarayıcının bu kaynağın önceliğini düşürmesini istiyorsunuz.auto: Tarayıcının uygun önceliği seçmesini sağlayan varsayılan değerdir.
İşaretlemede fetchpriority özelliğinin ve komut dosyası eşdeğeri priority özelliğinin kullanımına dair 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 etkileri
fetchpriority özelliğini, aşağıdaki tabloda gösterildiği gibi farklı kaynaklara uygulayarak hesaplanan önceliklerini artırabilir veya azaltabilirsiniz. Her bir satırdaki fetchpriority="auto" (◉), söz konusu kaynak türü için varsayılan önceliği işaretler. (Google Dokümanı olarak da mevcuttur).
| 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 |
| 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, göreli önceliği ayarlar. Yani önceliği High veya Low olarak açıkça ayarlamak yerine, varsayılan önceliği uygun bir miktarda artırır veya azaltı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 "Çok Yüksek"/"En Yüksek" önceliğini korur. Bu öğelerde fetchpriority="low" kullanıldığında ise "Yüksek" önceliği korunur. Bu durumların ikisi de önceliğin açık bir şekilde High veya Low olarak ayarlanmasını içermez.
Kullanım alanları
Tarayıcıya, bir kaynağın hangi öncelikte getirileceğiyle ilgili ekstra ipucu vermek istediğinizde fetchpriority özelliğini kullanın.
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.
Ekranın üst kısmındaki resimlerin önceliğini düşürün
Hemen önemli olmayan ekranın üst kısmındaki resimlerin (ör. bir resim rulosundaki ekran dışı resimler) önceliğini azaltmak için fetchpriority="low" özelliğini 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, bunları high değerine getirmek ve ayrıca load=lazy özelliği eklenmiş olsa bile yüklenmek için "yeterince yakın" olarak kabul edilebilir. Dolayısıyla fetchpriority="low" bu için doğru çözümdür.
Oodle uygulamasıyla daha önce yaptığımız bir denemede, bunu yükleme sırasında görünmeyen resimlerin önceliğini azaltmak için kullanıyorduk. Sayfa yüklenme süresini 2 saniye azalttı.
Önceden yüklenmiş kaynakların önceliğini azaltma
Önceden yüklenmiş kaynakların diğer kritik kaynaklarla rekabet etmesini durdurmak için önceliklerini azaltabilirsiniz. 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ı yeniden adlandır
Sayfanızın etkileşimli olması gereken komut dosyaları hızlı bir şekilde yüklenmeli, ancak daha önemli 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>
Belirli DOM durumlarına dayanan komut dosyalarını async olarak işaretleyemezsiniz. Ancak, sayfanın ilerleyen kısımlarında çalışırlarsa bunları daha düşük öncelikle 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ı yine de engeller ancak bundan önceki içeriğe öncelik verilmesine olanak tanır.
Tamamlanan DOM gerekiyorsa alternatif bir yöntem de defer özelliğini (DOMContentLoaded sonrasında sırayla çalışır) veya sayfanın en altında async özelliğini kullanmaktır.
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 önemli veri getirme işlemleri için yüksek varsayılan önceliği kullanabilir ve daha az kritik 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ını getir
Getirme Önceliği, belirli kullanım durumlarında performansı iyileştirebilir, ancak Getirme Önceliği'ni kullanırken dikkat etmeniz gereken bazı noktalar vardır:
fetchpriorityözelliği bir yönerge değil, ipucudur. Tarayıcı, geliştiricinin tercihine uymaya çalışır ancak çakışmaları gidermek için kaynak önceliği tercihlerini de uygulayabilir.Getirme Önceliğini önceden yükleme ile karıştırmayın:
- Önceden yükleme bir ipucu değil, zorunlu bir getirme işlemidir.
- Önceden yükleme, tarayıcının bir kaynağı erkenden keşfetmesine olanak tanır ancak kaynağı yine de varsayılan öncelikle getirir. Buna karşılık, Getirme Önceliği bulunabilirlik konusunda 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 etkilerinden genellikle 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 yükleme belirlediysenizhighGetirme Önceliği LCP'yi önemli ölçüde iyileştirmeyebilir. Bununla birlikte, önceden yükleme diğer kaynaklar yüklendikten sonra gerçekleşirsehighGetirme Önceliği, LCP'yi daha fazla iyileştirebilir. Kritik resim CSS arka plan resmiysefetchpriority = "high"ile önceden yükleyin.Önceliklendirmeyle elde edilen yükleme süresi iyileştirmeleri, mevcut ağ bant genişliği için daha fazla kaynağın rekabet ettiği ortamlarda daha alakalıdı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 ya da HTTP/3 bağlantılarında yaygın olarak görülür. Bu durumlarda önceliklendirme, performans sorunlarını çözmeye yardımcı olabilir.
CDN'ler, HTTP/3 için de benzer şekilde HTTP/2 önceliklendirmesini uygulamaz. Tarayıcı, önceliği Getirme Önceliği'nden iletse bile CDN, kaynakları belirtilen 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. Öncelikler genellikle tarayıcı kaynak istediğinde değiştiğinden, Getirme Önceliğini yalnızca CDN veya kaynak desteğinden bağımsız olarak dahili tarayıcı önceliklendirme için kullanmak işe yarayacaktır. Örneğin, tarayıcı kritik
<head>öğeleri işlerken, resimler gibi düşük öncelikli kaynakların istenmesi genellikle engellenir.İlk tasarımınızda Getirme Önceliğini en iyi uygulama olarak sunamayabilirsiniz. Geliştirme döngünüzün ilerleyen aşamalarında, sayfadaki farklı kaynaklara atanacak öncelikleri belirleyebilirsiniz. Bunlar beklentilerinizi karşılamıyorsa daha fazla optimizasyon sağlamak için Getirme Önceliği özelliğini ekleyebilirsiniz.
Geliştiriciler, ön yüklemeyi amaçlanan amacı doğrultusunda, 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 yüklendiği zamanı 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 aklınızda bulundurun:
- HTTP üstbilgilerine bir önceden yükleme eklemek, bunu yükleme sırasındaki diğer her şeyden önce getirir.
- Genel olarak önceden yüklemeler,
Mediumveya daha yüksek öncelikli öğeler için ayrıştırıcının onlara ulaştığı sırayla yüklenir. HTML'nizin başına ön yüklemeler ekliyorsanız dikkatli olun. - Yazı tipi ön yüklemeleri, muhtemelen en iyi performansı başlığın sonuna veya gövdenin başına gösterir.
- İçe aktarma ön yüklemeleri (dinamik
import()veyamodulepreload), içe aktarma işlemi gerektiren komut dosyası etiketinden sonra çalışmalıdır. Bu nedenle, bağımlılıkları yüklenirken değerlendirilebilmesi için önce komut dosyasının yüklendiğinden veya ayrıştırıldığından emin olun. - Resim önceden yüklemeleri varsayılan olarak
LowveyaMediumönceliğine sahiptir. Bunları eşzamansız komut dosyaları ve diğer düşük veya en düşük öncelikli etiketlere göre sıralayın.
İ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 adlandırılıyordu. 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 amacıyla, artık bu API 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 tercih ettikleri yükleme sırasına ulaşmak için ek düğmeler var.