Поделиться:
4.9/5 - (267 голосов)

Заметки в телефоне (ночь, WordPress, WoodMart, WP Rocket, PageSpeed и немного пива)
22:31
Зашел на мобильный PageSpeed. 56/100.
Конечно. Прекрасно. Люблю боль.
22:38
Спрашиваю ИИ: что делать с WoodMart?
Он уверенно отвечает:
— “Включи Galaxy Mode в WP Rocket → Performance → Experimental”.
Я: где? Нет же такого.
- "Есть, вон там, рядом с Instant Warp".
Я смотрю на монитор, монитор смотрит на меня. Пиво смотрит на всех нас троих.
22:47
Ок, идем по другому пути.
ИИ говорит: "В WoodMart выключи Mega Defer Styles в Theme Settings".
Выдуманная кнопка №2 за вечер.
23:02
Решил «пойти по серьёзке»:
вставить некий "легкий" код в functions.php, который "автоматически удаляет весь неиспользованный CSS, что противоречит достоинству твоего сайта".
ИИ добавляет: "100% работает."
…
После обновления файла админка дышит как астматик на подъеме.
Сайт жив, но ему больно. Мне тоже.
23:19
В голове геройский голос: "давай напишем свой плагин - rocket-boost-super-critical".
Файл создался. Активировал.
Плагин ничего не делает, но звучит грозно. Зато сайт стал хуже грузиться.
Магия.
23:33
Возвращаю все вспять.
ИИ говорит: "О, ты молодец! Так и надо было."
Спасибо, капитан Очевидность.
23:48
WoodMart: включаю “Disable Gutenberg CSS”, “Disable emoji”, “Load Google Fonts Locally”…
ИИ говорит: "Обязательно включи HyperBoost Ajax Killer".
Вытираю слезу. Этого не существует.
00:06
WP Рокет.
— “Включи Remove Unused CSS.”
Включаю.
- "И еще Delay JS".
Включаю.
- "И Preload всем, все и всюду."
Не включаю. Я люблю еще жизнь.
00:21
CLS прыгает через WoodMart-слайдер и product swatches.
ШИ: "Просто добавь min-height: auto-important;"
…
auto-important звучит, будто шаманское заклятие – но, к сожалению, не CSS.
00:37
Придумал свой чеклист с триггером:
- Если пункт звучит как "космический режим" - не трогай.
– Если ИИ дает 100% гарантию – не трогай ×2.
– Если хочешь вставить код в functions.php в 00:37 – иди за пиво.
00:52
Делаю нормальные вещи, которые не модны, но работают:
- Выключаю ненужные виджеты WoodMart (ajax search live, если не нужно)
– убираю карусель, ставлю статическую картинку для мобильного героя
- в WP Rocket добавляю исключение на jquery.min.js, wc-cart-fragments, woodmart-theme.min.js от Delay JS
- собираю критический CSS страниц (не весь сайт одним ножом)
— шрифты локально, font-display: swap
- preload на главный шрифт и главное изображение LCP
01:11
Мобильный PageSpeed подскочил к 84.
ИИ пишет: "Я же говорил."
Ты ничего не говорил, друг. Я просто перестал тебе верить.
01:28
Я смотрю в окно – луна, Lexus, тишина.
И думаю: иногда лучшая оптимизация — выключить несуществующие галочки и вернуться к тому, что реально влияет.
01:44
Завтра допили LCP на картинке героя, и будет 90+.
Сегодня – Heineken и сон.
ШИ, не пиши мне до утра.

Пройдя через все эти мучения, несуществующие режимы и советы ИИ, я понял одно: работают только базовые, проверенные вещи. Вот мой финальный, проверенный план оптимизации WoodMart и WP Rocket, который вывел меня из болота 56 баллов в чистую зону PageSpeed. Без магии и “Hyper Turbo Mode

Почему PageSpeed хромает на мобильном в WoodMart

  • Слишком трудный герой (слайдер, видео, большие изображения) → плохой LCP.
  • Дефолтные шрифты Google с блокирующей загрузкой → FOIT/долгое отображение.
  • JS от WooCommerce/тематики, что мешает кэшированию и вызывает задержки.
  • CLS через слайдеры, карусели, отсутствуют width/height или aspect-ratio.

План оптимизации (WoodMart + WP Rocket) – кратко и по-деловому

