ProHoster > Blog > Ma'muriyat > Oldindan yuklash, oldindan yuklash va boshqa teglar

Oldindan yuklash, oldindan yuklash va boshqa teglar

bor veb ish faoliyatini yaxshilashning ko'plab usullari. Ulardan biri keyinroq kerak bo'ladigan tarkibni oldindan yuklashdir. CSS-ni oldindan qayta ishlash, to'liq sahifani oldindan ko'rsatish yoki domen nomini aniqlash. Biz hamma narsani oldindan qilamiz va natijani darhol ko'rsatamiz! Salqin eshitiladi.

Eng zo'r narsa shundaki, u juda sodda tarzda amalga oshiriladi. Beshta teg brauzerga dastlabki amallarni bajarish uchun buyruq bering:

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


Keling, ular nima qilishlarini va ulardan qachon foydalanishni qisqacha tushuntirib beraylik.

Oʻtish: preload · oldindan o'rnatish · oldindan ulanish · dns-prefetch · oldindan ko'rsatish

preload

<link rel= "preload"> brauzerga resursni (masalan, skript yoki uslublar jadvali) imkon qadar tezroq yuklash va keshlash kerakligini aytadi. Bu sahifa yuklangandan keyin bir necha soniyadan keyin resurs kerak bo'lganda foydali bo'ladi - va siz jarayonni tezlashtirishni xohlaysiz.

Brauzer yuklangandan so'ng resurs bilan hech narsa qilmaydi. Skriptlar bajarilmaydi, uslublar jadvallari qo'llanilmaydi. Resurs oddiygina keshlanadi va so'rov bo'yicha darhol taqdim etiladi.

sintaktik

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

href yuklab olmoqchi bo'lgan manbaga ishora qiladi.

as brauzerda yuklab olinadigan har qanday narsa bo'lishi mumkin:

  • style uslublar jadvallari uchun,
  • script skriptlar uchun,
  • font shriftlar uchun,
  • fetch yordamida yuklangan resurslar uchun fetch() yoki XMLHttpRequest,
  • toʻliq roʻyxatini koʻring MDN da.

Atributni belgilash muhimdir as – bu brauzerga yuklamalarni to‘g‘ri belgilash va rejalashtirishga yordam beradi.

Qachon foydalanish kerak

Resurs juda yaqin kelajakda kerak bo'lganda, oldindan yuklashdan foydalaning. Masalan:

  • Tashqi fayldan nostandart shriftlar: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    sukut comic-sans.woff2 faqat yuklab olish va tahlil qilishdan keyin yuklashni boshlaydi index.css. Uzoq kutmaslik uchun shriftni avvalroq yuklab olishingiz mumkin <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Agar siz uslublaringizni yondashuvga ko'ra ajratsangiz Kritik CSS kritik (darhol ko'rsatish uchun) va tanqidiy bo'lmagan ikki qismga bo'linadi: 
    <style>
/* Inlined critical styles */
</style>

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

    Ushbu yondashuv bilan tanqidiy bo'lmagan uslublar faqat JavaScript ishga tushganda yuklashni boshlaydi, bu renderdan keyin bir necha soniya o'tgach sodir bo'lishi mumkin. Kutish o'rniga JS dan foydalaning <link rel= "preload">avvalroq yuklab olishni boshlash uchun:

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

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

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

Oldindan yuklashdan ortiqcha foydalanmang. Agar siz hamma narsani ketma-ket yuklasangiz, sayt sehrli tarzda tezlashmaydi, aksincha, brauzer o'z ishini to'g'ri rejalashtirishga to'sqinlik qiladi.

Oldindan yuklash bilan adashtirmaslik kerak. foydalanmang <link rel= "preload">, agar sizga sahifa yuklangandan so'ng darhol resurs kerak bo'lmasa. Agar sizga keyinroq kerak bo'lsa, masalan, keyingi sahifa uchun, keyin foydalaning <link rel= "prefetch">.

details

