Կա վեբ կատարումը բարելավելու բազմաթիվ եղանակներ. Դրանցից մեկը բովանդակության նախնական բեռնումն է, որը հետագայում անհրաժեշտ կլինի: CSS-ի նախնական մշակում, ամբողջական էջի նախնական մատուցում կամ տիրույթի անվան լուծում: Մենք ամեն ինչ անում ենք նախօրոք, այնուհետև անմիջապես ցուցադրում ենք արդյունքը: Թույն է հնչում:

Ավելի լավն այն է, որ այն շատ պարզ է իրականացվում: Հինգ պիտակ զննարկիչին տվեք նախնական գործողություններ կատարելու հրաման.

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

Նախաբեռնել

<link rel= "preload"> զննարկիչին ասում է հնարավորինս շուտ բեռնել և պահել ռեսուրսը (օրինակ՝ սկրիպտը կամ ոճաթերթը): Սա օգտակար է, երբ ռեսուրսը անհրաժեշտ է էջի բեռնումից մի քանի վայրկյան անց, և դուք ցանկանում եք արագացնել գործընթացը:

Բրաուզերը բեռնումից հետո ռեսուրսի հետ ոչինչ չի անում: Սցենարները չեն կատարվում, ոճաթերթերը չեն կիրառվում: Ռեսուրսը պարզապես պահվում է քեշում և անմիջապես հասանելի է դառնում ըստ պահանջի:

շարահյուսություն

<link rel="preload" href="/hy/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');
  }

  By default 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="/hy/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="/hy/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-ը, 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 տառատեսակներ: Դրանք ներբեռնվում են երկու քայլով՝ նախ՝ 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 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 տառատեսակներ: Դրանք ներբեռնվում են երկու քայլով՝ նախ՝ 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-ում այն ​​սովորաբար ընդհանրապես չի աշխատում: Chrome-ն ունի DNS քեշ, բայց այն տևում է ընդամենը մեկ րոպե: Windows-ը պահում է DNS պատասխանները հինգ օրվա ընթացքում:

prerender

<link rel= "prerender"> խնդրում է դիտարկիչին ներբեռնել URL-ը և ցուցադրել այն անտեսանելի ներդիրում: Երբ օգտվողը սեղմում է հղումը, էջը պետք է անմիջապես ցուցադրվի: Սա օգտակար է, եթե վստահ եք, որ օգտվողը կայցելի որոշակի էջ և ցանկանում է արագացնել դրա ցուցադրումը:

Չնայած (կամ պատճառով) այս պիտակի բացառիկ արդյունավետությանը, 2019թ <link rel= "prerender"> վատ աջակցություն խոշոր բրաուզերներում: Տես ավելի մանրամասն. Ստորեւ.

շարահյուսություն

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

href մատնանշում է URL-ը, որը ցանկանում եք սկսել ետին պլանում ցուցադրել:

Երբ օգտագործել

Երբ դուք իսկապես վստահ եք, որ օգտվողը կգնա որոշակի էջ. Եթե ​​ունեք «թունել», որով A էջի այցելուների 70%-ը գնում է B էջ, ապա <link rel= "prerender"> A էջում կօգնի B էջը շատ արագ ցուցադրել:

Մի չարաշահեք. Pre-rendering-ը չափազանց թանկ է թողունակության և հիշողության առումով: Չեն օգտագործում <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