Ի՞նչ մեթոդներ կարող եք օգտագործել վեբկայքի բեռնման արագությունը բարձրացնելու համար։

CSS և JavaScript ֆայլերի նվազեցում և միավորում: Նկարների սեղմում և ժամանակակից ձևաչափերի օգտագործում, ինչպիսիք են WebP: Նկարների և տեսանյութերի համար lazy loading (ուշացվող բեռնում): Ռեսուրսների կեշավորում հաճախորդի և սերվերի կողմում: GZIP սեղմում տեքստային ռեսուրսների համար: HTTP հարցումների նվազեցում: Օգտագործել CDN (Content Delivery Network): Կրիտիկական ռենդերային ճանապարհի օպտիմալացում: Անօգտագործված կոդի հեռացում: Օֆլայն մուտք և կեշավորում համար Service Workers օգտագործում:

// Նկարի 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;
      observer.unobserve(img);
    }
  });
});

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

Նկարի ձևաչափերի համեմատություն:

Ֆորմատ	Տիպիկ օգտագործում	Հատկություններ
JPEG	Ֆոտոներ	Զգումային սեղմում, լայն գունային տիրույթ
PNG	Գրաֆիկա թափանցիկությամբ, լոգոներ	Անզգումային սեղմում, աջակցում է թափանցիկությանը
GIF	Անիացիոն պատկերներ	Անզգումային սեղմում, աջակցում է անիմացիային
WebP	Ֆոտոներ և գրաֆիկա	Ավելի արդյունավետ սեղմում (զգումային և առանց զգումային), աջակցում է թափանցիկությանը և անիմացիային

/* CSS-ի միավորումը և նվազեցումը օրինակ */
body {
  font-family: sans-serif;
  /* font-size: 16px; */ /* Օգտագործված չլինող կոդը հեռացվել է */
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

# GZIP սեղմում Nginx-ում օրինակ
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;