Ինչպե՞ս եք օպտիմալացնում կայքի կատարողականությունը։

• Ակտիվիզացիա պատկերների:
  • Օգտագործում ժամանակակից ձևաչափեր, ինչպիսիք են WebP:
  • Պատկերների սեղմում առանց որակի կորուստի:
  • Lazy loading պատկերների համար, որոնք դուրս են տեսանելի տարածքից:
  • Աдапտիվ պատկերներ <picture> կամ srcset օգտագործելով:
• ռեսուրսների մինիմիզացիա և սեղմում:
  • HTML, CSS և JavaScript մինիմիզացիա:
  • Gzip կամ Brotli սեղմում տեքստային ռեսուրսների համար:
• Կեշավորում:
  • Բրաուզերի կեշավորում HTTP հղումներով (Cache-Control, Expires):
  • Սերվերի կողմի կեշավորում:
  • Օգտագործում Service Workers՝ օֆլայն հասանելիության և ավելի բարդ կեշավորման համար:
• Կատարյալ ռենդերային ճանապարհի օպտիմալացում:
  • Անհրաժեշտ CSS և JavaScript-ի հետաձգված բեռնում:
  • Ասինխրոն բեռնում (async, defer):
  • Կատարյալ CSS-ի ներքին բեռնում:
• HTTP հարցումների քանակի նվազեցում:
  • CSS և JavaScript ֆայլերի միավորումը (բայց զգուշությամբ HTTP/2-ում):
  • Փոքր պատկերների համար sprite-ների օգտագործում:
  • Փոքր ռեսուրսների ներմուծում CSS-ով data URIs օգտագործելով:
• Ֆոնտերի օպտիմալացում:
  • Ժամանակակից ֆոնտերի ձևաչափեր (WOFF2):
  • Ֆոնտերը տեղական տեղադրումը:
  • Ֆոնտերի նախաբեռնում (preload):
  • font-display օգտագործում՝ ֆոնտերի ցուցադրման կառավարում:
• JavaScript-ի արդյունավետություն:
  • Ալգորիթմների և տվյալների կառուցվածքների օպտիմալացում:
  • DOM գործողությունների քանակի նվազեցում:
  • Դատարկության դելեգացիայի օգտագործում:
  • Կոդի բաժանում (code splitting):
• Ռենդերային և ցուցադրման օպտիմալացում:
  • Հեռացնել թանկարժեք CSS հատկությունները և ոճերը:
  • will-change օգտագործում:
  • Աнимаցիաների և անցումների օպտիմալացում:
• CDN (Content Delivery Network) օգտագործում:
• Սերվերի մասի օպտիմալացում:
  • Արագ պատասխան սերվերից:
  • Բազայի հարցումների օպտիմալացում:

// Օրինակ՝ lazy loading պատկեր
const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      delete img.dataset.src;
      observer.unobserve(img);
    }
  });
});

images.forEach(image => {
  observer.observe(image);
});

<!-- Օրինակ՝ async և defer օգտագործելով սցենարներ -->
<script src="script1.js" async></script>
<script src="script2.js" defer></script>

/* Օրինակ՝ font-display օգտագործելով */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap; /* Բրաուզերը կարող է օգտագործել պահեստային ֆոնտը՝ մինչեւ հիմնականը բեռնվում է */
}