როგორ ოპტიმიზირებთ ვებგვერდის მუშაობას?

• სურათების ოპტიმიზაცია:
  • თანამედროვე ფორმატების გამოყენება, როგორიცაა WebP.
  • სურათების სქემის გარეშე სიღრმის შემცირება.
  • Lazy loading სურათებისთვის, რომლებიც გარეთ ხილვადობის ზონაშია.
  • რეაგირების სურათები <picture> ან srcset გამოყენებით.
• რესურსების მინიფიკაცია და სიღრმის შემცირება:
  • HTML, CSS და JavaScript მინიფიკაცია.
  • Gzip ან Brotli სიღრმის შემცირება ტექსტურ რესურსებზე.
• კეშირება:
  • ბრაუზერის კეშირება HTTP სათაურებით (Cache-Control, Expires).
  • სერვერის მხარის კეშირება.
  • Offline წვდომისა და უფრო რთული სეივინგისთვის Service Workers-ის გამოყენება.
• კრიტიკული გზის ოპტიმიზაცია:
  • კრიტიკული CSS და JavaScript-ის გადადებული დატვირთვა.
  • ასინქრონული დატვირთვა (async, defer).
  • კრიტიკული CSS-ის ინლაინი.
• HTTP მოთხოვნების რაოდენობის შემცირება:
  • CSS და JavaScript ფაილების გაერთიანება (მაგრამ ყურადღებით HTTP/2-ში).
  • პატარა იკონებისთვის სპრაიტების გამოყენება.
  • მცირე რესურსების ინტეგრირება CSS-ში data URIs-ის გამოყენებით.
• ფონტების ოპტიმიზაცია:
  • თანამედროვე ფორმატების გამოყენება (WOFF2).
  • ფონტების ადგილობრივად განთავსება.
  • წინასწარი დატვირთვა (preload).
  • font-display გამოყენება ფონტების ჩვენების მართვისთვის.
• JavaScript-ის შესრულების ეფექტურობა:
  • ალგორითმებისა და მონაცემთა სტრუქტურების ოპტიმიზაცია.
  • DOM ოპერაციების რაოდენობის შემცირება.
  • მოვლენის დელეგაციის გამოყენება.
  • კოდის გაყოფა (code splitting).
• რენდერინგისა და გამოსახულების ოპტიმიზაცია:
  • ძვირადღირებული CSS თვისებების და სტილების თავიდან აცილება.
  • will-change გამოყენება.
  • ანიმაციების და გადასვლების ოპტიმიზაცია.
• CDN (Content Delivery Network) გამოყენება.
• სერვერის მხარის ოპტიმიზაცია:
  • სერვერის სწრაფი პასუხი.
  • მონაცემთა ბაზის მოთხოვნების ოპტიმიზაცია.

// Lazy დატვირთვის მაგალითი სურათისთვის
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; /* ბრაუზერს საშუალებას აძლევს გამოიყენოს შენახული ფონტი, სანამ მთავარი იტვირთება */
}