ProHoster > Blog > İdarə > Əvvəlcədən yükləmə, əvvəlcədən gətirmə və digər teqlər

Əvvəlcədən yükləmə, əvvəlcədən gətirmə və digər teqlər

Yoxdur veb performansını yaxşılaşdırmaq üçün bir çox yol. Onlardan biri daha sonra lazım olacaq məzmunun əvvəlcədən yüklənməsidir. CSS-in əvvəlcədən işlənməsi, tam səhifənin əvvəlcədən göstərilməsi və ya domen adının həlli. Hər şeyi əvvəlcədən edirik və dərhal nəticəni göstəririk! Sərin səslənir.

Daha maraqlısı odur ki, o, çox sadə şəkildə həyata keçirilir. Beş etiket brauzerə ilkin hərəkətləri yerinə yetirmək üçün əmr verin:

<link rel="prefetch" href="/az/style.css" as="style" />
<link rel="preload" href="/az/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" />


Onların nə etdiyini və nə vaxt istifadə edəcəyini qısaca izah edək.

Keç: preload · əvvəlcədən hazırlamaq · əvvəlcədən qoşul · dns-prefetch · prerender

preload

<link rel= "preload"> brauzerə resursu (məsələn, skript və ya üslub cədvəli) mümkün qədər tez yükləməyi və keşləməsini bildirir. Bu, səhifə yükləndikdən bir neçə saniyə sonra resurs lazım olduqda faydalıdır - və siz prosesi sürətləndirmək istəyirsiniz.

Brauzer yükləndikdən sonra resursla heç nə etmir. Skriptlər icra edilmir, üslub cədvəlləri tətbiq edilmir. Resurs sadəcə olaraq keşlənir və sorğu ilə dərhal istifadəyə verilir.

sintaksis

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

href yükləmək istədiyiniz mənbəyə işarə edir.

as brauzerdə yüklənə bilən hər şey ola bilər:

  • style üslub vərəqləri üçün,
  • script skriptlər üçün,
  • font şriftlər üçün,
  • fetch istifadə edərək yüklənmiş resurslar üçün fetch() və ya XMLHttpRequest,
  • tam siyahıya baxın MDN-də.

Atributun müəyyənləşdirilməsi vacibdir as – bu, brauzerə yükləmələri düzgün prioritetləşdirməyə və planlaşdırmağa kömək edir.

Nə vaxt istifadə ediləcək

Resurs çox yaxın gələcəkdə lazım olduqda əvvəlcədən yükləmədən istifadə edin. Misal üçün:

  • Xarici fayldan qeyri-standart şriftlər: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Qiyabi comic-sans.woff2 yalnız endirdikdən və təhlil etdikdən sonra yükləməyə başlayacaq index.css. Bu qədər gözləməyin qarşısını almaq üçün şrifti daha əvvəl yükləyə bilərsiniz <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Stillərinizi yanaşmaya görə ayırsanız Kritik CSS kritik (dərhal göstərmək üçün) və kritik olmayan iki hissəyə bölünür: 
    <style>
/* Inlined critical styles */
</style>

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

    Bu yanaşma ilə qeyri-kritik üslublar yalnız JavaScript işləyərkən yüklənməyə başlayacaq və bu, göstərildikdən bir neçə saniyə sonra baş verə bilər. Gözləmək əvəzinə JS istifadə edin <link rel= "preload">daha əvvəl yükləməyə başlamaq üçün:

    <style>
/* Inlined critical styles */
</style>

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

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

Əvvəlcədən yükləmədən çox istifadə etməyin. Hər şeyi ard-arda yükləsəniz, sayt sehrli şəkildə sürətlənməyəcək, əksinə, brauzerin işini düzgün planlaşdırmasına mane olacaq.

Əvvəlcədən gətirmə ilə qarışdırılmamalıdır. İstifadə etməyin <link rel= "preload">, səhifə yükləndikdən dərhal sonra resursa ehtiyacınız yoxdursa. Daha sonra, məsələn, növbəti səhifə üçün ehtiyacınız varsa, istifadə edin <link rel= "prefetch">.

