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