Tarayıcı bir web sayfasını ayrıştırıp 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 resimlerin High önceliği vardır ve <head> içinde <link> kullanan erken yüklenen, oluşturmayı engelleyen CSS'lerin önceliği Very High olabilir. Otomatik öncelik atama genellikle iyi sonuç verir, ancak atanan sıranın optimum olmadığı kullanım alanları vardır.
Bu sayfada Fetch Priority API ve fetchpriority HTML özelliği ele alınmaktadır. Bunlar, bir kaynağın (high veya low) göreli önceliğine dair ipucu vererek Önemli Web Verileri'ni optimize etmenize yardımcı olur.
Ö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). - Görüntüleri daha iyi sıralamak 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 üzerinde sınırlı etkiye sahipti. Önceden yükleme, tarayıcı doğal olarak keşfetmeden önce yüklemek istediğiniz kritik kaynakları tarayıcıya bildirmenize olanak tanır. 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ı sunucular için bağlantıların hazırlanmasına ve İlk bayta geçiş süresi gibi metriklerin iyileştirilmesine yardımcı olabilir. Kaynağını biliyorsanız ancak gerekli olacak kaynağın tam URL'sini biliyorsanız 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 Fetch API aracılığıyla priority özelliğiyle de kullanabilirsiniz. Böylece 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.
- Tarayıcının bir kaynağı daha hızlı bulmasına ve daha erken yüklemesine yardımcı olan
preloadkaynak ipucu. asyncveyadeferkomut dosyaları için öncelik hesaplama değişiklikleri.
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ğ sekmesinin altından 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).
type = "font" 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ını ve Önemli Web Verileri'ni optimize etmek için sayfanızın indirme sırasını ayarlayabilirsiniz. Getirme Önceliğini kullanmadan değiştirebileceğiniz şeylere ilişkin bazı örnekleri burada bulabilirsiniz:
<script>ve<link>gibi kaynak etiketlerini, tarayıcının indirmesini istediğiniz sırayla yerleştirin.- Gerekli kaynakları, özellikle de tarayıcının keşfetmesinin daha zor olduğu kaynakları daha erken indirmek için
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ı, ekranın üst kısmındaki daha önemli kaynaklar için mevcut bant genişliğini kullanabilir.
Getirme Önceliği'nin ihtiyacınız olan kaynak önceliği sırasını almanıza yardımcı olabileceği bazı daha karmaşık durumları burada bulabilirsiniz:
- 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 resme daha yüksek öncelik verilir.
- Görüntü alanının içindeki hero resimler genellikle
LowveyaMediumönceliğiyle 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 resimlerin yüklenmesinde önemli bir gecikmeye yol açar. İşaretlemede Getirme Önceliğinin sağlanması, resmin "Yüksek" öncelikte ve çok daha erken yüklenmeye başlamasını sağlar.
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 bildirir. 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'yi 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önceliği ve etkileşimli API çağrılarınıHighönceliği olarak işaretleyin. - Tarayıcı, CSS ve yazı tipleri olarak bir
High" priorityatar ancak bu kaynaklardan bazıları diğerlerinden daha önemli olabilir. Kritik olmayan kaynakların önceliğini azaltmak için Getirme Önceliğini kullanabilirsiniz.
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 yüksek önceliğe sahiptir ve tarayıcının kendi buluşsal yaklaşımları bunu engellemediği sürece tarayıcının bu kaynağa öncelik vermesini istersiniz.low: Kaynak düşük ö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 yanı sıra 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 belirtir.
| 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 açıkça High veya Low olarak 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, "Yüksek" önceliği korunur. Bu durumların ikisinde de öncelik açıkça High veya Low değerine atanmaz.
Kullanım alanları
Tarayıcıya, bir kaynağın hangi öncelikte getirileceği konusunda ekstra bir ipucu vermek istediğinizde fetchpriority özelliğini kullanın.
LCP görüntüsünün önceliğini artır
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 yükselmiştir.
Ekranın üst kısmındaki resimlerin önceliğini düşürün
Resim rulosunda olduğu gibi, ekranın üst kısmı çok önemli olmayan resimlerin ö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>
Oodle uygulamasıyla ilgili daha önceki bir denemede, bunu yüklemede görünmeyen resimlerin önceliğini düşürmek 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" 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ızın etkileşimli olması gereken komut dosyalarının hızlı bir şekilde yüklenmesi gerekir ancak 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 öncelikli olarak yükleyebilirsiniz:
<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 ö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ğini kullanırken aklınızda bulundurmanız gereken bazı noktalar aşağıda belirtilmiştir:
fetchpriorityözelliği bir yönerge değil, ipucudur. Tarayıcı, geliştiricinin tercihine uymaya ç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 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. Bu arada, 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 daha kolaydır.
Getirme Önceliği, önceliklendirmenin 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, ön yükleme diğer kaynakların yüklenmesinden 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 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 önceliklendirmeyi eşit şekilde 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 tarayıcının içinde dahili olarak hem de önceliklendirmeyi 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ı önceliklendirmesi 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 sonraki aşamalarında, sayfadaki farklı kaynaklara atanacak öncelikleri belirleyebilirsiniz. Bunlar beklentilerinizle eşleşmiyorsa daha fazla optimizasyon için Getirme Önceliğini kullanıma sunabilirsiniz.
Ö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, "Orta" önceliğinin üzerindeki her şey 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 önceden yüklemeleri, muhtemelen başın sonuna veya gövdenin başlangıcına doğru en iyi şekilde çalışır.
- İç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 "Düşük" veya "Orta" ö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.
İ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 Getirme API'si için priority olarak değiştirilmiştir. Karışıklığı azaltmak için artık bu API Getirme Önceliği adını veriyoruz.