Bu talab qilinadigan teg boshqa barcha teglardan farqli o'laroq, brauzer tomonidan bajarilishi kerak (agar u uni qo'llab-quvvatlasa). oldindan yuklash bilan bog'liq. Brauzer ko'rsatilgan manbani yuklab olishi kerak <link rel="preload">. Boshqa hollarda, u sekin ulanishda ishlayotgan bo'lsa, oldindan yuklashni e'tiborsiz qoldirishi mumkin.

Afzalliklar. Brauzerlar birinchi navbatda eng muhim resurslarni yuklash uchun turli resurslarga (uslublar, skriptlar, shriftlar va boshqalar) turli ustuvorliklarni belgilaydilar. Bunday holda, brauzer atribut bo'yicha ustuvorlikni belgilaydi as. Chrome brauzeri uchun siz qarashingiz mumkin to'liq ustuvorlik jadvali.

Oldindan yuklash, oldindan yuklash va boshqa teglar

oldindan o'rnatish

<link rel= "prefetch"> brauzerdan manbani (masalan, skript yoki uslublar jadvali) fonda yuklab olish va keshlashni so'raydi. Yuklash past ustuvorlikda amalga oshiriladi, shuning uchun u muhimroq manbalarga xalaqit bermaydi. Resurs keyingi sahifada kerak bo'lsa va siz uni oldindan keshlashni istasangiz foydali bo'ladi.

Bu erda ham brauzer yuklangandan so'ng resurs bilan hech narsa qilmaydi. Skriptlar bajarilmaydi, uslublar jadvallari qo'llanilmaydi. Resurs oddiygina keshlanadi va so'rov bo'yicha darhol taqdim etiladi.

sintaktik

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

href yuklab olmoqchi bo'lgan manbaga ishora qiladi.

as brauzerda yuklab olinadigan har qanday narsa bo'lishi mumkin:

  • style uslublar jadvallari uchun,
  • script skriptlar uchun,
  • font shriftlar uchun,
  • fetch yordamida yuklangan resurslar uchun fetch() yoki XMLHttpRequest,
  • toʻliq roʻyxatini koʻring MDN da.

Atributni belgilash muhimdir as - bu brauzerga yuklab olishni to'g'ri belgilash va rejalashtirishga yordam beradi.

Qachon foydalanish kerak

Boshqa sahifalardan resurslarni yuklash uchun, agar sizga boshqa sahifadan resurs kerak bo'lsa va uni oldindan yuklamoqchi bo'lsangiz, keyin ushbu sahifani ko'rsatishni tezlashtirmoqchi bo'lsangiz. Masalan:

  • Sizda onlayn do'kon bor va foydalanuvchilarning 40% mahsulot sahifasi uchun bosh sahifani tark etadi. Foydalanish <link rel= "prefetch">, mahsulot sahifalarini ko'rsatish uchun CSS va JS fayllarini yuklash.
  • Sizda bitta sahifali ilova bor va turli sahifalar turli paketlarni yuklaydi. Foydalanuvchi sahifaga tashrif buyurganida, u bog'langan barcha sahifalar uchun paketlar oldindan yuklanishi mumkin.

Ehtimol, bu tegdan istalgan darajada xavfsiz foydalanish mumkin.. Brauzerlar odatda eng past ustuvorlik bilan oldindan yuklashni rejalashtiradilar, shuning uchun bu hech kimni bezovta qilmaydi. Shuni yodda tutingki, u foydalanuvchi trafigini iste'mol qiladi, bu esa pul sarflashi mumkin.

Shoshilinch so'rovlar uchun emas. foydalanmang <link rel= "prefetch">, resurs bir necha soniya ichida kerak bo'lganda. Bunday holda, foydalaning <link rel= "preload">.

details

Ixtiyoriy teg. Brauzerdan ushbu ko'rsatmalarga rioya qilish shart emas, u, masalan, sekin ulanishda uni e'tiborsiz qoldirishi mumkin.

Chrome-da ustuvorlik. Chrome'da <link rel= "prefetch"> odatda minimal ustuvorlik bilan amalga oshiriladi (qarang to'liq ustuvorlik jadvali), ya'ni qolgan hamma narsani yuklagandan keyin.

oldindan ulanish