Ətraflı

Bu tələb olunan etiketdir bütün digər teqlərdən fərqli olaraq brauzer tərəfindən yerinə yetirilməlidir (əgər onu dəstəkləyirsə). əvvəlcədən yükləmə ilə bağlıdır. Brauzer göstərilən resursu yükləməlidir <link rel="preload">. Digər hallarda, məsələn, yavaş bir əlaqə ilə işləyirsə, əvvəlcədən yükləməyə məhəl qoymur.

Prioritetlər. Brauzerlər adətən ən vacib resursları ilk yükləmək üçün müxtəlif resurslara (üslublar, skriptlər, şriftlər və s.) müxtəlif prioritetlər təyin edirlər. Bu halda, brauzer prioriteti atributla müəyyən edir as. Chrome brauzeri üçün baxa bilərsiniz tam prioritet cədvəli.

Əvvəlcədən yükləmə, əvvəlcədən gətirmə və digər teqlər

əvvəlcədən hazırlamaq

<link rel= "prefetch"> brauzerdən fonda resursu (məsələn, skript və ya stil cədvəli) endirməyi və keş etməyi xahiş edir. Yükləmə aşağı prioritetdə baş verir, ona görə də daha vacib resurslara müdaxilə etmir. Bu, resurs növbəti səhifədə lazım olduqda və onu əvvəlcədən keşləmək istəsəniz faydalıdır.

Burada da brauzer yükləndikdən sonra resursla heç nə etmir. Skriptlər icra edilmir, üslub cədvəlləri tətbiq edilmir. Resurs sadəcə olaraq keşlənir və sorğu ilə dərhal istifadəyə verilir.

sintaksis

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

href yükləmək istədiyiniz mənbəyə işarə edir.

as brauzerdə yüklənə bilən hər şey ola bilər:

  • style üslub vərəqləri üçün,
  • script skriptlər üçün,
  • font şriftlər üçün,
  • fetch istifadə edərək yüklənmiş resurslar üçün fetch() və ya XMLHttpRequest,
  • tam siyahıya baxın MDN-də.

Atributun müəyyənləşdirilməsi vacibdir as - bu, brauzerə yükləmələri düzgün prioritetləşdirməyə və planlaşdırmağa kömək edir.

Nə vaxt istifadə ediləcək

Digər səhifələrdən resursları yükləmək üçün, başqa səhifədən resursa ehtiyacınız varsa və onu əvvəlcədən yükləmək istəyirsinizsə, həmin səhifənin göstərilməsini sürətləndirin. Misal üçün:

  • Sizin onlayn mağazanız var və istifadəçilərin 40%-i məhsul səhifəsi üçün ana səhifəni tərk edir. istifadə edin <link rel= "prefetch">, məhsul səhifələrini göstərmək üçün CSS və JS fayllarının yüklənməsi.
  • Tək səhifə tətbiqiniz var və müxtəlif səhifələr müxtəlif paketləri yükləyir. İstifadəçi bir səhifəyə daxil olduqda, onun keçid etdiyi bütün səhifələr üçün paketlər əvvəlcədən yüklənə bilər.

Çox güman ki, bu etiket istənilən dərəcədə etibarlı şəkildə istifadə edilə bilər.. Brauzerlər adətən qabaqcadan yüklənməni ən aşağı prioritetlə planlaşdırırlar, ona görə də bu, heç kimi narahat etmir. Sadəcə nəzərə alın ki, o, istifadəçi trafikini istehlak edir, bu da pula başa gələ bilər.

Təcili müraciətlər üçün deyil. İstifadə etməyin <link rel= "prefetch">, resursa bir neçə saniyə lazım olduqda. Bu vəziyyətdə istifadə edin <link rel= "preload">.

Ətraflı

Könüllü etiket. Brauzerdən bu təlimata əməl etmək tələb olunmur, o, məsələn, yavaş bir əlaqə zamanı ona məhəl qoymur.