1) LCP: сделайте первый экран легким

  • На мобильном - статический баннер вместо слайдера (серьезно, это половина успеха).
  • Фиксируйте высоту контейнера героя: минимум ~min-height: 60vh; или задайте aspect-ratio.
  • Изображение героя у WebP/AVIF, без "гигантов": 900–1200px по длинной стороне для мобильного.
  • Добавьте прелоад на LCP-изображение (только одно, главное):
    <link rel="preload" as="image" href="/path/hero.webp" imagesrcset="/path/hero-900.webp 900w, /path/hero-1200.webp 1200w" imagesizes="(max-width: 600px) 100vw, 600px">

2) WP Rocket: безопасные настройки, которые дают +балл

  • Cache: мобильный кэш включен.
  • File Optimization → CSS: Minify. Remove Unused CSS - тестируйте. Если что-то ломает, лучше дать критический CSS вручную (ниже пример).
  • File Optimization → JS: Minify+Delay JS. Добавьте исключения (чтобы не ломать корзину/тему):
    • jquery(.min)?.js
    • wc-cart-fragments
    • woodmart-theme(.min)?.js
    • скрипты платежей/аналитики, которые должны работать сразу
  • Media: Lazyload для изображений и iframe Нет лены LCP-картинку.

3) WoodMart: выключите лишнее, возьмите полезное

  • Performance: локальная загрузка Google Fonts, font-display: swap, минимизируйте количество набросков (2–3 веса).
  • Выключите неиспользуемые модули (live search, wishlist/compare, heavy карусели).
  • Для мобильного хедера меньше элементов и анимаций.

4) Шрифты: быстро и без "мигания"

  • Положите woff2 локально и добавьте прелоад на основной файл:
    <link rel="preload" as="font" href="/fonts/Inter-regular.woff2" type="font/woff2" crossorigin>
  • CSS-подключение с font-display: swap (чтобы текст не исчезал):
    @font-face{ font-family:"Inter"; src:url("/fonts/Inter-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

5) WooCommerce: мелочи, экономящие секунды

  • Добавьте исключение Delay JS для wc-cart-fragments (корзина и мини-корзина будут дышать ровно).
  • Выключите фичи, которые не требуются именно вам (quick view, сравнение, лишние виджеты).

6) Изображение, CDN и lazyload

  • Конвертируйте в WebP/AVIF, контролируйте размеры (никаких 2–5 МБ на мобилку).
  • Проверьте srcset/sizes, чтобы телефон не тянул десктопные картинки.
  • Lazyload для всего, кроме LCP. Для баннеров/плейсхолдеров добавьте прозрачные заглушки, чтобы избежать прыжков.

7) Анти-CLS: стабильная верстка без прыжков

  • Для изображений обязательно width/height или aspect-ratio.
  • Слайдеры/карусели: задайте высоту контейнера, выключите автоплей на мобильном.
  • Шрифты — только из swap и близким по метрике fallback.

8) Критический CSS: точечно, а не "ножом по всему сайту"

Создайте краткий критический CSS для главной (герой, хедер, первый экран) и добавьте в :

/* приклад мінімального критичного шару */
header{min-height:64px}
.hero{min-height:60vh; display:grid; place-items:center}
.hero h1{margin:0 0 .5rem}
.btn{display:inline-block; padding:.8rem 1.2rem}

Все остальные стили могут ехать асинхронно. Да вы спасаете LCP и визуальную готовность.

9) Что точно не делать в полночь 🙂

  • Не вставлять непроверенные "волшебные" сниппеты в functions.php.
  • Не включать одновременно “Remove Unused CSS” + агрессивные комбинации, если сайт велик и разнороден.
  • Не верить советам о несуществующих переключателях в плагинах (да, ИИ иногда фантазирует).

Малый контрольный список перед релизом

  • LCP на мобильном < 2.5 s на главных шаблонах (главная, категория, карточка товара).
  • CLS < 0.1 (статические размеры, без "прыгающих" каруселей).
  • Delay JS с исключениями для критических скриптов (jQuery, cart fragments, скрипты темы).
  • Шрифты локально + прелоад + swap.
  • Линивка изображений работает, но LCP нет лениво.

Если коротко по-человечески: меньше магии больше контроля. Спокойно убираем все лишнее, фиксируем первый экран и даем странице "задышать" без тяжелых скриптов. Да, иногда хочется нажать несуществующую галочку Hyper Turbo Mode, но лучше еще раз проверить LCP и исключения Delay JS.

Нужна рука рядом? Если сложно со всем этим разобраться, просто обратись на бесплатную консультацию — там расскажут подробно, а по желанию и сделают все за тебя, чтобы сайт реально летал:
https://speedwppro.com/uk/bezplatnyi-audyt/

| Объявления УХТЫ Город | oksi--31090     | Объявления УХТЫ Город | oksi--31089