Улучшение скорости загрузки сайта на WordPress

Работы по улучшению скорости загрузки сайта trendoptika.ru проводились в несколько этапов.

Этап 1. Базовая оптимизация

На первом этапе была выдвинута гипотеза, что основная причина низкой скорости связана с большим количеством плагинов CSS и использованием конструктора сайта. Полный отказ от плагинов и конструктора потребовал бы фактически переписывания сайта с нуля, поэтому было принято решение начать с устранения типовых ошибок, замедляющих загрузку:

• уменьшен объем CSS-кода
• уменьшен объем JavaScript-кода
• настроена отложенная загрузка изображений
• настроена отложенная загрузка шрифтов
• настроена отложенная загрузка части скриптов
• настроено кэширование страниц
• стандартными средствами WordPress количество плагинов сокращено в 2 раза

После внедрения изменений были получены следующие результаты:

Этап 2. Работа с показателями CLS и LCP

Спустя некоторое время возникла повторная задача по улучшению производительности, с фокусом на показатели CLS (визуальная стабильность страницы) и LCP (скорость загрузки основного контента). Были выдвинуты и внедрены новые гипотезы:

• Уменьшение размеров изображений в слайдерах под фактические размеры отображения
• Использование только одного Google Tag Manager, ранее было 2
• Использование только одного сервиса аналитики Google, ранее было 3
• Отложенная загрузка скрытых изображений в слайдерах
• Отложенная загрузка шрифтов
• Для исправления CLS зафиксирована высота «дергающихся» блоков на разных разрешениях экрана

Показатели до внедрения:

Этап 3. Ленивая загрузка блоков

Позднее была предпринята еще одна попытка ускорения сайта. На этом этапе все возможные рекомендации PageSpeed уже были реализованы, однако проблема с CSS и JS-файлами, подключаемыми через плагины, оставалась и не могла быть устранена полностью. Была предложена и внедрена одна гипотеза:

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

Этап 4. Оптимизация хостинга

Дополнительно были выполнены работы по оптимизации серверной части. Было выявлено, что рендеринг страниц занимает значительное время из-за высокой нагрузки на базу данных. В рамках работ:

• оптимизированы индексы базы данных, что существенно ускорило выполнение запросов
• выявлена нехватка оперативной памяти для быстрой обработки запросов и предложен предложен переезд с shared-хостинга на VPS-сервер.

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

Сайт успешно перенесли на VPS-хостинг. Скорость ответа сервера увеличилась почти в 1,5 раза.