Kaynak yüklemeyi optimize etme ile ilgili son modülde, farklı kaynakların CSS ve JavaScript gibi sayfa kaynaklarının sayfa yükleme hızını ve bir sayfanın oluşturulmasını hızlandırmak için bunları ve yayınlanmalarını optimize edebilirsiniz. Bu, projeyle ilgili daha gelişmiş bir çalışma alanına geçmek için mükemmel bir zamandır. Bu işlem, tarayıcının tarayıcı özelliklerini kullanarak bunları daha hızlı yüklemesine yardımcı olmayı içerir. kaynak ipuçlarından bahsedeceğiz.
Kaynak ipuçları, geliştiricilerin
yükleyen ve öncelik sırasına koyan bir tarayıcıdır. İlk kaynak kümesi
preconnect
ve dns-prefetch
gibi ipuçları ilk eklenenlerdi.
Ancak zaman içinde preload
ve Fetch Priority API'si
ek özellikler sağlar.
Kaynak ipuçları, tarayıcıya belirli işlemleri önceden yapması için talimat verir nasıl kullanabileceğinizi göstereceğiz. Kaynak ipuçları, DNS aramaları yapmak, sunuculara önceden bağlanmak ve hatta tarayıcı kaynakları keşfetmeden önce bu kaynakları çağırıyordur.
Kaynak ipuçları, HTML'de belirtilebilir. Bu kod genellikle <head>
'in başlarında belirtilebilir.
öğesine sahip olmayabilir veya HTTP üstbilgisi olarak ayarlayabilirsiniz. Bu modülün kapsamında
preconnect
, dns-prefetch
ve preload
ve
prefetch
tarafından sağlanan, tahmine dayalı getirme davranışlarıdır.
preconnect
preconnect
ipucu,
önemli kaynakları getirdiğiniz yerdir. Örneğin, Arkadaş Bitkiler projenizde
CDN veya başka bir çapraz kaynaktaki resimler veya öğeler:
<link rel="preconnect" href="https://example.com">
preconnect
kullandığınızda, tarayıcının şuna bağlanmayı planladığını tahmin edersiniz:
çok yakın gelecekte belirli kaynaklar arası sunucuyu
o bağlantıyı mümkün olan en kısa sürede açmalıdır.
Bunu yapmak için HTML ayrıştırıcısı veya önyükleme tarayıcısı kullanın.
Bir sayfada çok sayıda kaynaklar arası kaynağınız varsa preconnect
kullanın.
en kritik olanları seçin.
![Chrome Geliştirici Araçları'nın ağ panelindeki bir kaynağın bağlantı zamanlamalarının ekran görüntüsü. Bağlantı kurulumu; bekleme süresi, proxy iletişimi, DNS araması, bağlantı kurulumu ve TLS iletişimini içerir.](https://web.dev/static/learn/performance/resource-hints/image/fig-1.png?authuser=9&hl=tr)
preconnect
tarafından gerçekleştirilebilir.
kurulduğunda değil de daha erken bir zamanda
bağlantı kurarak rahatça
keşfedilebilir.
preconnect
için yaygın bir kullanım alanı Google Fonts'tur. Google Fonts'un önerdikleri
preconnect
işlemini, hizmet veren https://fonts.googleapis.com
alan adına
@font-face
bildirimlerine ve https://fonts.gstatic.com
etki alanına
yazı tipi dosyalarını sunar.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
crossorigin
özelliği, bir kaynağın
Kaynaklar Arası Kaynak Paylaşımı (CORS) kullanılarak getirilir.
preconnect
ipucu; kaynaktan indirilen kaynakta
CORS (yazı tipi dosyaları gibi) için crossorigin
özelliğini
preconnect
ipucu.
dns-prefetch
Kaynaklar arası sunuculara bağlantıların erkenden açılması,
ilk sayfa yükleme süresini uzatırsa, site bağlantısını
aynı anda birçok kaynak arası sunucuya bağlantı kurar. Endişeniz varsa
preconnect
kullanıyor olabileceğinizi düşünürsek, çok daha az maliyetli bir kaynak ipucu olarak
dns-prefetch
ipucu.
Adına göre dns-prefetch
, çapraz kaynakla bağlantı kurmaz
yerine yalnızca önceden DNS aramasını yapar. DNS
araması bir alan adı, temel IP adresine çözümlendiğinde gerçekleşir.
Cihaz ve ağ düzeylerinde DNS önbellek katmanları, bunu iyi bir
hızlı bir süreç olsa da biraz zaman alıyor.
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
DNS aramaları oldukça ucuzdur ve nispeten düşük maliyetleri nedeniyle,
bazı durumlarda preconnect
yerine daha uygun bir araç olabilir. İçinde
özel olarak, aynı zamanda web sitenizin
Kullanıcının takip edebileceğini düşündüğünüz diğer web sitelerine gitmek.
dnstradamus, JavaScript'i kullanarak bunu otomatik olarak yapan bir araçtır.
ve Intersection Observer API öğesini dns-prefetch
geçerli sayfanın HTML'sini, diğer web sitelerinin bağlantıları kullanıcının
görünüm.
preload
preload
yönergesi, bir kaynak için erken istek başlatmak amacıyla kullanılır
gerekir:
<link rel="preload" href="/lcp-image.jpg" as="image">
preload
yönergeleri, geç keşfedilen kritik kaynaklarla sınırlı olmalıdır.
En yaygın kullanım alanları yazı tipi dosyaları ve @import
aracılığıyla getirilen CSS dosyalarıdır.
bildirimleri veya En büyük olan CSS background-image
kaynakları
Contentful Paint (LCP) adayları. Bu gibi durumlarda,
kaynak harici dizinde referans verildiğinden, önceden yükleme tarayıcısı tarafından keşfedildi
kaynaklar.
preconnect
yönergesine benzer şekilde, preload
yönergesi crossorigin
gerektirir
özelliğini kullanın. Eklemez
crossorigin
özelliğini veya CORS olmayan istekler için ekleyin. Ardından kaynak
tarayıcı tarafından iki kez indirildiğinden, kapsanan
daha iyi harcanmasını sağlayabilir.
<link rel="preload" href="/font.woff2" as="font" crossorigin>
Önceki HTML snippet'inde tarayıcıya, önceden yükleme yapması istenir
/font.woff2
aynı alanda olsa bile CORS isteği kullanarak /font.woff2
.
prefetch
prefetch
yönergesi, bir
gelecekteki gezinmeler için kullanılma olasılığı yüksek kaynak:
<link rel="prefetch" href="/next-page.css" as="style">
Bu yönerge büyük ölçüde preload
yönergesiyle aynı biçime sahiptir, yalnızca
<link>
öğesinin rel
özelliği, bunun yerine "prefetch"
değerini kullanır.
Bununla birlikte, preload
yönergesinin aksine prefetch
,
ilerideki bir navigasyon işlemi için bir kaynak için getirme işlemi
veya gerçekleşmeyebilir.
prefetch
bazen faydalı olabilir. Örneğin,
web sitenizde çoğu kullanıcının sonuna kadar izlediği bir kullanıcı akışı saptadıysanız
Gelecekteki sayfalara yönelik oluşturma açısından kritik bir kaynağa ait prefetch
,
yükleme sürelerini kısaltır.
Getirme Önceliği API'si
Şu işlemler için Fetch Priority API
öğesini fetchpriority
özelliği aracılığıyla kullanabilirsiniz:
bir kaynağın önceliğini artıracaktır. Bu özelliği <link>
,
<img>
ve <script>
öğeleri.
<div class="gallery">
<div class="poster">
<img src="img/poster-1.jpg" fetchpriority="high">
</div>
<div class="thumbnails">
<img src="img/thumbnail-2.jpg" fetchpriority="low">
<img src="img/thumbnail-3.jpg" fetchpriority="low">
<img src="img/thumbnail-4.jpg" fetchpriority="low">
</div>
</div>
Resimler varsayılan olarak daha düşük öncelikte getirilir. Düzenden sonra,
resmin ilk görüntü alanında olduğu belirlenirse öncelik
Yüksek öncelikli. Önceki HTML snippet'inde fetchpriority
hemen
tarayıcıya daha büyük LCP resmini Yüksek öncelikli indirmesini söyler,
daha az önemli küçük resimler ise daha düşük öncelikte indirilir.
Modern tarayıcılar kaynakları iki aşamada yükler. İlk aşama yalnızca
komut dosyaları indirildiğinde ve tüm engelleme komut dosyaları indirildiğinde ve
yürütüldü. Bu aşamada, Düşük öncelikli kaynaklar
indiriliyor. fetchpriority="high"
kullanarak bir reklamverenin önceliğini
Tarayıcının, içeriği ilk aşamada indirmesini sağlar.
Kaynak ipuçları demoları
Bilginizi test etme
preconnect
kaynak ipucu ne işe yarar?
Getirme Öncelik API'si ne yapmanızı sağlar?
<link>
için göreli önceliği belirtin.
<img>
ve <script>
öğeleri.
prefetch
ipucunu ne zaman kullanmalısınız?
Sıradaki: Resim performansı
Şu ana kadar muhtemelen bilgi birikiminiz konusunda kendinize büyük bir güven duymaya başlıyorsunuz.
sayfa HTML'si ile ilgili genel performans değerlendirmelerini içeren <head>
öğesi ve kaynak ipuçlarını görebilirsiniz. Ancak, kampanyalarınızın
sayfaların yaygın olarak yüklediği farklı kaynak türlerine özgüdür. Sonraki bölümde
resim performansı bir sonraki modülde anlatılmıştır. Bu modülde,
ne kadar hızlı olursa olsun web sitenizin resimleri mümkün olduğunca
cihazıyla oturum açın.