Расскажи все про оптимизацию загрузки сайтов

Оптимизация загрузки сайтов включает множество техник, направленных на уменьшение времени отклика и улучшение производительности.

1. Сжатие изображений
   Большие изображения замедляют загрузку. Используйте форматы WebP или AVIF, которые обеспечивают высокое качество при меньшем размере. Инструменты вроде Squoosh или ImageOptim помогают сжать картинки без потерь.

2. Минификация CSS и JavaScript
   Удаление пробелов, комментариев и сокращение кода уменьшает размер файлов. Для этого подходят Webpack, Vite или онлайн-инструменты вроде UglifyJS.

3. Кэширование
   Браузеры могут сохранять статические файлы (CSS, JS, изображения), чтобы не загружать их повторно. Настройте HTTP-заголовки Cache-Control и Expires на сервере.

4. Ленивая загрузка (Lazy Load)
   Изображения и другие ресурсы загружаются только когда они попадают в область видимости экрана. В HTML это делается через атрибут loading="lazy" для <img>.

5. Использование CDN
   Content Delivery Network (CDN) — это сеть серверов, которые доставляют контент пользователю с ближайшего к нему узла. Это ускоряет загрузку, особенно для глобальной аудитории.

6. Оптимизация шрифтов
   Подключайте только нужные начертания шрифтов и используйте font-display: swap, чтобы текст отображался сразу, даже если шрифт ещё не загрузился.

Пример кода для lazy load:

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="Пример">

Скрипт может заменить src на data-src, когда изображение появляется в viewport.