Var web performansını iyileştirmenin birçok yolu. Bunlardan biri daha sonra ihtiyaç duyulacak içeriğin önceden yüklenmesidir. CSS ön işleme, tam sayfa ön işleme veya alan adı çözümlemesi. Her şeyi önceden yapıyoruz ve ardından sonucu anında gösteriyoruz! Harika görünüyor.

Daha da havalı olanı, çok basit bir şekilde uygulanmasıdır. Beş etiket tarayıcıya ön eylemleri gerçekleştirmesi için bir komut verin:

<link rel="prefetch" href="/tr/style.css" as="style" />
<link rel="preload" href="/tr/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

Ne işe yaradıklarını ve ne zaman kullanılmaları gerektiğini kısaca açıklayalım.

Atlamak: preload · Önalım · ön bağlantı · dns-önceden getirme · ön işleme

preload

<link rel= "preload"> tarayıcıya bir kaynağı (komut dosyası veya stil sayfası gibi) mümkün olan en kısa sürede yüklemesini ve önbelleğe almasını söyler. Bu, sayfa yüklendikten birkaç saniye sonra bir kaynağa ihtiyaç duyulduğunda ve süreci hızlandırmak istediğinizde kullanışlıdır.

Tarayıcı, yükleme sonrasında kaynakla hiçbir şey yapmıyor. Komut dosyaları yürütülmez, stil sayfaları uygulanmaz. Kaynak basitçe önbelleğe alınır ve istek üzerine hemen kullanıma sunulur.

sözdizimi

<link rel="preload" href="/tr/style.css" as="style" />

href indirmek istediğiniz kaynağı işaret eder.

as tarayıcıya indirilebilecek herhangi bir şey olabilir:

style stil sayfaları için,
script senaryolar için,
font yazı tipleri için,
fetch kullanılarak yüklenen kaynaklar için fetch() veya XMLHttpRequest,
tam listeye bakın MDN'de.

Özelliğin belirtilmesi önemlidir as – bu, tarayıcının indirme işlemlerini doğru şekilde önceliklendirmesine ve zamanlamasına yardımcı olur.

Ne zaman kullanılır?

Kaynağa çok yakın gelecekte ihtiyaç duyulduğunda ön yüklemeyi kullanın. Örneğin:

Harici bir dosyadaki standart olmayan yazı tipleri:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Varsayılan olarak comic-sans.woff2 yalnızca indirip ayrıştırdıktan sonra yüklemeye başlayacak index.css. Bu kadar uzun süre beklemekten kaçınmak için yazı tipini daha önce kullanarak indirebilirsiniz. <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Stillerinizi yaklaşıma göre ayırırsanız Kritik CSS kritik (hemen işleme için) ve kritik olmayan olmak üzere iki kısma ayrılır:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
Bu yaklaşımla, kritik olmayan stiller yalnızca JavaScript çalıştırıldığında yüklenmeye başlar; bu, oluşturma işleminden birkaç saniye sonra gerçekleşebilir. JS kullanımını beklemek yerine <link rel= "preload">indirmeye daha erken başlamak için:
```
<style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/tr/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```

Ön yüklemeyi aşırı kullanmayın. Her şeyi arka arkaya yüklerseniz site sihirli bir şekilde hızlanmayacaktır, aksine tarayıcının işini doğru planlamasını engelleyecektir.

Önceden getirme ile karıştırılmamalıdır. Kullanmayın <link rel= "preload">, sayfa yüklendikten hemen sonra kaynağa ihtiyacınız yoksa. Daha sonra, örneğin bir sonraki sayfa için ihtiyacınız olursa, şunu kullanın: <link rel= "prefetch">.

Ayrıntılar

Bu gerekli bir etikettir diğer tüm etiketlerin aksine, tarayıcı tarafından yürütülecek (eğer destekliyorsa) Ön yüklemeyle ilgili. Tarayıcının belirtilen kaynağı indirmesi gerekir. <link rel="preload">. Diğer durumlarda, örneğin yavaş bir bağlantıda çalışıyorsa, ön yüklemeyi göz ardı edebilir.

