Проблема и её решение
Наш сайт ощущался медленным при каждом клике, хотя технически всё работало корректно. Мы решили разобраться в причинах задержки и улучшить производительность.
Измерение вместо догадок
Первым шагом было измерить текущие показатели производительности сайта. Для этого использовались два инструмента:
- curl – для определения времени первого байта (
TTFB), размера полезной нагрузки и заголовков кэша. - Performance API браузера – для анализа ключевых метрик веб-витальности (
Core Web Vitals).
Изначально TTFB составлял около 1,6 секунд, что уже указывало на проблему на стороне сервера. При этом первая отрисовка содержимого происходила практически сразу после получения данных, а значит проблема не была связана с рендерингом или блокирующим JavaScript-кодом.
Анализ результатов измерений
Анализ показал следующее распределение показателей:
- Время первой отрисовки контента (
First Contentful Paint, FCP): 1,78 сек. - Отображение самого большого элемента (
Largest Contentful Paint, LCP): 1,8 сек. - Изменения макета (
Cumulative Layout Shift, CLS): незначительные (~0,00)
Эти данные ясно показывали, что задержка почти полностью обусловлена серверной частью проекта.
Что именно замедляло загрузку?
Основной причиной проблемы стало отсутствие эффективного кэширования на уровне HTTP-запросов. Каждый запрос пользователя приводил к полному пересчёту всей страницы на сервере, включая обращения к базе данных и полный рендеринг. Это занимало примерно 1,6 секунды на каждый запрос.
Таким образом, основная часть оптимизации должна была быть направлена на улучшение работы кэша.
Реализация решения
Для устранения проблемы были предприняты следующие шаги:
- Добавление правильного управления кэшированием через заголовки HTTP (
cache-control). - Оптимизация запросов к базе данных за счёт использования более эффективных методов выборки данных.
- Минимизация количества повторных вычислений на сервере путём внедрения механизма кеширования динамических компонентов страниц.
После внесения изменений результаты оказались следующими:
- TTFB: снизился с 1,66 до 0,18 секунды.
- FCP: уменьшилось с 1,78 до 0,31 секунды.
- LCP: улучшилось с 1,8 до 0,31 секунды.
В результате общая скорость загрузки увеличилась примерно в шесть раз.
Заключение
Оптимизация производительности сайта оказалась эффективной благодаря правильному подходу к анализу проблем и внедрению улучшений на уровне серверного кода. Ключевым фактором успеха стала оптимизация системы кэширования и минимизация избыточных операций на сервере.
