ProHoster > Блог > басқарма > Алдын ала жүктеу, алдын ала алу және басқа тегтер

Алдын ала жүктеу, алдын ала алу және басқа тегтер

бар веб өнімділігін жақсартудың көптеген жолдары. Олардың бірі кейінірек қажет болатын мазмұнды алдын ала жүктеу. CSS алдын ала өңдеу, толық бетті алдын ала көрсету немесе домендік атауды шешу. Біз бәрін алдын ала жасаймыз, содан кейін нәтижені бірден көрсетеміз! Керемет естіледі.

Ең қызығы, ол өте қарапайым түрде жүзеге асырылады. Бес тег шолғышқа алдын ала әрекеттерді орындау пәрменін беріңіз:

<link rel="prefetch" href="/kk/style.css" as="style" />
<link rel="preload" href="/kk/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-алдын ала алу · алдын ала көрсету

шегімен

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

Браузер жүктелгеннен кейін ресурспен ештеңе істемейді. Сценарийлер орындалмайды, стиль кестелері қолданылмайды. Ресурс жай ғана кэштеледі және сұраныс бойынша бірден қолжетімді болады.

синтаксис

<link rel="preload" href="/kk/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="/kk/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="/kk/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 қаріптерін пайдаланады. Олар екі қадаммен жүктеледі: біріншіден, 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-алдын ала алу

<link rel= "dns-prefetch"> жақын арада қосылатын болсаңыз және бастапқы қосылымды тездеткіңіз келсе, браузерден домен үшін DNS ажыратымдылығын алдын ала орындауын сұрайды.

Браузер жаңа үшінші тарап доменінен кез келген ресурстарды алатын болса, доменнің IP мекенжайын анықтауы керек. Мысалы, Google қаріптерін жүктеу, 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 қаріптерін пайдаланады. Олар екі қадаммен жүктеледі: біріншіден, 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 доменнен артық қосылымдарды жылдамдатқыңыз келеді. Тег <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"> — пайдаланушылардың белгілі бір бетке өтетініне сенімді болғаныңызда және оны көрсетуді жылдамдатқыңыз келген кезде

Ақпарат көзі: www.habr.com

пікір қалдыру