Магазин на Flatsome + Elementor показывает PageSpeed Mobile 34 — реклама уходит, а витрина грузится вечность. В практике конструктор редко виноват сам: чаще Google Fonts с CDN, лишние аддоны и отсутствие кэша. Ниже — пять шагов с цифрами 34→86 на реальном каталоге.
Почему Elementor «тормозит»
Распространённое мнение: «Elementor медленный сам по себе». На самом деле — нет. Медленным сайт делают типовые ошибки настройки: десятки неиспользуемых виджетов в загрузке, шрифты Google через CDN, отсутствие кэша, тяжёлые изображения без WebP. Если их по очереди исправить — PageSpeed Mobile вырастает с 30–40 до 80–90 без замены конструктора.
Разбираем реальный сценарий — каталог на Flatsome + Elementor + WooCommerce с PageSpeed Mobile 34. Цель — 85+. Что делаем по порядку.
Шаг 1. Elementor Experiments
В админке: Elementor → Settings → Experiments. Включаем экспериментальные оптимизации, которые работают стабильно:
- Optimized DOM Output — убирает лишние обёртки
<div>вокруг секций и колонок. Сокращает HTML на 20–30%. - Improved Asset Loading — загружает CSS/JS виджетов только на тех страницах, где они реально используются.
- Inline Font Icons — иконки шрифтами заменяет на инлайновые SVG (быстрее и адекватнее для PageSpeed).
- Lazy-load background images — фоновые картинки секций загружаются по мере скролла.
- Element Caching (если есть в вашей версии) — кэширует рендер виджетов, сильно ускоряет TTFB.
Эффект: PageSpeed Mobile 34 → 52. Сайт становится заметно «легче» на глаз — раскладка стабилизируется на 1–2 секунды раньше.
Шаг 2. Self-hosted шрифты вместо Google Fonts CDN
Запросы к fonts.googleapis.com и fonts.gstatic.com — одна из главных причин низкого LCP на Mobile. Решается переводом шрифтов на свой сервер:
- Скачиваете woff2-файлы нужных шрифтов с gwfh.mranftl.com (только нужные веса!).
- Кладёте в
wp-content/themes/Ваша-тема/fonts/. - В
functions.phpили через плагин (OMGF, Local Google Fonts) прописываете@font-faceсfont-display: swapиpreloadдля основного веса. - В Elementor → Global Settings — выключаете Google Fonts.
Эффект: 52 → 64. Уходят 2 блокирующих запроса в Critical Request Chain.
Шаг 3. Чистим лишние плагины и виджеты
На реальных сайтах часто стоит 3–5 плагинов-аддонов к Elementor (Crocoblock, Essential Addons, PowerPack, Happy Addons, ElementsKit). Каждый добавляет 30–80 виджетов, из которых на сайте используются 2–3.
Решение: в настройках каждого аддона отключите все виджеты, которые не используются. Через 5 минут сайт станет ощутимо легче — меньше CSS, меньше JS, меньше initial render-time.
Дополнительно — пройдитесь по списку плагинов: за полгода накапливается 5–10 «помощников», которые ставили под одну задачу и забыли. Каждый второй можно удалить. Полный чек-лист аудита — в статье «Сколько плагинов нужно WordPress».
Эффект: 64 → 73.
Шаг 4. Кэш и отложенная загрузка JS
Установка одного из кэш-плагинов:
- WP Rocket — платный, самый стабильный с Elementor.
- LiteSpeed Cache — бесплатный, отлично работает на хостингах с LiteSpeed Web Server.
- W3 Total Cache — бесплатный, но требует более тонкой настройки.
Минимальные настройки, которые работают на 95% сайтов с Elementor:
- Кэш страниц — включить, время жизни 24 часа.
- Минификация HTML, CSS, JS — включить.
- Объединение CSS/JS — выключить. На современных HTTP/2 это даже вредит, и часто ломает Elementor.
- Defer JS — включить, но в исключения добавить
jqueryиelementor, иначе сломается редактор. - Database cleanup — раз в неделю чистить ревизии, спам-комменты, transients.
Эффект: 73 → 80.
Шаг 5. Изображения в WebP и lazy-load
Изображения — 60–80% веса страницы. Перевод в WebP даёт сжатие 25–50% без потери качества. Делается двумя плагинами на выбор:
- ShortPixel Image Optimizer — платный после первой 100 картинок, очень качественное сжатие.
- WebP Express — бесплатный, конвертирует на лету, отдаёт WebP браузерам с поддержкой.
- Imagify — платный, удобный интерфейс.
Дополнительно: убедитесь, что в Elementor для каждой картинки задан размер (не Full), а в HTML присутствуют атрибуты width и height — без них браузер не может зарезервировать место и Cumulative Layout Shift растёт.
Эффект: 80 → 86.
Что НЕ нужно делать
- Не ставьте 2 кэш-плагина одновременно — они конфликтуют. Про дубли SEO, безопасности и аналитики — отдельный разбор.
- Не включайте «Optimize CSS Delivery» в WP Rocket без тестов — часто ломает первый экран Elementor.
- Не пытайтесь «выключить jQuery» — Elementor от него зависит.
- Не используйте Critical CSS-плагины автоматом — без правильной настройки они генерируют битый CSS и портят вёрстку.
Итог реального кейса
Стартовали с PageSpeed Mobile 34, после 5 шагов — 86. Работы суммарно — 6 часов. Сайт визуально не изменился, конфигурация Elementor осталась той же, никакие виджеты не пришлось пересобирать. Похожие кейсы — в портфолио.
Магазин на Elementor + WooCommerce: после ускорения проверьте, что письма о заказах доходят; перед крупным обновлением ядра — подготовка к WordPress 7.0.
Когда позвать спеца
Если после 5 шагов PageSpeed застрял на 60–70 — обычно проблема глубже: тяжёлая тема, дублирующие запросы к БД, JS-плагины аналитики, неправильно настроенный хостинг. Это уже работа уровня программиста, не «настройки мышкой». Сделаем аудит и доведём до целевых цифр — подробности здесь.
