Tarayıcıya kaynak ipuçlarıyla yardımcı olun

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ı&#39;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.
Chrome'un ağ panelinde görüldüğü şekliyle bağlantı zamanlamaları görselleştirmesi Geliştirici Araçları'nı tıklayın. Kırmızı kutudaki zamanlamalar bir proje başlatma belgesi bağlantı kurulabilir. Bu bağlantı, 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?

Kaynaklar arası sunucu için yalnızca DNS araması gerçekleştirir.
DNS araması da dahil olmak üzere kaynaklar arası bir sunucuya bağlantı açar. başlatmadan önce bağlantı ve TLS iletişimini bulamazlardı.

Getirme Öncelik API'si ne yapmanızı sağlar?

Geçerli sayfanın HTML'sinin indirilme önceliğini belirtin.
<link> için göreli önceliği belirtin. <img> ve <script> öğeleri.

prefetch ipucunu ne zaman kullanmalısınız?

Kaynakların veya sayfaların doğru olduğuna yüksek güvendiğinizde kullanıcı tarafından gerekli kılınması gerektiği anlamına gelir.
Kullanıcının ihtiyaç duyabileceği tüm kaynaklar veya sayfalar için ihtiyaç duymadığını anlarsınız.
Kullanıcı azaltılmış veriler için açık bir tercih belirtmemişse bazı yolları da görmüştük.

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.