ProHoster > Блог > Захиргаа > Урьдчилан ачаалах, урьдчилан татах болон бусад шошго

Урьдчилан ачаалах, урьдчилан татах болон бусад шошго

Байдаг вэбийн гүйцэтгэлийг сайжруулах олон арга зам. Тэдний нэг нь дараа нь хэрэгтэй контентыг урьдчилан ачаалах явдал юм. CSS-ийн урьдчилсан боловсруулалт, бүтэн хуудасны урьдчилсан дүрслэл эсвэл домэйн нэрийг шийдвэрлэх. Бид бүх зүйлийг урьдчилан хийж, дараа нь үр дүнг шууд харуулна! Сайхан сонсогдож байна.

Хамгийн гайхалтай нь үүнийг маш энгийнээр хэрэгжүүлсэн явдал юм. Таван шошго Хөтөч рүү урьдчилсан үйлдлийг гүйцэтгэх команд өгнө:

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


Тэд юу хийдэг, хэзээ ашиглах талаар товч тайлбарлая.

Дараах руу очих: preload · урьдчилан тохируулах · урьдчилан холбох · dns-prefetch · урьдчилан дүрслэх

preload

<link rel= "preload"> Хөтөч нь нөөцийг (скрипт эсвэл загварын хуудас гэх мэт) аль болох хурдан ачаалж, кэш хийхийг хэлдэг. Хуудсыг ачаалсны дараа хэдхэн секундын дараа нөөц шаардлагатай үед энэ нь ашигтай бөгөөд та үйл явцыг хурдасгахыг хүсч байна.

Хөтөч ачаалсны дараа нөөцтэй юу ч хийхгүй. Скриптүүд ажиллаагүй, загварын хүснэгтүүд ашиглагдаагүй. Нөөцийг зүгээр л кэш болгож, хүсэлтийн дагуу шууд ашиглах боломжтой.

синтакс

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

href татаж авахыг хүссэн эх сурвалж руугаа зааж өгнө.

as Хөтөч дээр татаж авч болох бүх зүйл байж болно:

  • style загварын хуудасны хувьд,
  • script скриптүүдийн хувьд,
  • font фонтын хувьд,
  • fetch ашиглан ачаалагдсан нөөцийн хувьд fetch() буюу XMLHttpRequest,
  • бүрэн жагсаалтыг үзнэ үү MDN дээр.

Энэ шинж чанарыг тодорхойлох нь чухал юм as – энэ нь хөтчид татаж авахыг зөв эрэмбэлэх, төлөвлөхөд тусалдаг.

Хэзээ хэрэглэх вэ

Ойрын ирээдүйд нөөц шаардлагатай үед урьдчилан ачаалах аргыг ашигла. Жишээлбэл:

  • Гадны файлын стандарт бус фонтууд: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    анхдагчаар comic-sans.woff2 Татаж аваад задлан шинжилсний дараа л ачаалж эхэлнэ index.css. Удаан хүлээхээс зайлсхийхийн тулд фонтыг өмнө нь татаж авах боломжтой <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Хэрэв та өөрийн хэв маягийг арга барилаар нь салгавал Чухал CSS чухал (нэн даруй үзүүлэх) ба чухал биш гэсэн хоёр хэсэгт хуваагдана: 
    <style>
/* Inlined critical styles */
</style>

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

    Энэ аргын тусламжтайгаар чухал бус хэв маяг нь зөвхөн JavaScript ажиллаж байх үед ачаалагдаж эхлэх бөгөөд энэ нь дүрслэснээс хойш хэдхэн секундын дараа тохиолдож болно. Хүлээхийн оронд JS ашиглана уу <link rel= "preload">эрт татаж эхлэхийн тулд:

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

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

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

Урьдчилан ачааллыг бүү хэтрүүл. Хэрэв та бүх зүйлийг дараалан ачаалвал сайт ид шидийн хурдацтай ажиллахгүй, харин эсрэгээр энэ нь хөтчийг ажлаа зөв төлөвлөхөд саад болно.

Урьдчилан татахтай андуурч болохгүй. Хэрэглэж болохгүй <link rel= "preload">, хэрэв танд хуудас ачаалагдсаны дараа шууд нөөц хэрэггүй бол. Хэрэв танд дараа нь, жишээлбэл, дараагийн хуудсанд хэрэгтэй бол хэрэглээрэй <link rel= "prefetch">.

Дэлгэрэнгүй мэдээллийг харах

