Ինչպես կարելի է օպտիմալացնել արտաքին ռեսուրսների բեռնման գործընթացը վեբ էջում?

Մինիֆիկացիա և սեղմում: CSS, JavaScript և HTML ֆայլերի չափը նվազեցնելու համար հեռացնելով բացատները, նոր տողերը և մեկնաբանությունները, ինչպես նաև օգտագործելով սեղմման ալգորիթմներ, ինչպիսիք են Gzip կամ Brotli:

Ազդեցիկ բեռնում (Lazy Loading): Նկարագրեր, տեսանյութեր և այլ ռեսուրսներ բեռնել միայն այն ժամանակ, երբ նրանք հայտնվում են տեսանելի տարածքում։ Սա կարելի է իրականացնել loading="lazy" հատկության կամ JavaScript-ի միջոցով:

<img src="image.jpg" loading="lazy" alt="Նկարագրություն">

Ասինխրոն և հետաձգված բեռնում: async և defer հատկությունների օգտագործում <script> տեգերի համար:

• [async]: Սկրիպտը բեռնում է ասինխրոն և կատարվում է, երբ հասանելի է, առանց HTML-ի վերլուծությունը խոչընդոտելու:
• [defer]: Սկրիպտը բեռնում է ասինխրոն, բայց կատարվում է միայն այն ժամանակ, երբ HTML փաստաթուղթը ամբողջությամբ վերլուծված է:

<script src="script.js" async></script>
<script src="another-script.js" defer></script>

Ներկայիս պատկերների օպտիմալացում: Օգտագործել ժամանակակից ձևաչափեր (WebP), առանց որակի կորուստի սեղմում, ճիշտ լուծաչափ ընտրել և օգտագործել srcset և <picture> հատկությունները:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Նկարագրություն">
</picture>

HTTP/2 և HTTP/3: Օգտագործել նոր տարբերակներ HTTP պրոտոկոլի, որոնք աջակցում են մուլտիպլեքսավորմանը և գլխագրերի սեղմմանը:

Բրաուզերի կեշավորում: Կարգավորել HTTP գլխագրերը Cache-Control և Expires ռեսուրսների պահպանումը որոշ ժամանակ:

CDN (Content Delivery Network): Ռեսուրսների տարածում սերվերների միջև, որոնք տեղակայված են օգտվողի մոտ, նվազեցնելու համար ուշացումը:

Նախաբեռնում և ռենդերինգ (Preload և Preconnect): Օգտագործել rel="preload" ռեսուրսների համար, որոնք շուտով անհրաժեշտ կլինեն, և rel="preconnect" արտաքին դոմեյնին նախապես կապ հաստատելու համար:

<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">

HTTP հարցումների քանակը նվազեցնել: CSS և JavaScript ֆայլերը միավորել, օգտագործել սպրայթներ պատկերների համար:

Բլոկավոր ռենդերինգ ռեսուրսների վերացում: Օգտագործել media հատկությունը <link> տեգերի համար, որպեսզի ոճերը կիրառվեն միայն որոշ պայմաններում:

<link rel="stylesheet" href="print.css" media="print">