Лабораторная работа №6 - Оптимизация контента и изображений
1. Теория
Оптимизация контента — улучшение структуры и веса страницы для ускорения загрузки. Оптимизация изображений — уменьшение веса файлов и переход на современные форматы (WebP, AVIF).
Основные подходы
- уменьшение размера изображений;
- использование WebP/AVIF;
- отложенная загрузка (
loading="lazy"); - минификация HTML, CSS, JS;
- структурирование контента (SEO + UX);
- повторное тестирование скорости.
Среда выполнения
Работа выполняется только в онлайн-редакторах:
Инструменты оптимизации
- PageSpeed Insights
- Squoosh.app
- Optimizilla
- WebPageTest.org
2. Задания
2.1. Создание исходной «проблемной» версии страницы
Создать в CodePen страницу index.html:
- заголовок;
- 2–3 абзаца;
- 3–4 изображения большого размера (1–3 МБ);
- кнопка или ссылка.
В CSS указать фиксированные размеры изображений.
Сохранить ссылку на версию до оптимизации.
2.2. Анализ скорости загрузки
Проверить через PageSpeed Insights и заполнить таблицу:
| Показатель | Значение | Рекомендация |
|---|---|---|
| LCP | ||
| CLS | ||
| FID | ||
| Рекомендации инструмента |
2.3. Оптимизация изображений
Оптимизировать изображения через Squoosh/Optimizilla.
| Файл | Исходный размер | Оптимизированный | Формат | Экономия |
|---|---|---|---|---|
| photo1.jpg | ||||
| photo2.png | ||||
| photo3.jpg |
2.4. Ленивая загрузка
Добавить:
<img src="image.webp" loading="lazy" alt="Описание">
Проверить, что изображения грузятся только при прокрутке.
2.5. Оптимизация текстового контента
- использовать заголовки h1–h3;
- проверить текст через glvrd.ru или text.ru;
- сократить объём до 250 слов.
2.6. Сравнение «до / после»
Проверить улучшения повторно в PageSpeed Insights.
Оформить вывод:
«Скорость выросла с X до Y, объём страницы уменьшился на Z%, ленивая загрузка сократила трафик на N%.»
3. Контрольные вопросы
- Что такое оптимизация контента?
- Какие форматы изображений считаются современными?
- Что такое lazy loading?
- Что означают LCP, FID, CLS?
- Какие инструменты измеряют производительность?
- Что такое минификация?
- Как проверять текст на удобочитаемость?
- Почему важно указывать размеры изображений?
- Преимущества WebP перед JPG?
- Ваши шаги для ускорения медленной страницы?
4. Чек-лист для самопроверки
| Баллы | Критерии выполнения |
|---|---|
| 7 | Создана исходная страница до оптимизации, проведён анализ скорости, выполнена полная оптимизация изображений и контента, добавлена ленивая загрузка, исправлена структура контента, есть сравнение до/после с выводами. |
| 6 | Оптимизация изображений и контента выполнена, ленивая загрузка реализована частично, анализ скорости присутствует. |
| 5 | Выполнено сжатие изображений, но без проверки скорости или без форматов WebP/AVIF. Контент оптимизирован частично. |
| 3–4 | Изменения частичные. Изображения уменьшены вручную, без инструментов и без анализа. |
| 1–2 | Оптимизация изображений проведена не полностью, показатели скорости не улучшены, отсутствует сравнение или результаты оптимизации. |
| 0 | Работа не представлена или страница не содержит признаков оптимизации. |