<link rel= "preconnect"> kelajakda ulanishni o'rnatishni tezlashtirishni xohlasangiz, brauzerdan domenga oldindan ulanishni so'raydi.

Brauzer yangi uchinchi tomon domenidan har qanday resurslarni oladigan bo'lsa, ulanishni o'rnatishi kerak. Masalan, agar u Google Shriftlarini yuklasa, CDN dan React shriftlarini yuklasa yoki API serveridan JSON javobini so'rasa.

Yangi ulanishni o'rnatish odatda bir necha yuz millisekundni oladi. Bu bir marta amalga oshiriladi, lekin baribir vaqt talab etadi. Agar ulanishni oldindan o'rnatgan bo'lsangiz, vaqtni tejaysiz va ushbu domendan resurslarni tezroq yuklab olasiz.

sintaktik

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

href IP manzilini aniqlamoqchi bo'lgan domen nomini ko'rsatadi. Prefiks bilan belgilanishi mumkin (https://domain.com) yoki usiz (//domain.com).

Qachon foydalanish kerak

Tez orada kerak bo'ladigan domenlar uchun foydalaning u yerdan muhim uslub, skript yoki rasmni yuklab olish uchun, lekin siz hali manba URL manzilini bilmaysiz. Masalan:

  • Ilovangiz hostingda my-app.com va AJAX so'rovlarini amalga oshiradi api.my-app.com: Muayyan so'rovlarni oldindan bilmaysiz, chunki ular JS dan dinamik tarzda yaratilgan. Bu erda domenga oldindan ulanish uchun tegdan foydalanish juda mos keladi.
  • Ilovangiz hostingda my-app.com va Google Shriftlardan foydalanadi. Ular ikki bosqichda yuklab olinadi: birinchidan, CSS fayli domendan yuklab olinadi fonts.googleapis.com, keyin bu fayl shriftlarni so'raydi fonts.gstatic.com. Siz qaysi maxsus shrift fayllari ekanligini bila olmaysiz fonts.gstatic.com CSS faylini yuklamaguningizcha kerak bo'ladi, shuning uchun biz faqat oldindan ulanishni amalga oshirishimiz mumkin.

Uchinchi tomon skriptini yoki uslublarini biroz tezlashtirish uchun ushbu tegdan foydalaning oldindan o'rnatilgan aloqa tufayli.

Ortiqcha ishlatmang. Ulanishni o'rnatish va qo'llab-quvvatlash mijoz uchun ham, server uchun ham qimmat operatsiya hisoblanadi. Ushbu tegdan maksimal 4-6 domen uchun foydalaning.

details

Ixtiyoriy teg. Brauzerdan ushbu ko'rsatmalarga rioya qilish shart emas va masalan, ko'plab ulanishlar allaqachon o'rnatilgan bo'lsa yoki boshqa holatda, uni e'tiborsiz qoldirishi mumkin.

Ulanish jarayoni nimani o'z ichiga oladi?. Har bir saytga ulanish uchun brauzer quyidagilarni bajarishi kerak:

  • DNS ruxsati. Server IP manzilini toping (216.58.215.78) belgilangan domen nomi uchun (google.com).
  • TCP qo'l siqish. Server bilan TCP ulanishini boshlash uchun paketlarni almashtiring (mijoz → server → mijoz).
  • TLS suhbati (faqat HTTPS saytlari). Xavfsiz TLS seansini boshlash uchun paket almashinuvining ikki bosqichi (mijoz → server → mijoz → server → mijoz).

Eslatma: HTTP/3 qo'l siqish mexanizmini yaxshilaydi va tezlashtiradi, lekin bu hali uzoq yo'l.

dns-prefetch

<link rel= "dns-prefetch"> Agar siz tez orada unga ulansangiz va dastlabki ulanishni tezlamoqchi bo'lsangiz, brauzerdan domen uchun DNS rezolyutsiyasini oldindan bajarishni so'raydi.

Brauzer yangi uchinchi tomon domenidan biron-bir resurslarni oladigan bo'lsa, domenning IP manzilini aniqlashi kerak. Masalan, Google shriftlarini yuklash, CDN dan React shriftlarini yuklash yoki API serveridan JSON javobini so'rash.

Har bir yangi domen uchun DNS yozuvining ruxsati odatda 20-120 ms ni oladi. Bu faqat ma'lum bir domendan birinchi resursning yuklanishiga ta'sir qiladi, lekin baribir kechikishni keltirib chiqaradi. Agar biz DNS rezolyutsiyasini oldindan amalga oshirsak, biz vaqtni tejaymiz va resursni tezroq yuklaymiz.

sintaktik

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

href IP manzilini o'rnatmoqchi bo'lgan domen nomini ko'rsatadi. Prefiks bilan belgilanishi mumkin (https://domain.com) yoki usiz (//domain.com).

Qachon foydalanish kerak

Tez orada kerak bo'ladigan domenlar uchun foydalaning u yerdan brauzer oldindan bilmagan resurslarni yuklab olish uchun. Masalan:

  • Ilovangiz hostingda my-app.com va AJAX so'rovlarini amalga oshiradi api.my-app.com: Muayyan so'rovlarni oldindan bilmaysiz, chunki ular JS dan dinamik tarzda yaratilgan. Bu erda domenga oldindan ulanish uchun tegdan foydalanish juda mos keladi.
  • Ilovangiz hostingda my-app.com, va Google Shriftlardan foydalanadi. Ular ikki bosqichda yuklab olinadi: birinchidan, CSS fayli domendan yuklab olinadi fonts.googleapis.com, keyin bu fayl shriftlarni so'raydi fonts.gstatic.com. Siz qaysi maxsus shrift fayllari ekanligini bila olmaysiz fonts.gstatic.com CSS faylini yuklamaguningizcha sizga kerak bo'ladi, shuning uchun biz faqat oldindan ulanishni amalga oshirishimiz mumkin.

Uchinchi tomon skriptini yoki uslublarini biroz tezlashtirish uchun ushbu tegdan foydalaning oldindan o'rnatilgan aloqa tufayli.

Iltimos, shunga o'xshash xususiyatlarga e'tibor bering <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Odatda bitta domen uchun ularni birgalikda ishlatish mantiqiy emas: <link rel= "preconnect"> allaqachon o'z ichiga oladi <link rel= "dns-prefetch"/> va boshqalar. Buni ikki holatda oqlash mumkin:

  • Eski brauzerlarni qo'llab-quvvatlamoqchimisiz?. <link rel= "dns-prefetch" /> tomonidan qo'llab -quvvatlanadi IE10 va Safari 5 dan beri. <link rel= "preconnect"> Chrome va Firefox-da bir muncha vaqt qo'llab-quvvatlangan, ammo faqat 11.1 va Safari-ga qo'shilgan IE/Edge-da hali ham qo'llab-quvvatlanmaydi. Agar siz ushbu brauzerlarni qo'llab-quvvatlashingiz kerak bo'lsa, foydalaning <link rel= "dns-prefetch" /> uchun zaxira variant sifatida <link rel= "preconnect">.
  • Siz 4-6 dan ortiq domenlarga ulanishni tezlashtirishni xohlaysiz. teg <link rel= "preconnect"> 4-6 domendan ortiq foydalanish tavsiya etilmaydi, chunki ulanishni o'rnatish va qo'llab-quvvatlash qimmat operatsiya hisoblanadi. <link rel= "dns-prefetch" /> resurslarni kamroq iste'mol qiladi, shuning uchun kerak bo'lganda foydalaning.

details

Ixtiyoriy teg. Brauzerdan ushbu ko'rsatmalarga rioya qilish shart emas, shuning uchun u DNS ruxsatini bajara olmasligi mumkin, masalan, sahifada bunday teglar ko'p bo'lsa yoki boshqa holatlarda.

DNS nima. Internetdagi har bir server o'ziga xos IP-manzilga ega bo'lib, u o'xshaydi 216.58.215.78. Sayt nomi odatda brauzerning manzil satriga kiritiladi (masalan, google.com) va DNS (domen nomlari tizimi) serverlari uni serverning IP manziliga (216.58.215.78).

IP-manzilni aniqlash uchun brauzer DNS-serverni so'rashi kerak. Yangi uchinchi tomon domeniga ulanishda 20−120 ms vaqt ketadi.

DNS keshlangan, ammo unchalik ishonchli emas. Ba'zi operatsion tizimlar va brauzerlar DNS so'rovlarini keshlaydi: bu takroriy so'rovlar uchun vaqtni tejaydi, ammo keshlashga tayanib bo'lmaydi. Linuxda u odatda umuman ishlamaydi. Chrome'da DNS keshi bor, lekin u faqat bir daqiqa davom etadi. Windows DNS javoblarini besh kun davomida keshlaydi.

oldindan ko'rsatish

<link rel= "prerender"> brauzerdan URL manzilini yuklab olishni va uni ko'rinmas yorliqda ko'rsatishni so'raydi. Foydalanuvchi havolani bosganida, sahifa darhol ko'rsatilishi kerak. Agar foydalanuvchi ma'lum bir sahifaga tashrif buyurishiga ishonchingiz komil bo'lsa va uni ko'rsatishni tezlashtirishni xohlasangiz foydali bo'ladi.

Ushbu tegning ajoyib samaradorligiga qaramay (yoki tufayli), 2019 yilda <link rel= "prerender"> asosiy brauzerlarda kam qo'llab-quvvatlanadi. Batafsil ma'lumotni ko'ring. quyida ko'rsatilgan.

sintaktik

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

href fonda koʻrsatishni boshlamoqchi boʻlgan URL manziliga ishora qiladi.

Qachon foydalanish kerak

Agar foydalanuvchi ma'lum bir sahifaga o'tishiga ishonchingiz komil bo'lsa. Agar sizda "tunnel" bo'lsa, u orqali A sahifasiga tashrif buyuruvchilarning 70% B sahifasiga o'tadi <link rel= "prerender"> A sahifasida B sahifani juda tez ko'rsatishga yordam beradi.

Ortiqcha ishlatmang. Oldindan renderlash tarmoqli kengligi va xotira jihatidan juda qimmat. foydalanmang <link rel= "prerender"> birdan ortiq sahifa uchun.

details

Ixtiyoriy teg. Brauzerdan ushbu ko'rsatmalarga rioya qilish shart emas va masalan, sekin ulanishda yoki bo'sh xotira etarli bo'lmaganda, uni e'tiborsiz qoldirishi mumkin.

Xotirani saqlash uchun Chrome to'liq ko'rsatmaydiva faqat NoState-ni oldindan yuklang. Bu shuni anglatadiki, Chrome sahifani va uning barcha resurslarini yuklaydi, lekin JavaScript-ni ko'rsatmaydi yoki bajarmaydi.

Firefox va Safari bu tegni umuman qo'llab-quvvatlamaydi. Bu spetsifikatsiyani buzmaydi, chunki brauzerlar ushbu ko'rsatmalarga amal qilishlari shart emas; lekin hali ham achinarli. Amalga oshirish xatosi Firefox yetti yildan beri ochiq. Safari haqida xabarlar bor bu tegni ham qo'llab-quvvatlamaydi.

Xulosa

Foydalanish:

  • <link rel= "preload"> - bir necha soniya ichida resurs kerak bo'lganda
  • <link rel= "prefetch"> - keyingi sahifada resurs kerak bo'lganda
  • <link rel= "preconnect"> - tez orada sizga resurs kerak bo'lishini bilsangiz, lekin uning to'liq URL manzilini hali bilmasangiz
  • <link rel= "dns-prefetch"> - xuddi shunday, agar siz tez orada resurs kerak bo'lishini bilsangiz, lekin uning to'liq URL manzilini hali bilmasangiz (eski brauzerlar uchun)
  • <link rel= "prerender"> — foydalanuvchilar ma'lum bir sahifaga o'tishlariga ishonchingiz komil bo'lganda va uni ko'rsatishni tezlashtirmoqchi bo'lsangiz

Manba: www.habr.com

a Izoh qo'shish