Энэ бол шаардлагатай шошго юм бусад бүх шошгуудаас ялгаатай нь хөтчөөр (хэрэв үүнийг дэмждэг бол) гүйцэтгэнэ урьдчилан ачаалахтай холбоотой. Хөтөч нь заасан нөөцийг татаж авах ёстой <link rel="preload">. Бусад тохиолдолд, жишээлбэл, удаан холболтоор ажиллаж байгаа бол урьдчилан ачааллыг үл тоомсорлож болно.

Тэргүүлэх чиглэлүүд. Хөтчүүд ихэвчлэн хамгийн чухал нөөцүүдийг ачаалахын тулд өөр өөр нөөцөд (загвар, скрипт, фонт гэх мэт) өөр өөр ач холбогдол өгдөг. Энэ тохиолдолд хөтөч шинж чанараар тэргүүлэх ач холбогдлыг тодорхойлдог as. Chrome хөтчийн хувьд та харж болно бүрэн тэргүүлэх хүснэгт.

Урьдчилан ачаалах, урьдчилан татах болон бусад шошго

урьдчилан тохируулах

<link rel= "prefetch"> хөтчөөс нөөцийг (скрипт эсвэл загварын хуудас гэх мэт) арын дэвсгэр дээр татаж аваад кэш хийхийг хүсдэг. Ачаалал нь бага ач холбогдолтой тул илүү чухал нөөцөд саад болохгүй. Энэ нь дараагийн хуудсанд нөөц шаардлагатай бөгөөд та үүнийг урьдчилан кэш хийхийг хүсч байвал хэрэг болно.

Энд бас хөтөч ачаалсны дараа нөөцтэй юу ч хийхгүй. Скриптүүд ажиллаагүй, загварын хүснэгтүүд ашиглагдаагүй. Нөөцийг зүгээр л кэш болгож, хүсэлтийн дагуу шууд ашиглах боломжтой.

синтакс

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

href татаж авахыг хүссэн эх сурвалж руугаа зааж өгнө.

as Хөтөч дээр татаж авч болох бүх зүйл байж болно:

  • style загварын хуудасны хувьд,
  • script скриптүүдийн хувьд,
  • font фонтын хувьд,
  • fetch ашиглан ачаалагдсан нөөцийн хувьд fetch() буюу XMLHttpRequest,
  • бүрэн жагсаалтыг үзнэ үү MDN дээр.

Энэ шинж чанарыг тодорхойлох нь чухал юм as - энэ нь хөтчид татаж авахыг зөв эрэмбэлэх, төлөвлөхөд тусалдаг.

Хэзээ хэрэглэх вэ

Бусад хуудаснаас нөөцийг ачаалах, хэрэв танд өөр хуудаснаас эх сурвалж хэрэгтэй бол түүнийг урьдчилан ачаалахыг хүсвэл тухайн хуудасны дүрслэлийг хурдасгах болно. Жишээлбэл:

  • Та онлайн дэлгүүртэй бөгөөд хэрэглэгчдийн 40% нь бүтээгдэхүүний хуудасны нүүр хуудаснаас гардаг. Ашиглах <link rel= "prefetch">, бүтээгдэхүүний хуудсыг үзүүлэхийн тулд CSS болон JS файлуудыг ачаалж байна.
  • Та нэг хуудасны програмтай бөгөөд өөр өөр хуудаснууд өөр өөр багцуудыг ачаалдаг. Хэрэглэгч тухайн хуудсанд зочлох үед түүний холбосон бүх хуудасны багцыг урьдчилан ачаалах боломжтой.

Энэ шошгыг ямар ч хэмжээгээр аюулгүй ашиглах боломжтой байх магадлалтай.. Хөтөчүүд ихэвчлэн хамгийн бага ач холбогдол бүхий урьдчилан ачаалах хуваарь гаргадаг тул энэ нь хэнд ч төвөг учруулахгүй. Энэ нь хэрэглэгчийн урсгалыг зарцуулдаг бөгөөд энэ нь мөнгө зарцуулдаг гэдгийг санаарай.

Яаралтай хүсэлт гаргахгүй. Хэрэглэж болохгүй <link rel= "prefetch">, нөөц хэдхэн секундын дотор шаардлагатай үед. Энэ тохиолдолд хэрэглэнэ <link rel= "preload">.

Дэлгэрэнгүй мэдээллийг харах

Нэмэлт шошго. Хөтөч нь энэ зааврыг дагаж мөрдөх шаардлагагүй бөгөөд жишээлбэл, удаан холболттой үед үүнийг үл тоомсорлож болно.

Chrome дахь тэргүүлэх чиглэл. Chrome дээр <link rel= "prefetch"> ихэвчлэн хамгийн бага давуу эрхтэйгээр гүйцэтгэдэг (харна уу бүрэн тэргүүлэх хүснэгт), өөрөөр хэлбэл бусад бүх зүйлийг ачаалсны дараа.