öncelikler. Tarayıcılar genellikle en önemli kaynakları ilk önce yüklemek için farklı kaynaklara (stil, komut dosyaları, yazı tipleri vb.) farklı öncelikler atar. Bu durumda tarayıcı önceliği özniteliğe göre belirler. as. Chrome tarayıcı için şuraya bakabilirsiniz tam öncelik tablosu.

Önalım

<link rel= "prefetch"> tarayıcıdan arka planda bir kaynağı (komut dosyası veya stil sayfası gibi) indirmesini ve önbelleğe almasını ister. Yükleme düşük öncelikli olarak gerçekleşir, böylece daha önemli kaynaklara müdahale edilmez. Kaynağa bir sonraki sayfada ihtiyaç duyulursa ve onu önceden önbelleğe almak istiyorsanız bu kullanışlıdır.

Burada da tarayıcı, yükleme sonrasında kaynakla ilgili hiçbir şey yapmaz. Komut dosyaları yürütülmez, stil sayfaları uygulanmaz. Kaynak basitçe önbelleğe alınır ve istek üzerine hemen kullanıma sunulur.

sözdizimi

<link rel="prefetch" href="/tr/style.css" as="style" />

href indirmek istediğiniz kaynağı işaret eder.

as tarayıcıya indirilebilecek herhangi bir şey olabilir:

style stil sayfaları için,
script senaryolar için,
font yazı tipleri için,
fetch kullanılarak yüklenen kaynaklar için fetch() veya XMLHttpRequest,
tam listeye bakın MDN'de.

Özelliğin belirtilmesi önemlidir as - bu, tarayıcının indirme işlemlerini doğru bir şekilde önceliklendirmesine ve zamanlamasına yardımcı olur.

Ne zaman kullanılır?

Diğer sayfalardan kaynak yüklemek için, başka bir sayfadan bir kaynağa ihtiyacınız varsa ve o sayfanın oluşturulmasını hızlandırmak için bunu önceden yüklemek istiyorsanız. Örneğin:

Çevrimiçi bir mağazanız var ve kullanıcıların %40'ı ürün sayfasına gitmek için ana sayfadan ayrılıyor. Kullanmak <link rel= "prefetch">, ürün sayfalarını oluşturmak için CSS ve JS dosyalarını yükleme.
Tek sayfalık bir uygulamanız var ve farklı sayfalar farklı paketler yüklüyor. Bir kullanıcı bir sayfayı ziyaret ettiğinde, bu sayfanın bağlantı verdiği tüm sayfalara ilişkin paketler önceden yüklenebilir.

Bu etiketin herhangi bir ölçüde güvenle kullanılabilmesi muhtemeldir.. Tarayıcılar genellikle önceden getirmeyi en düşük önceliğe göre planlar, bu nedenle kimseyi rahatsız etmez. Kullanıcı trafiğini tükettiğini ve bunun da paraya mal olabileceğini unutmayın.

Acil istekler için değil. Kullanmayın <link rel= "prefetch">, kaynağa birkaç saniye içinde ihtiyaç duyulduğunda. Bu durumda kullanın <link rel= "preload">.

Ayrıntılar

İsteğe bağlı etiket. Tarayıcının bu talimatı izlemesi gerekli değildir; örneğin yavaş bir bağlantıda bunu göz ardı edebilir.

Chrome'da öncelik. Chrome'da <link rel= "prefetch"> genellikle minimum öncelik ile yürütülür (bkz. tam öncelik tablosu), yani diğer her şeyi yükledikten sonra.

ön bağlantı

<link rel= "preconnect"> gelecekte bağlantı kurulumunu hızlandırmak istediğinizde tarayıcıdan etki alanına önceden bağlanmasını ister.