Chrome-da prioritet. Chrome-da <link rel= "prefetch"> adətən minimum prioritetlə icra olunur (bax tam prioritet cədvəli), yəni hər şeyi yüklədikdən sonra.

əvvəlcədən qoşul

<link rel= "preconnect"> gələcəkdə əlaqənin qurulmasını sürətləndirmək istədiyiniz zaman brauzerdən domenə əvvəlcədən qoşulmağı xahiş edir.

Brauzer yeni üçüncü tərəf domenindən hər hansı resurs əldə edərsə, əlaqə yaratmalıdır. Məsələn, əgər o, Google Şriftlərini yükləyirsə, CDN-dən React şriftlərini yükləyirsə və ya API serverindən JSON cavabı tələb edirsə.

Yeni bir əlaqənin qurulması adətən bir neçə yüz millisaniyə çəkir. Bu bir dəfə edilir, lakin hələ də vaxt tələb edir. Əgər əvvəlcədən əlaqə yaratmısınızsa, vaxtınıza qənaət edəcək və bu domendən resursları daha tez endirəcəksiniz.

sintaksis

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

href IP ünvanını müəyyən etmək istədiyiniz domen adını göstərir. Prefikslə təyin edilə bilər (https://domain.com) və ya onsuz (//domain.com).

Nə vaxt istifadə ediləcək

Tezliklə lazım olacaq domenlər üçün istifadə edin oradan vacib bir üslub, skript və ya şəkil yükləmək üçün, lakin siz hələ resurs URL-ni bilmirsiniz. Misal üçün:

  • Tətbiqiniz hostinqdədir my-app.com və AJAX sorğuları edir api.my-app.com: Xüsusi sorğuları əvvəlcədən bilmirsiniz, çünki onlar JS-dən dinamik şəkildə hazırlanır. Burada domenə əvvəlcədən qoşulmaq üçün etiketdən istifadə etmək olduqca uyğundur.
  • Tətbiqiniz hostinqdədir my-app.com və Google Fonts istifadə edir. Onlar iki addımda endirilir: birincisi, CSS faylı domendən endirilir fonts.googleapis.com, sonra bu fayl şriftləri tələb edir fonts.gstatic.com. Hansı xüsusi şrift fayllarının olduğunu bilə bilməzsiniz fonts.gstatic.com CSS faylını yükləyənə qədər ehtiyacınız olacaq, ona görə də biz yalnız əvvəlcədən ilkin əlaqə yarada bilərik.

Bəzi üçüncü tərəf skriptini və ya üslubunu bir az sürətləndirmək üçün bu etiketdən istifadə edin əvvəlcədən qurulmuş əlaqə sayəsində.

Çox istifadə etməyin. Əlaqənin yaradılması və saxlanması həm müştəri, həm də server üçün bahalı əməliyyatdır. Bu etiketdən maksimum 4-6 domen üçün istifadə edin.

Ətraflı

Könüllü etiket. Brauzerdən bu təlimatı yerinə yetirmək tələb olunmur və məsələn, bir çox əlaqə artıq qurulubsa və ya başqa bir halda ona məhəl qoymur.

Bağlantı prosesinə nə daxildir?. Hər bir sayta qoşulmaq üçün brauzer aşağıdakıları etməlidir:

  • DNS həlli. Server IP ünvanını tapın (216.58.215.78) göstərilən domen adı üçün (google.com).
  • TCP əl sıxma. Server ilə TCP əlaqəsini başlatmaq üçün paketləri mübadilə edin (müştəri → server → müştəri).
  • TLS əl sıxma (yalnız HTTPS saytları). Təhlükəsiz TLS sessiyasına başlamaq üçün paket mübadiləsinin iki mərhələsi (müştəri → server → müştəri → server → müştəri).

Qeyd: HTTP/3 əl sıxma mexanizmini təkmilləşdirəcək və sürətləndirəcək, lakin bu hələ çox uzaqdadır.

dns-prefetch

<link rel= "dns-prefetch"> Əgər tezliklə ona qoşulacaqsınızsa və ilkin əlaqəni sürətləndirmək istəyirsinizsə, brauzerdən domen üçün DNS həllini əvvəlcədən yerinə yetirməsini xahiş edir.

Brauzer yeni üçüncü tərəf domenindən hər hansı resurs əldə edəcəksə, domenin IP ünvanını müəyyən etməlidir. Məsələn, Google Şriftlərinin yüklənməsi, CDN-dən React şriftlərinin yüklənməsi və ya API serverindən JSON cavabının tələb edilməsi.

Hər yeni domen üçün DNS qeydinin həlli adətən təxminən 20-120 ms çəkir. Bu, yalnız verilmiş domendən ilk resursun yüklənməsinə təsir edir, lakin yenə də gecikmə yaradır. DNS həllini əvvəlcədən yerinə yetirsək, vaxta qənaət edəcəyik və resursu daha sürətli yükləyərik.

sintaksis

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

href IP ünvanını təyin etmək istədiyiniz domen adını göstərir. Prefikslə təyin edilə bilər (https://domain.com) və ya onsuz (//domain.com).

Nə vaxt istifadə ediləcək

Tezliklə lazım olacaq domenlər üçün istifadə edin brauzerin əvvəlcədən bilmədiyi resursları oradan yükləmək. Misal üçün:

  • Tətbiqiniz hostinqdədir my-app.com və AJAX sorğuları edir api.my-app.com: Xüsusi sorğuları əvvəlcədən bilmirsiniz, çünki onlar JS-dən dinamik şəkildə hazırlanır. Burada domenə əvvəlcədən qoşulmaq üçün etiketdən istifadə etmək olduqca uyğundur.
  • Tətbiqiniz hostinqdədir my-app.com, və Google Fonts istifadə edir. Onlar iki addımda endirilir: birincisi, CSS faylı domendən endirilir fonts.googleapis.com, sonra bu fayl şriftləri tələb edir fonts.gstatic.com. Hansı xüsusi şrift fayllarının olduğunu bilə bilməzsiniz fonts.gstatic.com CSS faylını yükləyənə qədər sizə lazım olacaq, ona görə də biz yalnız əvvəlcədən ilkin əlaqə yarada bilərik.

Bəzi üçüncü tərəf skriptini və ya üslubunu bir az sürətləndirmək üçün bu etiketdən istifadə edin əvvəlcədən qurulmuş əlaqə sayəsində.

ilə oxşar xüsusiyyətləri qeyd edin <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Onları bir domen üçün birlikdə istifadə etməyin ümumiyyətlə mənası yoxdur: <link rel= "preconnect"> artıq daxildir <link rel= "dns-prefetch"/> və daha çox. Bunu iki halda əsaslandırmaq olar:

  • Köhnə brauzerləri dəstəkləmək istəyirsiniz?. <link rel= "dns-prefetch" /> tərəfindən dəstəklənir IE10 və Safari 5-dən bəri. <link rel= "preconnect"> Chrome və Firefox-da bir müddət dəstəkləndi, lakin yalnız 11.1 və Safari-də əlavə edildi IE/Edge-də hələ də dəstəklənmir. Bu brauzerləri dəstəkləmək lazımdırsa, istifadə edin <link rel= "dns-prefetch" /> üçün ehtiyat variant kimi <link rel= "preconnect">.
  • 4-6 domendən çox əlaqəni sürətləndirmək istəyirsiniz. Tag <link rel= "preconnect"> 4-6 domendən çox istifadə etmək tövsiyə edilmir, çünki əlaqə yaratmaq və saxlamaq bahalı əməliyyatdır. <link rel= "dns-prefetch" /> daha az resurs istehlak edir, ona görə də lazım olduqda istifadə edin.

Ətraflı

Könüllü etiket. Brauzerdən bu təlimata əməl etmək tələb olunmur, buna görə də, məsələn, səhifədə çoxlu belə etiketlər varsa və ya başqa bir halda DNS həllini yerinə yetirməyə bilər.

DNS nədir. İnternetdəki hər bir serverin özünəməxsus IP ünvanı var, ona bənzəyir 216.58.215.78. Saytın adı adətən brauzerin ünvan çubuğuna daxil edilir (məsələn, google.com) və DNS (Domain Name System) serverləri onu serverin IP ünvanı ilə uyğunlaşdırır (216.58.215.78).

IP ünvanını müəyyən etmək üçün brauzer DNS serverinə sorğu göndərməlidir. Yeni üçüncü tərəf domeninə qoşulduqda 20−120 ms çəkir.

Çox etibarlı olmasa da, DNS yaddaşda saxlanılır. Bəzi əməliyyat sistemləri və brauzerlər DNS sorğularını keşləyir: bu təkrar sorğulara vaxta qənaət edəcək, lakin keşləşdirməyə etibar etmək olmaz. Linux-da ümumiyyətlə işləmir. Chrome-da DNS önbelleği var, lakin o, yalnız bir dəqiqə davam edir. Windows beş gün ərzində DNS cavablarını keşləyir.

prerender

<link rel= "prerender"> brauzerdən URL-i yükləməyi və onu görünməz nişanda göstərməsini xahiş edir. İstifadəçi linkə kliklədikdə səhifə dərhal görünməlidir. Bu, istifadəçinin müəyyən bir səhifəyə baş çəkəcəyinə əminsinizsə və onun nümayişini sürətləndirmək istəsəniz faydalıdır.

Bu etiketin müstəsna effektivliyinə baxmayaraq (və ya ona görə), 2019-cu ildə <link rel= "prerender"> əsas brauzerlərdə zəif dəstəklənir. Ətraflı təfərrüata baxın. aşağıda.

sintaksis

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

href fonda göstərməyə başlamaq istədiyiniz URL-i göstərir.

Nə vaxt istifadə ediləcək

İstifadəçinin müəyyən bir səhifəyə keçəcəyinə həqiqətən əmin olduqda. Əgər A səhifəsinə gələnlərin 70%-nin B səhifəsinə keçdiyi “tunel”iniz varsa, o zaman <link rel= "prerender"> A səhifəsində B səhifəsini çox tez göstərməyə kömək edəcək.

Çox istifadə etməyin. Əvvəlcədən göstərmə bant genişliyi və yaddaş baxımından olduqca bahalıdır. İstifadə etməyin <link rel= "prerender"> birdən çox səhifə üçün.

Ətraflı

Könüllü etiket. Brauzerdən bu təlimata əməl etmək tələb olunmur və məsələn, yavaş bir əlaqə zamanı və ya kifayət qədər boş yaddaş olmadıqda, ona məhəl qoymur.

Yaddaş saxlamaq üçün Chrome tam render etmirVə yalnız NoState-i əvvəlcədən yükləyin. Bu o deməkdir ki, Chrome səhifəni və onun bütün resurslarını yükləyir, lakin JavaScript-i göstərmir və icra etmir.

Firefox və Safari bu teqi ümumiyyətlə dəstəkləmir. Bu, spesifikasiyanı pozmur, çünki brauzerlərdən bu təlimata əməl etmək tələb olunmur; amma yenə də kədərlidir. İcra səhvi Firefox yeddi ildir açıqdır. Safari ilə bağlı məlumatlar var bu etiketi də dəstəkləmir.

Xülasə

İstifadə edin:

  • <link rel= "preload"> - bir neçə saniyə ərzində resursa ehtiyacınız olduqda
  • <link rel= "prefetch"> - növbəti səhifədə resursa ehtiyacınız olduqda
  • <link rel= "preconnect"> - tezliklə resursa ehtiyacınız olacağını bildiyiniz zaman, lakin onun tam URL-sini hələ bilmirsiniz
  • <link rel= "dns-prefetch"> - eynilə, tezliklə resursa ehtiyacınız olacağını bildiyiniz zaman, lakin onun tam URL-sini hələ bilmirsinizsə (köhnə brauzerlər üçün)
  • <link rel= "prerender"> — istifadəçilərin müəyyən bir səhifəyə keçəcəyinə əmin olduqda və onun nümayişini sürətləndirmək istədiyiniz zaman

Mənbə: www.habr.com

Добавить комментарий