ProHoster > блог > Администрација > Однапред вчитајте, превземајте и други ознаки

Однапред вчитајте, превземајте и други ознаки

Постои многу начини за подобрување на веб перформансите. Еден од нив е претходно вчитување содржина што ќе биде потребна подоцна. CSS претходна обработка, претходна рендерирање на целата страница или резолуција на име на домен. Ние правиме сè однапред, а потоа веднаш го прикажуваме резултатот! Звучи кул.

Она што е уште покул е тоа што се спроведува многу едноставно. Пет ознаки дајте му на прелистувачот команда да изврши прелиминарни дејства:

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

href го означува ресурсот што сакате да го преземете.

as може да биде сè што може да се преземе во прелистувачот:

  • style за стилски листови,
  • script за скрипти,
  • font за фонтови,
  • fetch за ресурси натоварени со користење fetch() или XMLHttpRequest,
  • погледнете ја целосната листа на МДН.

Важно е да се одреди атрибутот 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="/mk/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="/mk/style.css" as="style" />

href го означува ресурсот што сакате да го преземете.

as може да биде сè што може да се преземе во прелистувачот:

  • style за стилски листови,
  • script за скрипти,
  • font за фонтови,
  • fetch за ресурси натоварени со користење fetch() или XMLHttpRequest,
  • погледнете ја целосната листа на МДН.

Важно е да се одреди атрибутот as - ова му помага на прелистувачот правилно да даде приоритет и да закаже преземања.

Кога да се користи

За да вчитате ресурси од други страници, ако ви треба ресурс од друга страница и сакате да го вчитате однапред за потоа да го забрзате прикажувањето на таа страница. На пример:

  • Имате онлајн продавница, а 40% од корисниците ја напуштаат почетната страница за страницата на производот. Користете <link rel= "prefetch">, вчитување на датотеки CSS и JS за прикажување на страници со производи.
  • Имате апликација на една страница, а различни страници вчитуваат различни пакети. Кога корисникот посетува страница, пакетите за сите страници до кои се поврзува може да се вчитаат однапред.

Многу е веројатно дека оваа ознака може безбедно да се користи во која било мера.. Прелистувачите обично закажуваат однапред преземање со најнизок приоритет, така што никому не му пречи. Само имајте на ум дека троши кориснички сообраќај, што може да чини пари.

Не за итни барања. Не користете <link rel= "prefetch">, кога ресурсот е потребен за неколку секунди. Во овој случај, користете <link rel= "preload">.

Детали за

Изборна ознака. Од прелистувачот не се бара да ја следи оваа инструкција; може да ја игнорира, на пример, при бавна врска.

Приоритет во Chrome. Во Хром <link rel= "prefetch"> обично се извршува со минимален приоритет (види целосна приоритетна табела), односно откако ќе се вчита сè друго.

претходно поврзување

<link rel= "preconnect"> бара од прелистувачот однапред да се поврзе со доменот кога сакате да го забрзате поставувањето на врската во иднина.

Прелистувачот мора да воспостави врска ако поврати какви било ресурси од нов домен на трета страна. На пример, ако вчитува Google Fonts, React фонтови од CDN или бара JSON одговор од API сервер.

Воспоставувањето нова врска обично трае неколку стотици милисекунди. Тоа се прави еднаш, но сепак е потребно време. Ако однапред сте воспоставиле врска, ќе заштедите време и побрзо ќе ги преземате ресурсите од овој домен.

синтакса

<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 или барање JSON одговор од API-сервер.

За секој нов домен, резолуцијата на записот на DNS обично трае околу 20-120 ms. Ова влијае само на вчитувањето на првиот ресурс од даден домен, но сепак воведува доцнење. Ако однапред извршиме резолуција на 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 домени. Означете <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 ms кога се поврзувате со нов домен од трета страна.

DNS е кеширан, иако не е многу сигурен. Некои ОС и прелистувачи ги кешираат барањата за DNS: ова ќе заштеди време на повторени барања, но не може да се потпре на кеширањето. На Linux обично не работи воопшто. Хром има 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

Додадете коментар