ProHoster > Blog > башкаруу > Алдын ала жүктөө, алдын ала алуу жана башка тегдер

Алдын ала жүктөө, алдын ала алуу жана башка тегдер

бар желе аткарууну жакшыртуу үчүн көптөгөн жолдору. Алардын бири кийинчерээк керек боло турган мазмунду алдын ала жүктөө. CSS алдын ала иштетүү, толук бетти алдын ала көрсөтүү же домендик аталышты чечүү. Биз баарын алдын ала жасайбыз, анан ошол замат натыйжаны көрсөтөбүз! Сонун угулат.

Андан да сонун нерсе, бул абдан жөнөкөй ишке ашырылган. Беш тег алдын ала иш-аракеттерди аткаруу үчүн браузерге буйрук бер:

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


Келгиле, алар эмне кылышат жана аларды качан колдонуу керектигин кыскача түшүндүрүп берели.

Секирүү: алдын ала жүктөө · алдын ала алуу · алдын ала туташуу · dns-prefetch · алдын ала көрсөтүү

алдын ала жүктөө

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

Браузер жүктөлгөндөн кийин ресурс менен эч нерсе кылбайт. Скрипттер аткарылган эмес, стилдик таблицалар колдонулбайт. Ресурс жөн гана кэштелген жана суроо-талабы боюнча дароо жеткиликтүү болот.

синтаксиси

<link rel="preload" href="/ky/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" />
  • Стильдериңизди мамилеге жараша ажыратсаңыз Critical 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="/ky/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="/ky/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 шрифттерин жүктөсө, 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, React шрифттерин CDNден жүктөө же 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'то бир аз убакыт колдоого алынган, бирок 11.1 жана Safari'ге гана кошулган 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 сурамдарын кэштейт: бул кайталанган сурамдарга убакытты үнөмдөйт, бирок кэшке ишенүүгө болбойт. Linuxта ал, адатта, такыр иштебейт. 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"> — колдонуучулар белгилүү бир бетке өтөөрүнө ишенсеңиз жана анын дисплейин тездетүүнү кааласаңыз

Source: www.habr.com

Комментарий кошуу