Sobes.tech
Middle
116
questionbank

Какие методы вы можете использовать для ускорения загрузки веб-сайта?

Ответ от нейросети

sobes.tech AI

Минимизация и объединение CSS и JavaScript файлов. Сжатие изображений и использование современных форматов, таких как WebP. Использование отложенной загрузки (lazy loading) для изображений и видео. Кэширование ресурсов на стороне клиента и сервера. GZIP-сжатие для текстовых ресурсов. Минимизация HTTP-запросов. Использование CDN (Content Delivery Network). Оптимизация критического пути рендеринга. Удаление неиспользуемого кода. Использование Service Workers для офлайн-доступа и кэширования.

// Пример ленивой загрузки изображения
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;