Оптимизация загрузки веб-страниц - Лабораторные для студентов Прикладной Информатики

Теоретическая справка

1. Адаптивный дизайн и медиазапросы (повторение)

Адаптивный дизайн позволяет контенту сайта автоматически подстраиваться под различные устройства. Медиазапросы применяются для изменения стилей в зависимости от характеристик устройства.

Пример базового медиазапроса:

@media (max-width: 600px) {
  .menu {
    display: none;
  }
}

2. Специальные медиазапросы

2.1. @media (hover: hover) and (pointer: fine)

Этот медиазапрос используется для определения устройств, которые поддерживают указатель с высокой точностью (например, мышь) и могут обрабатывать события наведения.

Пример:

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: lightblue;
  }
}

2.2. @media (prefers-color-scheme: dark)

Этот медиазапрос позволяет определить, предпочитает ли пользователь темную или светлую тему интерфейса. Совместно с использованием CSS переменных и атрибута color-scheme можно легко переключать темы.

Пример использования темной и светлой темы с CSS переменными:

/* Определение CSS переменных для светлой темы */
:root {
  --background-color: white;
  --text-color: black;
}

/* Определение CSS переменных для темной темы */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: black;
    --text-color: white;
  }
}

/* Применение цветов через CSS переменные */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  color-scheme: light dark; /* Поддержка встроенной темной и светлой схемы */
}

3. Оптимизация изображений

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

Методы оптимизации изображений:

Использование формата WebP: Формат WebP, разработанный Google, позволяет сжимать изображения с потерями и без потерь, сохраняя высокое качество при меньшем размере файлов.

Пример кода с использованием WebP:
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание изображения">
</picture>
```
Lazy-loading: Отложенная загрузка изображений помогает загружать только те изображения, которые пользователь видит на экране, снижая нагрузку на сеть и ускоряя загрузку страницы.

Пример использования lazy-loading:
```
<img src="image.webp" loading="lazy" alt="Описание изображения">
```
Адаптивные изображения (srcset и sizes): Использование атрибутов srcset и sizes позволяет браузеру выбирать наиболее подходящее изображение в зависимости от устройства и разрешения экрана.

Пример адаптивных изображений:
```
<img src="image-small.jpg" srcset="image-large.jpg 1024w, image-medium.jpg 640w, image-small.jpg 320w" sizes="(max-width: 600px) 100vw, 50vw" alt="Адаптивное изображение">
```

4. Подключение шрифтов: CDN vs. локальное подключение

Шрифты могут оказывать значительное влияние на скорость загрузки сайта, поэтому важно выбирать правильный метод подключения.

1. Подключение через CDN:

Преимущества:
- Кэширование: Пользователи могут загружать шрифты быстрее, если они уже закэшированы у них из-за посещения других сайтов, использующих тот же CDN.
- Глобальная доступность: CDN размещают ресурсы на серверах по всему миру, обеспечивая быструю загрузку независимо от местоположения пользователя.
Недостатки:
- Зависимость от сторонних сервисов: Если CDN выходит из строя, шрифты могут не загрузиться.
- Конфиденциальность: Загрузка шрифтов с внешних источников может отслеживаться третьими сторонами.

Пример подключения шрифта через CDN:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

2. Локальное подключение шрифтов:

Преимущества:
- Контроль: Шрифты загружаются с вашего сервера, что снижает зависимость от внешних сервисов.
- Гибкость: Вы можете оптимизировать и изменять шрифты по своему усмотрению.
Недостатки:
- Требует оптимизации: Без сжатия и подгонки подмножества символов размер файлов шрифтов может быть значительным.

Пример подключения локального шрифта с использованием @font-face:

@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'MyFont', sans-serif;
}

Оптимизация шрифтов:

Подмножества шрифтов: Создание шрифтов, содержащих только необходимые символы, уменьшает размер файла.
Атрибут font-display: Использование значения swap обеспечивает немедленное отображение текста с системным шрифтом, пока загружается основной шрифт.

5. Использование `<link rel="preload">`

Тег <link rel="preload"> помогает браузеру заранее загружать важные ресурсы, улучшая время рендеринга страницы.

Как работает preload:

Ресурсы, загруженные с использованием preload, загружаются параллельно с основным контентом страницы, что ускоряет их доступность.
Атрибут as указывает тип ресурса (например, font, image, script), чтобы браузер мог правильно приоритизировать загрузку.

Пример предварительной загрузки шрифта:

<link rel="preload" href="fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin>

Примеры использования:

Изображения: Ускоряет отображение изображений, которые должны быть загружены сразу (логотип).
Скрипты: Использование preload для JavaScript помогает избежать задержек выполнения критических скриптов.

Практическое задание

Создать адаптивный сайт на тему "Виртуальный музей искусства". Сайт должен представлять коллекцию художественных произведений с различными секциями, такими как "Картины", "Скульптуры", "Современное искусство" и "Интерактивные выставки".

Задание: Оптимизация сайта на тему "Виртуальный музей искусства"

Адаптировать макет сайта для мобильных устройств и планшетов, используя медиазапросы.
Оптимизировать изображения, заменив их на .webp и добавив резервные версии.
Сравнить время загрузки шрифтов через CDN и локально, привести результаты.
Реализовать темную и светлую тему сайта с использованием медиазапросов, CSS переменных и атрибута color-scheme.

Групповые доклады

Доклад 1: Современные методы сжатия изображений

Сравнение форматов изображений (JPEG, PNG, WebP, AVIF).
Инструменты и методы сжатия изображений без потери качества.
Примеры улучшения производительности.

Доклад 2: Оптимизация загрузки шрифтов

Влияние шрифтов на производительность сайта.
Подмножество шрифтов, формат WOFF2, задержка загрузки.
Использование font-display для управления отображением шрифтов.

Доклад 3: Анализ и улучшение критического пути рендеринга

Понятие критического пути рендеринга и его влияние на загрузку.
Стратегии уменьшения количества критических ресурсов.
Инструменты для анализа и улучшения производительности.

Доклад 4: Content Delivery Networks (CDN) и их роль в производительности

Принцип работы CDN и их использование для ускорения загрузки.
Примеры популярных CDN и интеграция в проекты.
Как выбрать CDN для оптимизации производительности.

Доклад 5: Минификация файлов CSS и JavaScript

Принцип минификации и ее влияние на производительность.
Популярные инструменты для минификации.
Примеры использования и влияние на размер файлов.