Tarayıcı, yeni bir üçüncü taraf etki alanından herhangi bir kaynak alırsa bir bağlantı kurmalıdır. Örneğin, Google Fonts'u yüklerse, bir CDN'den React fontlarını yüklerse veya bir API sunucusundan JSON yanıtı isterse.

Yeni bir bağlantı kurmak genellikle birkaç yüz milisaniye sürer. Bir kez yapılır ama yine de zaman alır. Önceden bağlantı kurduysanız zamandan tasarruf edecek ve bu alandan kaynakları daha hızlı indireceksiniz.

sözdizimi

<link rel= "preconnect" href="https://api.my-app.com" />

href IP adresini belirlemek istediğiniz alan adını belirtir. Bir önekle belirtilebilir (https://domain.com) veya onsuz (//domain.com).

Ne zaman kullanılır?

Yakında ihtiyaç duyulacak alan adları için kullanın oradan önemli bir stil, komut dosyası veya görsel indirmek için, ancak kaynak URL'sini henüz bilmiyorsunuz. Örneğin:

Uygulamanız şu adreste barındırılıyor: my-app.com ve AJAX isteklerinde bulunur api.my-app.com: JS'den dinamik olarak yapıldıkları için belirli sorguları önceden bilemezsiniz. Burada etki alanına önceden bağlanmak için bir etiket kullanmak oldukça uygundur.
Uygulamanız şu adreste barındırılıyor: my-app.com ve Google Fonts'u kullanıyor. İki adımda indirilirler: İlk olarak CSS dosyası alan adından indirilir. fonts.googleapis.com, daha sonra bu dosya yazı tiplerini ister fonts.gstatic.com. Belirli yazı tipi dosyalarının hangisinden olduğunu bilemezsiniz fonts.gstatic.com CSS dosyasını yükleyene kadar ihtiyacınız olacak, bu nedenle önceden yalnızca bir ön bağlantı yapabiliriz.

Bazı üçüncü taraf komut dosyalarını hızlandırmak veya biraz stil vermek için bu etiketi kullanın önceden kurulmuş bağlantı nedeniyle.

aşırı kullanmayın. Bağlantı kurmak ve sürdürmek hem istemci hem de sunucu için pahalı bir işlemdir. Bu etiketi maksimum 4-6 alan adı için kullanın.

Ayrıntılar

İsteğe bağlı etiket. Tarayıcının bu talimatı izlemesi zorunlu değildir ve örneğin çok sayıda bağlantı zaten kurulmuşsa veya başka bir durumda bunu göz ardı edebilir.

Bağlantı süreci neler içerir?. Her siteye bağlanmak için tarayıcının aşağıdakileri yapması gerekir:

DNS çözünürlüğü. Sunucu IP adresini bulun (216.58.215.78) belirtilen alan adı için (google.com).
TCP anlaşması. Sunucuyla bir TCP bağlantısı başlatmak için paketleri (istemci → sunucu → istemci) değiştirin.
TLS anlaşması (yalnızca HTTPS siteleri). Güvenli bir TLS oturumu başlatmak için iki tur paket değişimi (istemci → sunucu → istemci → sunucu → istemci).

Not: HTTP/3, el sıkışma mekanizmasını iyileştirecek ve hızlandıracaktır, ancak bu henüz çok uzaktadır.

dns-önceden getirme

<link rel= "dns-prefetch"> Yakında bağlanacaksanız ve ilk bağlantıyı hızlandırmak istiyorsanız, tarayıcıdan etki alanı için DNS çözümlemesini önceden gerçekleştirmesini ister.

Tarayıcı, yeni bir üçüncü taraf alan adından herhangi bir kaynak alacaksa, alan adının IP adresini belirlemelidir. Örneğin, Google Fonts'u yüklemek, bir CDN'den React fontlarını yüklemek veya bir API sunucusundan JSON yanıtı istemek.

Her yeni alan adı için DNS kayıt çözümlemesi genellikle yaklaşık 20-120 ms sürer. Bu yalnızca belirli bir alandan ilk kaynağın yüklenmesini etkiler ancak yine de bir gecikmeye neden olur. DNS çözümlemesini önceden yaparsak zamandan tasarruf edeceğiz ve kaynağı daha hızlı yükleyeceğiz.

sözdizimi

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href IP adresini ayarlamak istediğiniz alan adını belirtir. Bir önekle belirtilebilir (https://domain.com) veya onsuz (//domain.com).

Ne zaman kullanılır?

Yakında ihtiyaç duyulacak alan adları için kullanın tarayıcının önceden bilmediği kaynakları oradan indirmek için. Örneğin:

Uygulamanız şu adreste barındırılıyor: my-app.com ve AJAX isteklerinde bulunur api.my-app.com: JS'den dinamik olarak yapıldıkları için belirli sorguları önceden bilemezsiniz. Burada etki alanına önceden bağlanmak için bir etiket kullanmak oldukça uygundur.
Uygulamanız şu adreste barındırılıyor: my-app.comve Google Fonts'u kullanıyor. İki adımda indirilirler: İlk olarak CSS dosyası alan adından indirilir. fonts.googleapis.com, daha sonra bu dosya yazı tiplerini ister fonts.gstatic.com. Belirli yazı tipi dosyalarının hangisinden olduğunu bilemezsiniz fonts.gstatic.com CSS dosyasını yükleyene kadar buna ihtiyacınız olacak, bu nedenle önceden yalnızca bir ön bağlantı yapabiliriz.

Bazı üçüncü taraf komut dosyalarını hızlandırmak veya biraz stil vermek için bu etiketi kullanın önceden kurulmuş bağlantı nedeniyle.

Lütfen benzer özelliklere dikkat edin <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Bunları tek bir alan adı için birlikte kullanmak genellikle mantıklı değildir: <link rel= "preconnect"> zaten içeriyor <link rel= "dns-prefetch"/> ve daha fazlası. Bu iki durumda haklı gösterilebilir:

Eski tarayıcıları desteklemek istiyor musunuz?. <link rel= "dns-prefetch" /> Tarafından desteklenen IE10 ve Safari 5'ten beri. <link rel= "preconnect"> Bir süre Chrome ve Firefox'ta desteklendi ancak Safari'ye yalnızca 11.1 ve XNUMX'de eklendi. IE/Edge'de hala desteklenmiyor. Bu tarayıcıları desteklemeniz gerekiyorsa şunu kullanın: <link rel= "dns-prefetch" /> için bir yedekleme seçeneği olarak <link rel= "preconnect">.

4-6'dan fazla alana olan bağlantıları hızlandırmak istiyorsunuz. Etiket <link rel= "preconnect"> Bağlantı kurmak ve sürdürmek pahalı bir işlem olduğundan 4-6'dan fazla domain ile kullanılması önerilmez. <link rel= "dns-prefetch" /> daha az kaynak tüketir, bu nedenle gerekirse kullanın.

Ayrıntılar

İsteğe bağlı etiket. Tarayıcının bu talimatı izlemesi gerekmediğinden, örneğin sayfada bu tür çok sayıda etiket varsa veya başka bir durumda DNS çözümlemesi gerçekleştiremeyebilir.

DNS nedir. İnternetteki her sunucunun benzersiz bir IP adresi vardır; 216.58.215.78. Sitenin adı genellikle tarayıcının adres çubuğuna girilir (örneğin, google.com) ve DNS (Etki Alanı Adı Sistemi) sunucuları bunu sunucunun IP adresiyle eşleştirir (216.58.215.78).

Bir IP adresi belirlemek için tarayıcının DNS sunucusunu sorgulaması gerekir. Yeni bir üçüncü taraf etki alanına bağlanmak 20−120 ms sürer.

Çok güvenilir olmasa da DNS önbelleğe alındı. Bazı işletim sistemleri ve tarayıcılar DNS sorgularını önbelleğe alır: bu, tekrarlanan sorgularda zaman kazandırır, ancak önbelleğe alma işlemine güvenilemez. Linux'ta genellikle hiç çalışmıyor. Chrome'un bir DNS önbelleği vardır, ancak yalnızca bir dakika sürer. Windows, DNS yanıtlarını beş gün boyunca önbelleğe alır.

ön işleme

<link rel= "prerender"> tarayıcıdan URL'yi indirmesini ve görünmez bir sekmede görüntülemesini ister. Kullanıcı linke tıkladığında sayfa hemen görüntülenmelidir. Kullanıcının belirli bir sayfayı ziyaret edeceğinden eminseniz ve bu sayfanın görüntülenmesini hızlandırmak istiyorsanız bu kullanışlıdır.

Bu etiketin olağanüstü etkinliğine rağmen (veya bu nedenle), 2019'da <link rel= "prerender"> büyük tarayıcılarda yeterince desteklenmiyor. Daha fazla ayrıntıya bakın. aşağıda.

sözdizimi

<link rel="prerender" href="https://my-app.com/pricing" />

href arka planda oluşturmaya başlamak istediğiniz URL'yi işaret eder.

Ne zaman kullanılır?

Kullanıcının belirli bir sayfaya gideceğinden gerçekten emin olduğunuzda. A sayfasını ziyaret edenlerin %70'inin B sayfasına gittiği bir "tüneliniz" varsa, o zaman <link rel= "prerender"> A sayfasındaki seçeneği B sayfasının çok hızlı görüntülenmesine yardımcı olacaktır.

aşırı kullanmayın. Ön işleme, bant genişliği ve bellek açısından son derece pahalıdır. Kullanmayın <link rel= "prerender"> birden fazla sayfa için.

Ayrıntılar

İsteğe bağlı etiket. Tarayıcının bu talimatı izlemesi gerekli değildir ve örneğin yavaş bir bağlantıda veya yeterli boş hafıza olmadığında bunu göz ardı edebilir.

Bellekten tasarruf etmek için Chrome tam oluşturma yapmıyorVe yalnızca NoState'i önceden yükle. Bu, Chrome'un sayfayı ve tüm kaynaklarını yüklediği ancak JavaScript'i oluşturmadığı veya yürütmediği anlamına gelir.

Firefox ve Safari bu etiketi hiçbir şekilde desteklemiyor. Tarayıcıların bu talimatı takip etmesi gerekmediğinden bu durum spesifikasyonu ihlal etmez; ama yine de üzgün. Uygulama hatası Firefox yedi yıldır açık. Safari'nin olduğuna dair raporlar var bu etiketi de desteklemiyor.

Özet

Kullanmak:

<link rel= "preload"> - birkaç saniye içinde bir kaynağa ihtiyacınız olduğunda
<link rel= "prefetch"> - sonraki sayfada kaynağa ihtiyacınız olduğunda
<link rel= "preconnect"> - yakında bir kaynağa ihtiyacınız olacağını bildiğiniz ancak tam URL'sini henüz bilmediğiniz zaman
<link rel= "dns-prefetch"> - benzer şekilde, yakında bir kaynağa ihtiyacınız olacağını bildiğiniz halde tam URL'sini henüz bilmediğiniz durumlarda (eski tarayıcılar için)
<link rel= "prerender"> — kullanıcıların belirli bir sayfaya gideceğinden emin olduğunuzda ve bu sayfanın görüntülenmesini hızlandırmak istediğinizde

Kaynak: habr.com

Ön yükleme, önceden getirme ve diğer etiketler

preload

sözdizimi

Ne zaman kullanılır?

Ayrıntılar

Önalım

sözdizimi

Ne zaman kullanılır?

Ayrıntılar

ön bağlantı

sözdizimi

Ne zaman kullanılır?

Ayrıntılar

dns-önceden getirme

sözdizimi

Ne zaman kullanılır?

Ayrıntılar

ön işleme

sözdizimi

Ne zaman kullanılır?

Ayrıntılar

Özet

Yorum ekle Cevabı iptal