урьдчилан холбох

<link rel= "preconnect"> Ирээдүйд холболтын тохиргоог хурдасгахыг хүсвэл хөтөчөөс домэйн руу урьдчилан холбогдохыг хүсэх.

Хөтөч нь шинэ гуравдагч этгээдийн домэйноос ямар нэгэн эх сурвалжийг татаж авах тохиолдолд холболт үүсгэх ёстой. Жишээлбэл, хэрэв энэ нь Google Fonts, CDN-ээс React фонтуудыг ачаалах эсвэл API серверээс JSON-ийн хариулт авах хүсэлт гаргах юм бол.

Шинэ холболт үүсгэх нь ихэвчлэн хэдэн зуун миллисекунд болдог. Энэ нь нэг удаа хийгддэг боловч цаг хугацаа шаарддаг. Хэрэв та урьдчилан холболт үүсгэсэн бол цаг хугацаа хэмнэж, энэ домэйноос нөөцийг хурдан татаж авах болно.

синтакс

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

href IP хаягийг тодорхойлохыг хүссэн домэйн нэрийг заана. Угтвараар зааж өгч болно (https://domain.com) эсвэл түүнгүйгээр (//domain.com).

Хэзээ хэрэглэх вэ

Удахгүй хэрэг болох домайнуудад ашиглаарай тэндээс чухал хэв маяг, скрипт эсвэл зургийг татаж авах боломжтой, гэхдээ та нөөцийн URL-г хараахан мэдэхгүй байна. Жишээлбэл:

  • Таны програмыг байршуулсан байна my-app.com болон AJAX хүсэлт гаргадаг api.my-app.com: Эдгээр асуулга нь JS-ээс динамик байдлаар хийгдсэн тул та тэдгээрийг урьдчилан мэдэхгүй байна. Энд домэйнд урьдчилан холбогдохын тулд шошгыг ашиглах нь маш тохиромжтой.
  • Таны програмыг байршуулсан байна my-app.com мөн Google Fonts ашигладаг. Тэдгээрийг хоёр үе шаттайгаар татаж авдаг: эхлээд CSS файлыг домэйноос татаж авдаг fonts.googleapis.com, дараа нь энэ файл нь фонтыг хүсэх болно fonts.gstatic.com. Та ямар фонтын файлаас гаралтайг мэдэх боломжгүй fonts.gstatic.com CSS файлыг ачаалах хүртэл танд хэрэгтэй тул бид зөвхөн урьдчилсан холболтыг хийх боломжтой.

Гуравдагч талын скрипт эсвэл хэв маягийг бага зэрэг хурдасгахын тулд энэ шошгыг ашиглана уу Урьдчилан тогтоосон холболтын улмаас.

Хэтрүүлэн хэрэглэж болохгүй. Холболтыг бий болгох, хадгалах нь үйлчлүүлэгч болон серверийн аль алинд нь үнэтэй ажиллагаа юм. Энэ шошгыг дээд тал нь 4-6 домэйнд ашиглаарай.

Дэлгэрэнгүй мэдээллийг харах

Нэмэлт шошго. Хөтөч нь энэ зааврыг дагаж мөрдөх шаардлагагүй бөгөөд жишээлбэл, олон холболт аль хэдийн бий болсон эсвэл бусад тохиолдолд үүнийг үл тоомсорлож болно.

Холболтын үйл явцад юу багтдаг вэ?. Сайт бүртэй холбогдохын тулд хөтөч дараахь зүйлийг хийх ёстой.

  • DNS нарийвчлал. Серверийн IP хаягийг олох (216.58.215.78) заасан домэйн нэрэнд (google.com).
  • TCP гар барих. Сервертэй TCP холболтыг эхлүүлэхийн тулд пакетуудыг (үйлчлүүлэгч → сервер → үйлчлүүлэгч) солилцох.
  • TLS гар барих (зөвхөн HTTPS сайтууд). Аюулгүй TLS сессийг эхлүүлэхийн тулд багц солилцооны хоёр үе шат (клиент → сервер → клиент → сервер → үйлчлүүлэгч).

Анхаарна уу: HTTP/3 гар барих механизмыг сайжруулж, хурдасгах болно, гэхдээ энэ нь хол байна.

dns-prefetch

<link rel= "dns-prefetch"> Хэрэв та удахгүй холбогдох гэж байгаа бөгөөд анхны холболтыг хурдасгахыг хүсвэл хөтөчөөс домэйны DNS нарийвчлалыг урьдчилан хийхийг хүсч байна.

Хөтөч нь шинэ гуравдагч этгээдийн домэйноос ямар нэгэн эх сурвалж авах бол домэйны IP хаягийг тодорхойлох ёстой. Жишээлбэл, Google Fonts, CDN-ээс React фонтуудыг ачаалах эсвэл API серверээс JSON-ийн хариуг хүсэх.

Шинэ домэйн бүрийн хувьд DNS бичлэгийн нягтрал нь ихэвчлэн 20-120 мс болдог. Энэ нь зөвхөн өгөгдсөн домэйноос эхний нөөцийг ачаалахад нөлөөлөх боловч саатал үүсгэсээр байна. Хэрэв бид DNS нарийвчлалыг урьдчилан хийвэл цаг хэмнэж, нөөцийг хурдан ачаалах болно.

синтакс

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

href IP хаягийг тохируулахыг хүссэн домэйн нэрийг заана. Угтвараар зааж өгч болно (https://domain.com) эсвэл түүнгүйгээр (//domain.com).

Хэзээ хэрэглэх вэ

Удахгүй хэрэг болох домайнуудад ашиглаарай Хөтөч урьдчилан мэдэхгүй байгаа нөөцийг тэндээс татаж авах. Жишээлбэл:

  • Таны програмыг байршуулсан байна my-app.com болон AJAX хүсэлт гаргадаг api.my-app.com: Эдгээр асуулга нь JS-ээс динамик байдлаар хийгдсэн тул та тэдгээрийг урьдчилан мэдэхгүй байна. Энд домэйнд урьдчилан холбогдохын тулд шошгыг ашиглах нь маш тохиромжтой.
  • Таны програмыг байршуулсан байна my-app.com, мөн Google Fonts ашигладаг. Тэдгээрийг хоёр үе шаттайгаар татаж авдаг: эхлээд CSS файлыг домэйноос татаж авдаг fonts.googleapis.com, дараа нь энэ файл нь фонтыг хүсэх болно fonts.gstatic.com. Та ямар фонтын файлаас гаралтайг мэдэх боломжгүй fonts.gstatic.com CSS файлыг ачаалах хүртэл танд хэрэг болох тул бид зөвхөн урьдчилсан холболтыг хийх боломжтой.

Гуравдагч талын скрипт эсвэл хэв маягийг бага зэрэг хурдасгахын тулд энэ шошгыг ашиглана уу Урьдчилан тогтоосон холболтын улмаас.

Үүнтэй төстэй шинж чанаруудыг анхаарч үзээрэй <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Тэдгээрийг нэг домэйнд хамтад нь ашиглах нь ихэвчлэн утгагүй байдаг: <link rel= "preconnect"> аль хэдийн орсон <link rel= "dns-prefetch"/> болон бусад олон. Үүнийг хоёр тохиолдолд зөвтгөж болно:

  • Та хуучин хөтчүүдийг дэмжихийг хүсч байна уу?. <link rel= "dns-prefetch" /> дэмждэг IE10 болон Safari 5-аас хойш. <link rel= "preconnect"> Chrome болон Firefox дээр хэсэг хугацаанд дэмжигдсэн боловч Safari-д зөвхөн 11.1 болон IE/Edge дээр дэмжигдээгүй хэвээр байна. Хэрэв та эдгээр хөтчүүдийг дэмжих шаардлагатай бол ашигла <link rel= "dns-prefetch" /> нөөц сонголт болгон <link rel= "preconnect">.
  • Та 4-6 домэйноос илүү холболтыг хурдасгахыг хүсч байна. Tag <link rel= "preconnect"> Холболт үүсгэх, хадгалах нь үнэтэй ажиллагаа учраас 4-6-аас дээш домэйнтэй ашиглахыг зөвлөдөггүй. <link rel= "dns-prefetch" /> нөөц бага зарцуулдаг тул шаардлагатай бол ашигла.

Дэлгэрэнгүй мэдээллийг харах

Нэмэлт шошго. Хөтөч нь энэ зааврыг дагаж мөрдөх шаардлагагүй тул жишээлбэл, хуудсан дээр ийм шошго олон байвал эсвэл бусад тохиолдолд DNS-ийн нарийвчлалыг гүйцэтгэхгүй байж магадгүй юм.

DNS гэж юу вэ. Интернет дэх сервер бүр өвөрмөц IP хаягтай байдаг бөгөөд энэ нь иймэрхүү харагддаг 216.58.215.78. Сайтын нэрийг ихэвчлэн хөтөчийн хаягийн мөрөнд оруулдаг (жишээлбэл, google.com), болон DNS (Домэйн Нэрийн Систем) серверүүд үүнийг серверийн IP хаягтай (216.58.215.78).

IP хаягийг тодорхойлохын тулд хөтөч DNS серверээс асуух ёстой. Гуравдагч талын шинэ домэйнд холбогдоход 20−120 мс шаардагдана.

DNS нь маш найдвартай биш ч кэштэй. Зарим үйлдлийн систем болон хөтчүүд DNS асуулгад кэш хийдэг: энэ нь давтан асуулгад цаг хэмнэх боловч кэш хийхэд найдах боломжгүй. Линукс дээр энэ нь ихэвчлэн огт ажилладаггүй. Chrome нь DNS кэштэй, гэхдээ энэ нь зөвхөн нэг минут үргэлжилнэ. Windows нь DNS хариултыг тав хоногийн турш хадгалдаг.

урьдчилан дүрслэх

<link rel= "prerender"> URL-г татаж аваад үл үзэгдэх таб дээр харуулахыг хөтөчөөс асууна. Хэрэглэгч холбоос дээр дарахад тэр даруй хуудас гарч ирэх ёстой. Хэрэв та хэрэглэгч тодорхой хуудсанд зочилж, түүний дэлгэцийг хурдасгахыг хүсч байгаа гэдэгт итгэлтэй байгаа бол энэ нь хэрэг болно.

Энэхүү шошго нь онцгой үр дүнтэй байсан ч (эсвэл үүний улмаас) 2019 онд <link rel= "prerender"> томоохон хөтөч дээр муу дэмжигдсэн. Дэлгэрэнгүй мэдээллийг үзнэ үү. доор байна.

синтакс

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

href арын дэвсгэр дээр үзүүлж эхлэхийг хүсэж буй URL руу заана.

Хэзээ хэрэглэх вэ

Хэрэглэгч тодорхой хуудас руу орох болно гэдэгт итгэлтэй байгаа үед. Хэрэв танд А хуудасны зочдын 70% нь В хуудас руу орох "хонгил" байгаа бол <link rel= "prerender"> А хуудсан дээр В хуудсыг маш хурдан харуулахад тусална.

Хэтрүүлэн хэрэглэж болохгүй. Урьдчилан дүрслэх нь зурвасын өргөн болон санах ойн хувьд маш үнэтэй байдаг. Хэрэглэж болохгүй <link rel= "prerender"> нэгээс илүү хуудасны хувьд.

Дэлгэрэнгүй мэдээллийг харах

Нэмэлт шошго. Хөтөч нь энэ зааврыг дагаж мөрдөх шаардлагагүй бөгөөд жишээлбэл, удаан холболт эсвэл санах ой хангалтгүй үед үүнийг үл тоомсорлож болно.

Санах ойг хадгалахын тулд Chrome бүрэн дүрслэл хийдэггүйболон зөвхөн NoState-г урьдчилан ачаална. Энэ нь Chrome нь хуудас болон түүний бүх нөөцийг ачаалдаг боловч JavaScript-г буулгаж, ажиллуулдаггүй гэсэн үг юм.

Firefox болон Safari нь энэ шошгыг огт дэмждэггүй. Хөтөч энэ зааврыг дагаж мөрдөх шаардлагагүй тул энэ нь техникийн үзүүлэлтийг зөрчөөгүй; гэхдээ гунигтай хэвээр байна. Хэрэгжилтийн алдаа Firefox долоон жилийн турш нээлттэй байна. Safari гэсэн мэдээлэл бий Энэ шошгыг бас дэмждэггүй.

Хураангуй

Хэрэглэх:

  • <link rel= "preload"> - хэдхэн секундын дотор нөөц хэрэгтэй үед
  • <link rel= "prefetch"> - дараагийн хуудсан дээрх эх сурвалж хэрэгтэй үед
  • <link rel= "preconnect"> - удахгүй танд нөөц хэрэгтэй болно гэдгийг мэдэж байгаа боловч түүний бүрэн URL-г хараахан мэдэхгүй байгаа үед
  • <link rel= "dns-prefetch"> - үүнтэй адил, та удахгүй нөөц хэрэгтэй болно гэдгийг мэдэж байгаа боловч түүний бүрэн URL-ыг хараахан мэдэхгүй байгаа үед (хуучин хөтчүүдийн хувьд)
  • <link rel= "prerender"> - хэрэглэгчид тодорхой хуудас руу орох болно гэдэгт итгэлтэй байгаа бөгөөд та түүний дэлгэцийг хурдасгахыг хүсч байвал

Эх сурвалж: www.habr.com

сэтгэгдэл нэмэх